Chrome 91+ 版本Iframe嵌入其他站点页面报错

Chrome的SameSite策略

Chrome浏览器于51版本引入SameSite属性，默认值为None,用于管控跨站页面的Cookie携带问题

主要用于防止进行用户追踪和CSRF攻击,具体内容可以查看下边大神的文章

Cookie 的SameSite属性 --阮一峰的网络日志

Chrome 86版本发布时（2020年10月）开始滚动更新 SameSite的默认值为 Lax（追溯到80+版本），当时一批使用Iframe嵌入其他站点页面的系统出现异常，可以通过调整Chrome配置解决这个问题：

1. Chrome地址栏输入:chrome://flags
2. 搜索:SameSite
3. 修改SameSite by default cookies配置为:Disabled
4. 点击Relaunch重新启动

Chrome 91版本发布后取消了 SameSite by default cookies 的设置项，并设置SameSite的默认值为 Lax，修改浏览器配置的解决方案失效（安全是相对的，Google很霸道啊）

SameSite和SameOrigin

SameOrigin(同源)策略：只有相同来源的页面可以互相操作Cookie；这个比较好理解，就是A.com站点的 M.html页面使用iFrame嵌入了 A.com站点的 N.html页面，那么他们能够互相操作Cookie。如果A.com站点的 M.html页面使用iFrame嵌入了 B.com站点的 N.html页面，那么他们的Cookie是没办法互相操作的；

SameSite(同站)策略：只有相同站点的页面可以在嵌入时携带Cookie；这个可能不太好理解了。

首先就是同站：同站指的是两个 URL 的 TLD+1 相同，不考虑协议和端口。即 http://a.younger.com和https://b.younger.com是符合SameSite的。详细规则可以参阅:

chrome浏览器 同站(SameSite)策略 

再来理解一下 携带Cookie ：是指 跨站的iFrame页面 无法操作自己的Cookie，因为iFrame嵌入的跨站界面无法携带Cookie，就无法存入Cookie，可以理解为iFrame内部的页面在一个不支持Cookie的浏览器中打开了，所以使用Cookie的页面会出现报错，出现Cookie无法存取的情况

如何解决跨站Cookie存取异常

1.修改浏览器配置

Chrome 91版本之前的Chrome浏览器我们通过修改浏览器设置来解决这个问题（上边有解决步骤），这种方案是让用户告知浏览器，我的使用环境很安全，你不要替我想那么多。但Chrome 91+已经无法设置浏览器解决这个问题了（Chrome：我就是觉得你不安全，你也不懂安全，别乱配置了，让我来保护你[霸道脸]）

针对Chrome 91+ 还有个修改浏览器配置的方案仍然是可行的：为Chrome创建一个快捷方式(也可在原快捷方式上修改)，右键快捷方式->属性，在目标后拼接一段配置，示例："C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure --flag-switches-end 注意，路径和配置间有一个空格。后续就由这个快捷方式启动浏览器。

当然这种方案很low，让用户修改浏览器配置信息。但是由于方案简单，变成了一些站点的开发者偷懒的一种方案，这个方案我不推荐，降低了用户浏览器安全配置。  经过测试该方案已失效 2023/05/12  版本:113.0.5672.93

2.嵌入的站点修改为https站点

如果嵌入的页面站点为https的话，可以在存入Cookie时显式声明SameSite=None;

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

注意，设置 SameSite=None;时后边必须跟上一个 Secure 标示该Cookie是安全的

只有在站点是https时以上方案有效

这个方案也要注意一个问题，就是你的站点证书必须在用户客户端是受信的，不然页面加载不出来不说，警告都弹不出来，这个方案我也不推荐

3.遵守SameSite规则

在规则中说了，只要两个页面是同站，就不会有问题。而SameSite的判断又比较宽松。

假如A站点和B站点都是咱们控制的，那咱们只需要申请几个子域名（eTLD+1相同）,比如 http://a.younger.com，http://b.younger.com，http://a.younger.com:8066 等等,只要 后边 younger.com是一样的就行，分别给站点挂上域名，问题就解决了

假如父页面是咱们的站点，子页面不是咱们的站点，我们要确认是否有充足的理由必须使用嵌入页面的方式给用户使用非父页面的功能，如无必要，建议以新窗口的方式打开子页面。如果真的需要，再说吧。Chrome希望用户很清楚自己实际访问在哪个站点上。