你了解 Cookie 中的 SameSite 属性吗

Cookie 的 SaimeSite 属性用于控制跨站点 Cookie 的发送权限，可用于它防止 CSRF 攻击。

CSRF

CSRF (Cross-site request forgery)，跨站请求伪造，又称为 one-click attack，顾名思义，通过恶意引导用户一次点击劫持 cookie 进行攻击。

1. 受害者登录支付某宝，在支付某宝网站留存了 Cookie
2. 引导用户进入黑客网站
3. 在黑客网站，构造表单，使用户点击提交后，「向支付某宝发送请求，该请求用于转账」
4. 在黑客网站，向支付某宝发送请求时，因支付某宝存在 Cookie，转账成功

比如，黑客在黑客网站构造如下表单，当用户进入该页面将会自动发送 POST 请求，进行转账操作。

<form action="https://zhifumoubao/转账" method=POST>
    <input type="hidden" name="from" value="zhangsan" />
    <input type="hidden" name="to" value="shanyue" />
    <input type="hidden" name="amount" value="10000" />
</form>
<script>
  document.forms[0].submit()
</script> 

而 CSRF 成功的关键点在于，「跨域请求时会自动携带第三方网站的 Cookie」。

「而在当下时间(2022年)，由于 SameSite 属性的存在，跨域请求很难携带 Cookie。」 因此 CSRF 攻击变得非常困难。

SameSite

• None: 任何情况下都会向第三方网站请求发送 Cookie
• Lax: 只有导航到第三方网站的 Get 链接会发送 Cookie。而跨域的图片iframe、「fetch请求，form表单都不会发送 Cookie」
• Strict: 任何情况下都不会向第三方网站请求发送 Cookie

目前，主流浏览器 SameSite 的默认值为 Lax，而在以前是 None，这将自动预防 CSRF 攻击。

如果在跨域情况下需要发送 Cookie，则 SameSite 为 None，需要指定 Cookie 属性 Secure 在 HTTPS 下发送。

测试

分别访问以下链接，配置 Cookie

• https://http.devtool.tech/api/cookies/set/a/3
• https://http.devtool.tech/api/cookies/set/b/4?sameSite=Strict
• https://http.devtool.tech/api/cookies/set/c/5?sameSite=None&secure=true

Cookie 配置成功，如下所示：

通过在任意网站控制台发送以下请求：

// cors=true：开启 CORS
// credentials：运行传递 Cookie
await fetch('https://http.devtool.tech/api/cookies?cors=true&credentials=true', {
  credentials: 'include'
}).then(res => res.json())

发现只能携带带有 SameSite: None 的 Cookie。

作业

1. SameSite 有哪些属性
2. 什么是 CSRF 攻击，如何通过 SameSite 避免 CSRF 攻击