解决iframe标签嵌入一个现有的网站无法登录的问题

以iframe标签嵌入一个现有的网站到项目中，嵌入的网站无法正常登录，直接在浏览器地址栏输入url并登录是正常的。于是开始探索…

问题分析
由于后续接口提示401，判断是登录接口鉴权失败导致的，于是观察登录接口的请求响应，发现了端倪：

翻译为大白话就是：写入Cookie失败。原因是没有显式设置cookie的samesite属性，导致被默认为Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了！

这个提示包含了两个信息：

设置cookie时有个连带的SameSite属性
top-level-navigation(顶层导航)
接下来细说！

SameSite属性
该属性一般是随着Set-Cookie响应头设置的，语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;SameSite=propValue”)，表示该cookie是否可以携带在跨站请求中，可以取三个值：

Strict，表示完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。
Lax，大多数情况下不发送第三方 Cookie，但是导航到目标网址的 Get 等请求除外
None，表示关闭跨站限制，但是需要显式设置Secure属性并配置https
如果不设置，浏览器会默认为Lax。正如上文所提到的。

顶层导航（top-level navigation)
什么是顶层导航？

使用浏览器地址栏输入www.baidu.com，打开百度首页，打开控制台可以看到当前页面除了百度的应用之外还有三个应用（Google翻译、Grammarly，UserTesting），其他三个是我安装的插件。

对浏览器而言，百度是top-level-navigation，其他三个则不是，因为地址栏里输入的是百度的网址。

解决问题
汇总一下就是：

登录接口是一个来自非顶层导航的接口（iframe嵌套），该接口默认的SameSite属性值Lax要求iframe里应用的网址与顶层导航应用的网址保持一致。

方案有三个：

保证两者的网址一样（域名，测试发现同一主域名下不同的子域名也是可以的）。
主动设置SameSite为Set-Cookie:Key=Value;SameSite=None;Secure,确保协议为安全协议https
禁用浏览器对SameSite的默认配置（只会对未设置的SameSite属性有效），方式如下：

第一种最为简单直接。

第二种需要修改服务端代码。

第三种在用户层面非常不现实。

果断采用了第一种方案。

原文链接：https://blog.csdn.net/qq_40882724/article/details/115605160