关于前端:本地联调单点登录iframe跨域cookie丢失

2次阅读

共计 1598 个字符，预计需要花费 4 分钟才能阅读完成。

需要：A 站点内用 iframe 嵌入 B 站点，需实现单点登录。

问题：我在本地调试时，因为本地开发环境 A、B 不同域，便手动给本地（嵌入的 B 站点）增加 cookie，A 站点内的 B 站点能失常主动带上cookie 申请后盾接口。
然而，同样代码，在小伙伴那遇到问题，发现 iframe 嵌入的 B 站点申请接口时未带上cookie。

因为我 chrome 版本比拟低，总会遇到一些兼容问题，大概率是浏览器版本的区别（相似这种跨域遇到的问题，个别是因为浏览器的安全策略）。
搜 iframe cookie（失落） 就进去很多相干解释。

浏览器的 Cookie 新增了 SameSite 属性（用来避免 CSRF 攻打 和用户追踪 – 举荐浏览【2】有相干介绍）。
chrome 80+ 将未声明SameSite 值的 Cookie 默认设置为 SameSite=Lax Cookie（大多数状况 不发送第三方Cookie）。

参考上面举荐阅读文章，简略列一下几种解决方案：

通过设置 chrome 浏览器相干策略开关，如

低于 91 版本的 chrome，disabled 这 2 个 flag：
- same-site-by-default-cookies
- cookies-without-same-site-must-be-secure
91 及以上，且 94 以下版本，设置浏览器 features（可参考举荐浏览【3】）
- --disable-features=SameSiteByDefaultCookies
94 及以上版本，上述设置都不反对了，即浏览器全面禁止三方cookie。

PS：客户端解决方案只实用于本地联调，只作用于本地浏览器；而且高版本浏览器当初都不反对了。

因而，针对结尾提到的场景，前面 B 站点可能要采取 localStorage 共享 cookie 数据，而后在申请头加 _cookie 参数申请 B 站点服务器接口，有服务器再作一层校验。

https协定 + SameSite=None

举荐浏览【1】也提到浏览器将全面禁止 第三方 cookie，因而，前端跨域 cookie 的问题，得换个角度去解决，比方在客户端跨域申请转换成非跨域申请，想方法获取 cookie 后存起来用其余形式传输 cookie 值（如【1】的第四个“代理服务”计划）

思路：先解决跨域，再解决 cookie 传输问题。

PS：每个利用场景不同，这里只是集体尝试 解读【1】第 4 个代理服务计划的场景

场景：C 网站（假如域名 C.com) 申请 D 后盾服务的登陆校验接口(假如域名D.com)，登陆后需记录其登陆信息 cookie，而后获取用户信息。
流程设计：

增加一层 C ’ 站点（与 C 同域），作为代理服务器，把登陆申请先发给 C ’（基于 iframe+postMessage 跨域）；
两头代理服务器 C ’，再向指标服务器 D 发动真正的后盾申请进行登陆校验，把 response 返回的 cookie 同步返回给 C ’ 网站；
须要获取以后登陆的用户信息时，把 cookie 放在申请头的_cookie 参数里申请 C ’ 的 fetchUser 接口，C’ 服务器把_cookie 再塞进 header 的 cookie 里申请 D 实在的 fetchUser 接口；

在这，我有以下纳闷🤔：

第 1 步，为什么用 iframe 的形式去跨域申请 C ’ 的接口，为什么不间接 C 跨域申请 C ’ 代理服务的接口（即网站我的项目 http://127.0.0.1:8000 像第 3 步 - 查问数据一样，间接申请 8001 的/login是不是也行）？
如果 C 站点自身有本人的后盾服务，间接作为代理服务器，就不必再思考 C 网站跨域申请的 cookie 问题了？如果 C 站点可控的话，这种形式更不便？

欢送大家戳戳留下足迹，欢送留言交换哦～