问题现象:
最近升级了新版chrome浏览器后,发现系统正常iframe嵌套其他域名网站页面突然无法显示了,页面空白,但是请求未报错。
原因还原:
1、将嵌套页面的url单独窗口访问,一切正常(页面显示正常,页面请求正常获取cookie信息),排除iframe页面问题。
2、进一步尝试,将这个带有链接的iframe放在一个全新的html文件中也不能正常访问,排除当前系统的iframe加载问题。
3、刚刚新建的html文件在火狐浏览器中打开可以正常访问。
4、新版chrome浏览器访问,iframe页面显示空白。(测试机chrome浏览器版本 88.0.4324.150(正式版本) (64 位))
初步结论:新版chrome浏览器做了限制,iframe页面无法第三方cookie,嵌套此页面的网站无法共享cookie给iframe页面导致。
深入分析:
使用其它浏览器(firefox, ie),iframe页面请求的session却是一致的。但是在chrome请求头始终携带新的sessionId,无法获取cookie,每次都会重新分配 一 个 session。
查找资料后发现Google 在2020年2月4号发布的 Chrome 80 版本中默认屏蔽所有第三方 Cookie,即默认为所有 Cookie 加上 SameSite=Lax 属性,并且拒绝非Secure的Cookie设为 SameSite=None
SameSite的作用就是防止跨域传送cookie,从而防止 CSRF 攻击和用户追踪,此举是为了从源头屏蔽 CSRF 漏洞。
解决方案:
针对网上给出的方案:
1.(不推荐)禁用浏览器samsite属性/或降低版本(目前仅chorme存在)
2.(不推荐)保证同源策略cookie共享(保证ip或域名一直)
3.(推荐)设置response.setHeader(“Set-Cookie”, “HttpOnly;Secure;SameSite=None”),需设置https证书
4.(推荐)不使用cookie共享会话,使用token实现
如果以上方案不方便改进,可参考下面方式解决:
1、上面的问题现象是出现在iframe嵌套页面里面才会出现无法获取cookie问题,但是另外窗口打开url页面是正常显示,正常请求。
2、为此我们可以弃用iframe方式,使用windows.open()小窗口弹窗打开嵌套页面,模拟iframe效果。(window.open参数里面屏蔽浏览器的状态栏、地址栏那些)
实现代码:
function openBlank (url) { //转向网页的地址;
var name = '' //网页名称,可为空;
var iWidth= 1200 //弹出窗口的宽度;
var iHeight= window.screen.height * 0.7 //弹出窗口的高度;
//window.screen.height获得屏幕的高,window.screen.width获得屏幕的宽
var iTop = (window.screen.height-30-iHeight)/2 //获得窗口的垂直位置;
var iLeft = (window.screen.width-10-iWidth)/2 //获得窗口的水平位置;
window.open(
url,
name,
`height=${iHeight},innerHeight=${iHeight},width=${iWidth},innerWidth=${iWidth},top=${iTop},left=${iLeft},toolbar=no,menubar=no,scrollbars=auto,resizeable=no,location=no,status=no`
)
}
3、实测效果(谷歌浏览器上地址栏url暂不支持隐藏,其他浏览器可正常隐藏地址栏url)