Chrome 80 中 Iframe 跨域 Cookie 的 Samesite 问题

妖狐艹你老母 2023-01-09 06:12 271阅读 0赞

新项目要嵌入之前的一个项目，而且该被嵌入项目之前提供给第三方使用，他们也是用的iframe。以前都是好的，但是现在发现要是iframe的地址和父级的地址不同源，项目登录时无法设置cookie。

一开始以为后端出问题了，后来换火狐、ie edge 都是可以的，并且其他人的Chrome也有可以用的。

并且接口设置cookie时提示：“this set-cookie didnot specify a "sameSite" attribute and was defaulted to "sameSite=Lax" and broke the same rules specified in the SameSiteLax value”。

从`Chrome 51`开始，浏览器的`Cookie`新增加了一个[SameSite][]属性，用来防止`CSRF`攻击和用户追踪。  
该设置当前默认是关闭的，但在`Chrome 80`之后，该功能默认已开启。

所以当你无法使用某些网站第三方登录功能的时候，请查看一下是否受到了该设置的影响。

*   *  对于使用者，快速解决方案：
        
        方案1. 打开`Chrome`设置，将`chrome://flags/#same-site-by-default-cookies`禁用，然后重启浏览器。  
        ![avatar][]  
        方案2. 使用低版本浏览器，可选择70版。
     *  对于开发者，解决方案：
        
        方案1. 将`SameSite`属性值改为`None`, 同时 将`secure`属性设置为  
        `true`。且需要将后端服务域名必须使用`https`协议访问。  
        方案2. 由于设置`SameSite = None`，有`SCRF`风险，所以，最佳方案是用`token`代替`Cookie`方式作验证。

## 一、CSRF 攻击是什么？ ##

Cookie 往往用来存储用户的身份信息，恶意网站可以设法伪造带有正确 Cookie 的 HTTP 请求，这就是 CSRF 攻击。

举例来说，用户登陆了银行网站`your-bank.com`，银行服务器发来了一个 Cookie。

用户后来又访问了恶意网站`malicious.com`，上面有一个表单。

用户一旦被诱骗发送这个表单，银行网站就会收到带有正确 Cookie 的请求。为了防止这种攻击，表单一般都带有一个随机 token，告诉服务器这是真实请求。

这种第三方网站引导发出的 Cookie，就称为第三方 Cookie。它除了用于 CSRF 攻击，还可以用于用户追踪。

比如，Facebook 在第三方网站插入一张看不见的图片。

浏览器加载上面代码时，就会向 Facebook 发出带有 Cookie 的请求，从而 Facebook 就会知道你是谁，访问了什么网站。

## 二、SameSite 属性 ##

Cookie 的`SameSite`属性用来限制第三方 Cookie，从而减少安全风险。

它可以设置三个值。

>  *  Strict
>  *  Lax
>  *  None

### 2.1 Strict ###

`Strict`最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。

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

这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。

### 2.2 Lax ###

`Lax`规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。

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

导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。

<table> 
 <thead> 
  <tr> 
   <th>请求类型</th> 
   <th>示例</th> 
   <th>正常情况</th> 
   <th>Lax</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>链接</td> 
   <td><code>&lt;a href="..."&gt;&lt;/a&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>发送 Cookie</td> 
  </tr> 
  <tr> 
   <td>预加载</td> 
   <td><code>&lt;link rel="prerender" href="..."/&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>发送 Cookie</td> 
  </tr> 
  <tr> 
   <td>GET 表单</td> 
   <td><code>&lt;form method="GET" action="..."&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>发送 Cookie</td> 
  </tr> 
  <tr> 
   <td>POST 表单</td> 
   <td><code>&lt;form method="POST" action="..."&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>不发送</td> 
  </tr> 
  <tr> 
   <td>iframe</td> 
   <td><code>&lt;iframe src="..."&gt;&lt;/iframe&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>不发送</td> 
  </tr> 
  <tr> 
   <td>AJAX</td> 
   <td><code>$.get("...")</code></td> 
   <td>发送 Cookie</td> 
   <td>不发送</td> 
  </tr> 
  <tr> 
   <td>Image</td> 
   <td><code>&lt;img src="..."&gt;</code></td> 
   <td>发送 Cookie</td> 
   <td>不发送</td> 
  </tr> 
 </tbody> 
</table>

### 2.3 None ###

Chrome 计划将`Lax`变为默认设置。这时，网站可以选择显式关闭`SameSite`属性，将其设为`None`。不过，前提是必须同时设置`Secure`属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

参考链接：[http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html][SameSite]

[SameSite]: http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html
[avatar]: /images/20221119/5398aaf32ecb4bd487e0018f7797a7a7.png