chrome浏览器 同站(SameSite)策略 导致 iframe 内嵌页面cookie无法写入

 前两个tab页是项目本身的，第三个是iframe嵌套的以前的一个项目（独立的功能）；

做好后，第三个tab一直没怎么用。最近突然有用户要用，但是部分人的界面白屏。

排查发现是接口请求失败导致的JS报错，失败原因是登录后cookie存储失败。

原因：
Chrome 80版本开始，浏览器的 Cookie 新增加了一个SameSite属性，用来防止 CSRF 攻击和用户追踪。并将未声明 SameSite 值的 Cookie 默认设置为SameSite=Lax Cookie。

HTTP

一般我们都会说 “HTTP 是一个无状态的协议”，不过要注意这里的 HTTP 其实是指 HTTP 1.x，而所谓无状态协议，简单的理解就是即使同一个客户端连续两次发送请求给服务器，服务器也识别不出这是同一个客户端发送的请求，这导致的问题就比如你加了一个商品到购物车中，但因为识别不出是同一个客户端，你刷新下页面就没有了……

Cookie

为了解决 HTTP 无状态导致的问题，后来出现了 Cookie。不过这样说可能会让你产生一些误解，首先无状态并不是不好，有优点，但也会导致一些问题。而 Cookie 的存在也不是为了解决通讯协议无状态的问题，只是为了解决客户端与服务端会话状态的问题，这个状态是指后端服务的状态而非通讯协议的状态。

SameSite 可以有下面三种值：

1. Strict 仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
2. Lax 允许部分第三方请求携带 Cookie
3. None 无论是否跨站都会发送 Cookie

之前默认是 None 的，Chrome80 后默认是 Lax。

跨域和跨站

首先要理解的一点就是跨站和跨域是不同的。同站(same-site)/跨站(cross-site)」和第一方(first-party)/第三方(third-party)是等价的。但是与浏览器同源策略（SOP）中的「同源(same-origin)/跨域(cross-origin)」是完全不同的概念。

同源策略的同源是指两个 URL 的协议/主机名/端口一致。例如，https://www.taobao.com/pages/...，它的协议是 https，主机名是 www.taobao.com，端口是 443。

同源策略作为浏览器的安全基石，其「同源」判断是比较严格的，相对而言，Cookie中的「同站」判断就比较宽松：只要两个 URL 的 eTLD+1 相同即可，不需要考虑协议和端口。其中，eTLD 表示有效顶级域名，注册于 Mozilla 维护的公共后缀列表（Public Suffix List）中，例如，.com、.http://co.uk、.http://github.io 等。eTLD+1 则表示，有效顶级域名+二级域名，例如 taobao.com 等。

举几个例子，www.taobao.com 和 www.baidu.com 是跨站，www.a.taobao.com 和 www.b.taobao.com 是同站，a.github.io 和 b.github.io 是跨站(注意是跨站)。

解决办法：

1.内嵌页面最好采用同站(SameSite)策略。

2.接口请求参数直接带上token请求。
3.设置sameSite: ‘none’，( 需https协议，且不同浏览器版本有兼容性问题，需要 UA 检测）

google设置解决方法：

前往 chrome://flags，通过禁用“SameSite by default cookies”功能开关，修改后点击Relaunch重新启动即可。如下图所示：