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

相关推荐
To_OC11 小时前
LC 51 N 皇后:我以为难的是回溯,结果栽在了对角线下标
javascript·算法·leetcode
小林ixn12 小时前
从零到一理解 React 父子组件通信:手写一个 Todo 应用带你彻底搞懂单向数据流
前端·javascript·react.js
窝子面15 小时前
手搓最简前后端协作-node
javascript·数据库
kyriewen16 小时前
我让AI给前端项目做了一次完整的Code Review——它和人类的差距,比我想的大得多
前端·javascript·ai编程
এ慕ོ冬℘゜16 小时前
前端基础:什么是时间戳?JS获取时间戳三种方法与实战用途
开发语言·前端·javascript
sugar__salt17 小时前
Vue3 表单双向绑定与响应式核心 API 技术详解
前端·javascript·vue.js
SmartBoyW18 小时前
CSS弹性布局(Flexbox)学习笔记:从零开始搞懂弹性布局
前端·javascript
用户9385156350718 小时前
写了这么久 useState,你真的知道它在干什么吗?
前端·javascript
烬羽18 小时前
递归老写崩?一个"退回"公式,把回溯题变成填空题
javascript·深度学习·算法
浮江雾19 小时前
Flutter第十七节-----路由管理(3)
android·开发语言·前端·javascript·flutter·入门