1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > chrome80默认SameSite导致iframe无法获取cookie问题解决方法

chrome80默认SameSite导致iframe无法获取cookie问题解决方法

时间:2021-10-09 03:40:06

相关推荐

chrome80默认SameSite导致iframe无法获取cookie问题解决方法

项目背景及问题定位

项目背景

A网站(假设为)作为iframe内嵌在B网站(假设为)。在B网站中加载A网站的时候,自动登录失效,导致接口一直重调。

问题定位

初步分析,A网站为第三方页面,将A网站直接在外部打开可以单独访问,排除A网站的问题更换浏览器,在火狐和Edge中,A网站可正常在iframe中加载。初步定位为浏览器兼容问题对比不能正常加载和正常加载的chrome浏览器版本,都更新到最新的89版本。发现状态没变,能加载的还是能,不行的依然加载不了。(因为这个现象,导致对是否是浏览器版本兼容问题产生了怀疑)打开浏览器控制台,发现接口请求报错,控制台出现以下提示

错误与SameSite属性有关系,因此去查了一下SameSite相关的问题。SameSite相关属性可参考阮一峰的《Cookie 的 SameSite 属性》

问题出现的原因

Google将在2月4号发布的 Chrome 80 版本(schedule:/features/schedule)中默认屏蔽所有第三方 Cookie,即默认为所有 Cookie 加上SameSite=Lax属性(/feature/5088147346030592), 并且拒绝非Secure的Cookie设为SameSite=None(/feature/5633521622188032) 此举是为了从源头屏蔽 CSRF 漏洞

以下场景会在Chrome80中受到影响:

组件数据基于第三方登陆态的 API 请求http 本地部署

解决方案

当前项目环境:A网站与B网站主域名保持一致,A网站域名为https。下面方法未奏效可以先考虑一下环境问题

/6/9日更新:以下解决方案仅对80版本生效。90版本更新后,方案1已失效,无法手动设置SameSite的值。文末方案初步怀疑也失效了。最好的解决方案还是升级成https协议同时保持二者域名一致

注意事项

SameSite=None需要只对chrome80以上版本进行设置,原因在于chrome51-chrome66以及其他某些浏览器不接受SameSite=None如果网站存在http与https同时使用的情况,需要对此做兼容,只有https的时候才设置Secure;SameSite=None。原因在于当Secure设置为true时,表示创建的 Cookie 会被以安全的形式向服务器传输,也就是只能在 HTTPS 连接中被浏览器传递到服务器端进行会话验证。根据谷歌文档Reject insecure SameSite=None cookies中所述,85版本后默认启用“拒绝非安全的samesite=none的cookie”这一特性,要同时显式声明secure=true,这个cookie才能跨域携带。

解决方案

Chrome中打开标签页,分别输入以下两个链接,将图示配置设为Disabled。(亲测有效,可以当做应急方案,更新配置后得重启浏览器,才能生效)

chrome://flags/#same-site-by-default-cookieschrome://flags/#cookies-without-same-site-must-be-secure

使用火狐或Edge浏览器(有效)或者将chrome降级到79及以下版本,并关闭自动更新(未试验,个人不推荐,方案用户体验太差) 将两个系统部署到同一台服务器,通过相同IP同源策略传送cookie。(未试验) 购买SSL证书,升级HTTP服务,将API切换成HTTPS协议请求,并且检查响应头中的Set-Cookie中是否包含了SameSite=None和Secure属性(85以后版本需显式设置Secure=true)

总结

虽然问题解决了,的确是浏览器版本问题,但是为什么有些电脑能正常加载有些不行,这个还是不清楚原因本次问题使用的方案四解决了,但是在浏览博文的时候,还是踩了很多坑后才找到了最终的解决方法。

简单介绍一下方案4实际解决问题的方案: 如果前端所需cookie是后端直接通过Set-cookie的方式来存在浏览器中的,那么则需要后端在response响应头上设置属性。每个所需要的cookie都得设置一遍。没设置的就会出现图示的黄色标识(提醒你无法成功设置cookie),这种cookie是读取不了的

response.setHeader(name: "Set-Cookie", value: "_u=xxxx; Path=/Login; SameSite=None; Secure=true")

也可以在Nginx中设置,自动给cookie增加这两个属性(给所有cookie都设置这个不是特别安全,不推荐用这个,只给特定的需要的cookie按上面的方案设置一下就行了)

# 只支持 proxy 模式下设置proxy_cookie_path / "/; httponly; Secure=true; SameSite=None";

第一个方法只适用于后端设置的cookie,本次遇见的问题中,cookie是前端将后端返回的数据拿到后再存在浏览器中的,导致按照第一种方法一直解决不了问题。如果是前端将cookie存入浏览器中的话,那只需要写入如下代码,即可设置相应cookie的属性,从而解决问题了

Cookies.set("Admin-Token", res.token);document.cookie = "Admin-Token=" + res.token + ";SameSite=None; Secure=true";

参考文章

阮一峰:《Cookie 的 SameSite 属性》

关于 Chrome (谷歌浏览器)升级到 80 后可能产生的影响以及解决方案

浏览器的SameSite策略

chrome浏览器跨域Cookie的SameSite问题导致访问iframe内嵌页面异常

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。