浏览器: cookie机制完全解析

[wuyunqiang]

先有问题再有答案

1. 为什么需要cookie
2. cookie是什么？
3. cookie都有哪些属性可以配置？
4. 跨域,跨站,同源,同站有什么关系?
5. cookie是谁设置的 谁可以发送 谁可以更改？
6. 第三方cookie是什么意思
7. 浏览器禁用第三方cookie对业务有什么影响
8. cookie与网页安全有什么关系
9. 如何解决跨域共享cookie的问题
10. 跨域无法携带Cookie & 浏览器全面禁止第三方Cookie 是一回事嘛？

cookie的背景

HTTP协议是无状态的 一个用户第二次请求和一个新用户第一次请求 服务端是识别不出来的，cookie是为了让服务端记住客户端而被设计的。

cookie是一种存储方式

Cookie是存储在用户web浏览器中的小块数据一般不超过4k，它一般用于存储用户身份信息。

Cookie是由服务端设置在浏览器上的

Cookie是由浏览器管理的并且随着http请求自动发送的。

Cookie在服务端配置允许的前提下 可以使用js访问操作cookie。

既然cookie是一种存储方式 用来存储用户身份 我们同样可以使用其他的存储方式替代cookie这是完全可以的 只是需要我们自己发送和维护 毕竟cookie是浏览器自动发送和清理的。

cookie的关键属性

name&value

属性名和属性值 cookie中的内容信息

domain&path

设置了cookie的作用范围。

• Domain：指定了 Cookie 发送的主机名, 只能设置范围小于等于自己的域名范围。假如没有指定，那么默认值为当前文档访问地址中的主机部分（但是不包含子域名）。
  
• path：指定一个 URL 路径，只有当路径匹配时，才会向服务器发送 Cookie。例如设置“/”这此域下所有路径都可以携带cookie。

Expires&Max-Age

设置cookie有效期。Expires 和 Max-Age 都存在，Max-Age 优先级更高。

• Expires：设置 Cookie 的过期时间。如果不设置，Cookie 会在浏览器关闭时自动失效，称为会话 Cookie（Session Cookie）。Expires 使用的是具体的日期和时间（例如：Sat, 31 Dec 2022 23:59:59 GMT）。
• Max-Age：设置 Cookie 在多少秒后过期。与 Expires 相比，Max-Age 是相对于当前时间的持续时间，更加灵活。max-Age > 0, 浏览器会将其持久化，即写到对应的 Cookie 文件中。当 max-Age < 0，则表示该 Cookie 只是一个会话性 Cookie。当 max-Age = 0 时，则会立即删除这个 Cookie。

Secure

标记该属性的 Cookie 只应通过被 HTTPS 协议加密过的请求发送给服务端。这有助于保护数据在互联网上传输过程中不被窃取。

HttpOnly

此属性用来帮助防止跨站脚本攻击（XSS），因为标记为 HttpOnly 的 Cookie 无法通过 JavaScript 的 Document.cookie API 访问。这意味着即使系统有 XSS 漏洞，Cookie 也不会被盗取。

Size与Priority

Cookie 的大小一般为4KB，当超出这个范围时会移除旧的 Cookie。移除时按照优先级由低到高删除。

SameSite

SameSite 属性可以让 Cookie 在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。

• Strict：Cookie 不会随着来自第三方的请求被发送
• Lax：在一些第三方请求场景中发送，例如通过a标签链接点击到其他站点时...
• None：不做限制 即使是来自第三方的请求，也会发送 Cookie，需要配合Secure属性一起使用。
  

第三方cookie：非当前域名下的服务器设置的cookie。例如上图中当前网页访问的是a.test.com网站, 请求了a.example.com的图片资源，a.example.com即为第三方。

SameSite改变的影响

在 Chrome 80+ 版本中，SameSite 的默认属性是 SameSite=Lax，当 Cookie 没有设置 SameSite 属性时，将会视作 Lax 。如果想要指定 Cookies 在同站、跨站请求都被发送，那么需要明确指定 SameSite 为 None。具有 SameSite=None 的 Cookie 也必须标记为安全并通过 HTTPS 传送。

