解决方案原文
这个我试了下是谷歌浏览器做了限制,在edge上可以正常登录
我遇到这种情况主要是我的项目用的是cookie存储的登录状态。需要设置cookie的域名,使其在嵌入的网站和网站域名下都能访问cookie,但是我设置了还是没用。
我最终的解决方式
是将cookie存储状态改成了localStorage存储方式。
问题描述
以iframe标签嵌入一个现有的项目到网站中,嵌入的项目无法正常登录,直接在浏览器地址栏输入url并登录是正常的。
问题分析
由于后续接口提示401,判断是登录接口鉴权失败导致的,原因是没有显式设置cookie的samesite属性,导致被默认为Lax,又因为响应的接口属于非顶层导航的跨站请求,浏览器将其屏蔽了!
SameSite属性
该属性一般是随着Set-Cookie响应头设置的,语法为response.setHeader(“Set-Cookie”,“CookieName=CookieValue;SameSite=propValue”),表示该cookie是否可以携带
在跨站请求中,可以取三个值:
- Strict,表示完全禁止第三方 Cookie,跨站点时,任何情况下都不会发送 Cookie。
- Lax,大多数情况下不发送第三方 Cookie,但是导航到目标网址的 Get 等请求除外
- None,表示关闭跨站限制,但是需要显式设置Secure属性并配置https
如果不设置,浏览器会默认为Lax
。正如上文所提到的。
解决方案
- 保证两者的网址一样(域名,测试发现同一主域名下不同的子域名也是可以的)。
- 主动设置SameSite为Set-Cookie:Key=Value;SameSite=None;Secure,确保协议为安全协议https
- 禁用浏览器对SameSite的默认配置(只会对未设置的SameSite属性有效)