图解 Cookie

Cookie 是网站存储在用户计算机上的一个小文件,其中存储的信息会在浏览器和网站之间来回传输。当发起 HTTP 请求的时候,如果响应头里面有 Set-Cookie 键值对,那么说明该请求种下了 Cookie:

众所周知,HTTP 是无状态的,每次请求和响应都是独立的,借助 Cookie,同一个用户如果多次访问相同域名网站,浏览器就会自动携带 Cookie,这样服务器就能区分出来不同用户了并保持状态了:

默认情况下,Cookie 是非常不安全的,连 JavaScript 都能读取甚至修改:

如果你不想让自己种下的 Cookie 被 JavaScript 读取,可以设置 HttpOnly=true 来禁用脚本读取。

同一个网站里面可能会访问不同域名提供的服务:

如果种 Cookie 的域名和当前网站相同,那么就被称为一方 Cookie,否则就是三方 Cookie。例如用户访问 travel.site,种 Cookie 的也是 travel.site,那么就是一方 Cookie:

而如果 travel.site 中调用了 maps.site 的服务,也种下了 Cookie,那么这个 Cookie 就是三方 Cookie:

所以,「一方」和「三方」并不是绝对的标签,相同的 Cookie 可能是第一方 Cookie,也可能是第三方 Cookie,取决于用户当时所在的网站。

为什么要区分一方和三方 Cookie?

为了增强浏览器的安全性,因为默认情况下,只要某个 HTTP 响应种下了 Cookie,在有效期内用户再次请求该域名,就会自动发送 Cookie,包括三方 Cookie:

这其实是不安全的,会导致 CSRF 攻击,于是在 RFC6265bis 中引入了 SameSite 属性来控制这种行为,并提供了三个值:

  • Strict:完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。
  • Lax:默认值。除了下面三种情况外,不发送第三方 Cookie
    • 链接:<a href="..."></a>
    • 预加载请求:<link rel="prerender" href="..."/>
    • GET 表单:<form method="GET" action="...">
  • None:跨站都发送 Cookie

也就是说,必须设置了 SameSite 为 None 的三方 Cookie,下次请求浏览器才会自动携带。

SameSite 和 Secure 的关系

SameSite 设置为 None 有一个前提,就是必须是 Secure 的,即 HTTPS 协议的响应才能种下这种 Cookie,否则 SameSite 就会设置失败。

如果只设置了 SameSite=None,但是没有给 Secure 的话,该 Cookie 会被拒绝。

SameSite=None 的危害

为了避免 CSRF 攻击,浏览器默认会拒绝携带三方 Cookie,但是如果你将 SameSite 设置为 None 的话,攻击者就能够发起跨站请求伪造,导致系统受到攻击,请务必谨慎使用!

相关推荐
anOnion5 小时前
Agentic 前端开发之 实时显示 AI Agent 终端输出
前端·javascript·人工智能
这是个栗子5 小时前
【前端性能优化】优化数据加载:用 Promise.all 从串行到并行
前端·javascript·性能优化·异步编程·前端优化·promise.all
fei_sun6 小时前
黑洞路由(Null Route/空接口路由)
服务器·前端·javascript
摇滚侠7 小时前
方法 A 等方法 B 执行完再执行 叫同步调用还是异步调用 JS 默认是同步调用还是异步调用
开发语言·javascript·ecmascript
触底反弹8 小时前
🔥 字符串算法面试三连击:反转、回文、回文变种,搞懂这三题稳了!
前端·javascript·算法
触底反弹8 小时前
AI Tool Use 深度解析:大模型是如何"突破物理限制"调用外部工具的?
javascript·人工智能·后端
竹林8188 小时前
从 RPC 超时到批量签名:我用 @solana/web3.js 重构了一个 NFT 铸造页面,踩了这些坑
前端·javascript
优雅格子衫9 小时前
TypeScript 类的基本使用小结
javascript·ubuntu·typescript
橘子星9 小时前
从零手写 RAG 语义检索:基于 Node.js 实现轻量级向量搜索
javascript·人工智能
林希_Rachel_傻希希9 小时前
web性能优化之————图片效果
前端·javascript·面试