乐趣区

关于前端:Cookie安全属性SameSite

一、背景

忽然本地启动的利用通过公司 SSO 登录后仍旧拿不到登录态信息,前两天还好好啊,排查发现保留登录态的 cookie 减少了 Secure 属性:

set-cookie: ticket=86A24; Max-Age=7775999; Domain=test.com; Path=/;HttpOnly; SameSite=None; Secure

咦?平台团队怎么忽然加了 Secure 属性,并且 SameSite=None; 又是啥?

二、Cookie 的 SameSite 属性

2.1 先弄清几个概念

同站(Same Site)和跨站(Cross Site)

同站:顶级域名 +1雷同(即主域雷同)的站点(跟端口无关),也叫本方(First-party);
跨站:非同站,也叫第三方(Third-party)。

同源(Same Origin)和跨域(Cross Origin)

同源:协定(https?)+域名 + 端口 三者完全相同;
跨域:非同源。

跨站申请

首先要明确一个页面援用的内部资源(CSS,JS,图片以及通过 JS API 发送的申请等)可能来自不同的站点。

跟页面不是同站的申请 都是跨站申请。如页面 www.example.com/a 里援用了图片www.baidu.com/image/dog.png,加载图片的申请就是跨站申请。

跨站申请概念是绝对的,如图片 www.baidu.com/image/dog.png 在页面 www.example.com/a 里是跨站申请,然而在 www.baidu.com/a 页面里是同站申请。

2.2 干嘛的?

SameSite属性就是管制哪些跨站申请能够携带 cookie。

  1. 解决 cookie 信息泄露;
  2. 进攻 CSRF 攻打。

2.3 语法

SameSite=Strict/Lax/None

三种取值

  1. Strict
    严格模式,必须同站申请能力发送 cookie。
  2. Lax (relax 缩写)
    宽松模式,平安的跨站申请 能够发送 cookie。
  3. None
    显示地禁止 SameSite 限度,必须配合 Secure 一起应用(浏览器最初的保持)。

平安的跨站申请

比拟难了解的就是 Lax 模式下浏览器视为哪些跨站申请时平安的:
总结下就是同步的 GET 申请
比方通过对 的点击,对 <form> 的 GET 形式提交,还有扭转 location.href,调用 window.open() 等形式产生的申请

SameSite并不影响跨站申请的响应设置 cookie。

2.4 怎么用?

首先看 cookie 怎么用的:

  1. 对于只须要同站拜访的 cookie 能够显示的指定SameSite=Lax/SameSite=Strict;
  2. 对于跨站拜访的 cookie 须要显示的指定SameSite=None; Secure
  3. 不要采纳 SameSite 默认,跨浏览器的默认行为不统一。

三、再看结尾提到的问题:

因为 SSO 登录态 cookie 须要被跨站拜访,所以平台把登录态 cookie 设置成 SameSite=None; Secure。因为本地开发时启动的利用是http 协定的,所以无奈拿到登录态 cookie。

3.1 解决方案

在 DevTool 里手动把登录态 Cookie 的 Secure 属性删掉。

参考

整顿自笔记 Cookie SameSite=none

退出移动版