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

相关推荐
勇敢di牛牛2 分钟前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
Rhys..1 小时前
JS - npm init
开发语言·javascript·npm
程序0072 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html
没有鸡汤吃不下饭2 小时前
H5移动端页面实现快递单号条形码/二维码扫描,亲测可行!!
前端·javascript·vue.js
云枫晖2 小时前
JS核心知识-模块化
前端·javascript
Asort2 小时前
JavaScript设计模式(十五)——解释器模式 (Interpreter)
前端·javascript·设计模式
喝西瓜汁的兔叽Yan2 小时前
书架效果的实现
javascript·vue.js
Jyywww1212 小时前
uniapp uni.chooseImage+uni.uploadFile使用方法与详解
开发语言·javascript·uni-app
小高0072 小时前
🔥🔥🔥收藏!面试常问JavaScript 中统计字符出现频率,一次弄懂!
前端·javascript·面试
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 26 - 数组长度变更处理
前端·javascript·vue.js