乐趣区

关于前端:Cookie之SameSite属性

Cookie 之 SameSite 属性

Chrome80 之后更新了 cookie 的携带机制,把原来的 SameSite 属性,由 None 改成了 Lax,这就导致了一些须要应用到第三方 cookie 的利用产生了异样。如果你这段时间有常常关注控制台的话,可能会发现一些 warning:

Cookie 的 SameStie 属性用来限度第三方 Cookie,从而缩小平安危险(避免 CSRF 攻打)和用户追踪。

具体如何应用 cookie 来避免 CSRF 攻打,能够参考应用站点 Cookie 属性避免 CSRF 攻打,外面根底地介绍了相干的常识。

SameSite 属性

SameSite 属性用来限度第三方 Cookie,从而缩小平安危险,能够设置成三个值:

  • Strict
  • Lax
  • None

1.Strict

Set-Cookie: CookieName=CookieValue; SameSite=Strict;

Strict 最为严格,齐全禁止第三方 Cookie,跨站点时,任何状况下都不会发送 Cookie。换言之,只有以后网页的 URL 与申请指标统一,才会带上 Cookie。这个规定过于严格,可能造成十分不好的用户体验。比方,以后网页有一个 GitHub 链接,用户点击跳转就不会带有 GitHub 的 Cookie,跳转过来总是未登陆状态。

2.Lax

Set-Cookie: CookieName=CookieValue; SameSite=Lax;

Lax 规定稍稍放宽,大多数状况也是不发送第三方 Cookie,然而导航到指标网址的 Get 申请除外。导航到指标网址的 GET 申请,只包含三种状况:链接,预加载申请,GET 表单

申请类型 示例 以前 Strict Lax None
链接 <a href="..."></a> 发送 Cookie 不发送 发送 Cookie 发送 Cookie
预加载 <link rel="prerender" href="..."/> 发送 Cookie 不发送 发送 Cookie 发送 Cookie
get 表单 <form method="GET" action="..."> 发送 Cookie 不发送 发送 Cookie 发送 Cookie
post 表单 <form method="POST" action="..."> 发送 Cookie 不发送 不发送 发送 Cookie
iframe <iframe src="..."></iframe> 发送 Cookie 不发送 不发送 发送 Cookie
ajax $.get("...") 发送 Cookie 不发送 不发送 发送 Cookie
image <img src="..."> 发送 Cookie 不发送 不发送 发送 Cookie

从下面的表格能够看出,将 SameSite 的值从 None 改为 Lax 后,Form,Iframe,Ajax 和 Image 中跨站的申请受到的影响最大。解决办法也很简略,就是接下来介绍的 None 值。

3.None

Set-Cookie: widget_session=abc123; SameSite=None; Secure;

Chrome 打算将 Lax 变为默认设置。这时,网站能够抉择显式敞开 SameSite 属性,将其设为 None。不过,前提是必须同时设置 Secure 属性(Cookie 只能通过 HTTPS 协定发送),否则有效。

局部浏览器不能加 SameSite=none,比方一些老版本的 chrome 浏览器等,它们会谬误的把 SameSite=none 辨认成 SameSite=strict。因而后端要依据 UA 来判断是否加上 SameSite=none。
不反对 SameSite = none 的浏览器版本等具体情况,可参照链接

参考

  • http://www.ruanyifeng.com/blo…
  • https://web.dev/samesite-cook…
  • https://web.dev/samesite-cook…
  • RFC 文档:https://tools.ietf.org/html/d…
退出移动版