同源(Same-Origin)&同站(Same-Site)

Same-Origin

协议(http/https)+主机+端口 三者完全保持一致。

例如https://juejin.cn/post/7338284106797088809#heading-9和https://juejin.cn/post/7355063847382810635符合同源标准。

Cross-Origin

Same-Origin规则中任意不一致即跨域 具体参考 浏览器:安全策略

Same-Site

两个 URL 的 eTLD+1 相同即可，不需要考虑协议和端口。

eTLD 表示有效顶级域名，注册于 Mozilla 维护的公共后缀列表（Public Suffix List）中，例如，.com、.co.uk、.github.io 等。

eTLD+1 表示，有效顶级域名+二级域名。

例如：

test.com和a.test.com同站

test.com和example.com跨站

总结

1. web中任何请求都受到同源限制，cookie在此基础上还会受到同站策略限制(samesite指定)。
2. 跨站一定跨域 跨域不一定跨站
3. ajax跨域请求一般有两个问题 请求能否发出去 cookie能否携带上。

跨域携带cookie解决方案

通过CORS解决

服务器端配置：在服务器端设置响应头Access-Control-Allow-Credentials为true，并且Access-Control-Allow-Origin不能为*，必须是请求方的具体源，如 http://example.com。

客户端配置：发起请求时，设置credentials为include确保请求会携带Cookie。

通过代理服务器解决

如果不是我们自己业务的服务端 无法配置更改 可以通过代理转发的方案。

浏览器禁用第三方cookie解决方案

设置samesite:none

设置跨站可以传递cookie 需要配合Secure一起使用。

使用第一方Cookie

由主域直接设立和访问，不受第三方Cookie限制的影响

代理服务器转发

如同上面的方案一样 这个情况也同样适用

使用其他存储方案

cookie的作用是存储用户标识 让服务端知道是谁在请求 我们完全可以使用其他的存储方式 例如localStorage.

follow浏览器标准

例如Partitioned属性 设置cookie分区存储。它的作用是使 第三方Cookie 与 第一方站点 相绑定，通过将第三方Cookie的读取和写入操作限制在创建它们的相同网站的上下文中，来增强用户隐私。

分区前cookie存储

因为a.test.com和a.example.com都使用了a.3rd.com的资源。a.3rd.com可以在请求时设置cookie。这样当同一个用户在两个网站上活动时可以被a.3rd.com识别到，造成隐私泄露...

分区后cookie存储

因为cookie的存储方式变了 用户在a.test.com浏览时 a.3rd.com设置的cookie包含了当前的上下文 。

当用户在a.example.com访问时 因为[a.test.com,a.3rd.com]这个cookie无法被访问到不会被自动发送给第三方服务器 阻止了第三方的信息采集, 增强了用户的隐私保护...

跨域无法携带Cookie Vs 浏览器全面禁止第三方Cookie 区别

• 目的不同：跨域请求默认不携带Cookie主要是出于安全考虑，防止跨站点请求伪造等攻击；禁止第三方Cookie主要是出于隐私保护考虑，防止用户跨网站被追踪。
• 操作层面不同：跨域Cookie的发送需要通过适当的服务器和客户端配置来实现；第三方Cookie的禁用是由浏览器控制，影响所有第三方来源的Cookie。

这两者虽然都涉及到Cookie和浏览器的策略，但它们关注的重点、解决的问题和需要的配置都有所不同。

其他相关文章

浏览器: 帧&渲染流程

浏览器: 帧&事件循环

浏览器: 安全策略

浏览器: 进程与线程

参考

1. mdn_Cookies
2. 浏览器系列之 Cookie 和 SameSite 属性
3. 当浏览器全面禁用三方 Cookie
4. Cookies 完全指南
5. ruanyifeng_cookie-samesite