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

相关推荐
竹林8183 小时前
RainbowKit 快速集成多链钱包连接:从“连不上”到丝滑切换的踩坑实录
前端·javascript
嗜好ya3 小时前
解决 Vite 项目中 import.meta.env 变量为 undefined 的问题
前端·javascript·vue.js
心连欣3 小时前
JS算法入门:图解“冒泡排序”,彻底搞懂双重循环的奥义
前端·javascript
浩星4 小时前
「Vue3 + Cesium 最佳实践」完整工程化方案
前端·javascript·vue.js
小李子呢02115 小时前
前端八股Vue(5)---v-if和v-show
前端·javascript·vue.js
YiuChauvin5 小时前
vue2中使用 AntV G6
javascript·vue.js
peak_chan6 小时前
通过vue-virtual-scroller封装虚拟滚动el-select
前端·javascript·vue.js
小李子呢02116 小时前
前端八股Vue(7)---computed计算属性和watch侦听器
前端·javascript·vue.js
吴声子夜歌6 小时前
ES6——对象的扩展详解
开发语言·javascript·es6
gwjcloud7 小时前
基于linux下docker部署前端vue项目
前端·javascript·vue.js