深入解析Cookie机制:从操作实践到安全属性详解

cookie介绍

当你首次登录网站时,你会输入用户名和密码。在后台,网站的服务器验证这些凭据是否正确。一旦确认你的身份无误,服务器就会创建一个Cookie,并将其发送到你的浏览器。这了解Cookie登录:原理、实践与安全指南个Cookie包含了一个独特的身份验证令牌,它代表了你的登录会话。而这个包含用户一些信息的小型数据片段,就是Cookie。

跨站和跨域

两个Url的一级域名与二级域名相同就属于同站

两个Url的协议或是域名或端口号不同那就跨域了,跨域判断比跨站判断严格很多。

Cookie操作

再浏览器中输入document.cookie就可以得到部分的cookie信息,获取到的是一个字符串,使用split(';')将它及逆行切割,它的序列化方式是k1=v1;k2=v2;k3=v3

而浏览器中实际存储的可不止这四条cookie只要httpOnly被打上了钩那么使用JS是无法获取到这个cookie的,这种cookie只能用浏览器和服务端来进行操作,通常做种cookie使用来存储一些与用户身份信息或是安全相关凭证。

在浏览器中增加一条cookie的值也是使用document.cookie来进行操作

而要变更一条cookie的值是与新增是一样的,只要将需要变更的key值进行重新赋值就可以了,而删除操作就需要将cookie的key值设为空,同时将max-age=-1

代码执行后cookie面板的对应的这条cookie就会消失

Cookie的属性

key&value

每个cookie都有它对应的键名和值,获取cookie对应值的时候,可以把document.cookie返回的字符串使用split(';')进行分割分割后每条cookie都是kv对,把他们存入对象之后就可以比较方便的获取了使用了

domain

domain是cookie能做作用的主机地址,domain里面的东西非常多,首先domain不携带主机和端口,这个地方端口不同。协议不同都不会影响cookie,但是cookie的部分属性只有在HTTPS下才能生效

我们在https://a.com中写下了四个cookie

打开http://a.com这四个cookie依然存在,当把端口号改成1234的时候http://a.com:1234这四个cookie还是存在。这就是cookie的特性不区分协议和端口。

细心的同学已经发现了,有的domain最前面有一个点,有的没有。有点的domain就表示这个cookie可以作用于当前域及其子域。如果我们在新增cookie的时候没有带上domain,那么这个cookie只能作用于当前域。 但是当我们设置domain=a.com它的作用域却是.a.com,当我们设置domain=.a.com时它的作用域也是.a.com这点要记好。

最后就是在子域里面可以给父域设cookie,那么我们可以在a.com中获取到这个cookie,也可以在b.a.com获取到这个cookie,因为这个cookie是作用于a.com及其子域的。但是我们是不能从父域给子域设置domain,也不能跨域设置domain。

Path

path用来指定URL的路径,比如在a.com/a设置一个cookie这个cookie的path是/a,那么在a.com/a/b这个页面就也有这个cookie而在a.com/b这个页面就没有。

Expires & max-age

expires在指定时间失效 max-age多少秒之后失效 这两个属性同时存在时,max-age的优先级更高 max- age=- 1 删除cookie,0也是删除 max-age=60 则60秒之后删除cookie

当一个cookie既不设置expires又不设置max-age,那么这个cookie就是一个会话cookie,当浏览器被关闭时,这个cookie将会被清除。

httpOnly

httpOnly时和cookie安全性紧密相关的属性,前面说到过h't't'pOnly被打上了钩那么使用JS是无法获取到这个cookie的,这种cookie只能用浏览器和服务端来进行操作的。带有htppOnly的cookie只能由服务端通过响应标头中的set-cookie种在浏览器上面,js是无法获取到的。

Secure

secure这个属性告诉浏览器这个cookie只能用https协议传输,如果服务端的响应的从cookie中有secure这个属性,而当前页面的协议是http的,那么这个浏览器会忽略掉这个cookie。

这里我们在https协议的页面下创建一个带有secure的cookie,当我们向https://a.com发起请求的时候就会携带上这个cookie,而当向http://a.com发起请求的时候就不会有这个cookie的

Samesite

samesite属性可以限制跨站请求时cookie的发送。samesite的值是none,lax或者strict中的一个:

None不论是否跨站都发送cookie,虽然None是约束性最弱的,但是只有它是通过https协议进行传输时,浏览器才认为它有效,另外它必须要添加secure属性,不然将无法保存在浏览器上

Strict跨站不带cookie

Lax默认值,部分情况下携带cookie。具体情况如下表

相关推荐
C澒1 分钟前
多场景多角色前端架构方案:基于页面协议化与模块标准化的通用能力沉淀
前端·架构·系统架构·前端框架
崔庆才丨静觅3 分钟前
稳定好用的 ADSL 拨号代理,就这家了!
前端
江湖有缘4 分钟前
Docker部署music-tag-web音乐标签编辑器
前端·docker·编辑器
hzb666666 分钟前
unictf2026
开发语言·javascript·安全·web安全·php
恋猫de小郭1 小时前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅8 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了9 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅9 小时前
实用免费的 Short URL 短链接 API 对接说明
前端