图解 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 的话,攻击者就能够发起跨站请求伪造,导致系统受到攻击,请务必谨慎使用!

相关推荐
英俊潇洒美少年3 小时前
Vue 生产环境打包:SourceMap、压缩、混淆、加密全解 + 最佳实践
前端·javascript·vue.js
巴博尔3 小时前
UNIAPP中NVUE页面 动画
android·前端·javascript·ios·uni-app
猫头虎-前端技术4 小时前
JS 作用域与闭包:从变量提升到闭包陷阱的超详细解析
开发语言·javascript·云计算·bootstrap·ecmascript·openstack·perl
她说人狗殊途5 小时前
基于 vue-cli 创建
前端·javascript·vue.js
大家的林语冰6 小时前
Deno 2.8 正式发布,再次超越 Bun,史上最大的次版本升级诞生!
前端·javascript·node.js
影寂ldy6 小时前
C#数组的属性和方法(Clear / Copy / IndexOf )
开发语言·javascript·c#
Brave & Real7 小时前
小程序 const 在js中以及与同类的var和let之间的差异
javascript·微信小程序·小程序
米丘8 小时前
React 19.x 的 lazy 与 Suspense
前端·javascript·react.js
ZC跨境爬虫8 小时前
跟着 MDN 学CSS day_21:(图像溢出控制与表单元素样式定制)
前端·javascript·css·ui·交互
riuphan9 小时前
JavaScript 中的 this 关键字
javascript