chroem 89 + 打开新标签 sessionStorage 失效

前几天工作中遇到一个奇怪的问题,记录一下。

项目信息:Vue + Element UI 做的后台管理系统。

问题

使用 链接打开新标签时,页面跳转到了登录页。

原因

检查后发现新标签的 sessionStorage 是空的!由于我把 token 保存在了 sessionStorage 里面,所以当 sessionStorage 为空时直接跳转了登录页。

但是,为啥是空的??之前还好好的呀,并且,同事电脑打开项目是没问题的!

兜兜转转一下午,把问题锁定在了 chrome 的版本上,然后就搜索到了下面这一问题:

https://stackoverflow.com/questions/66473527

原来 chrome 89 版本修改了打开新标签时 sessionStorage 的处理逻辑,这其实涉及到 标签的 rel 属性,我们举例来说明一下修改前后的区别:

比方说我们从 A 标签通过 a 链接打开了一个新的 B 标签,

之前浏览器的处理逻辑:当 a 标签的 target="_blank" 时,浏览器默认会添加 rel="opener" 属性,这时 B 标签的上下文(包含 sessionStorage)是从 A 标签复制而来的,并且可以通过 window.opener来访问 A 标签的 window 对象。没错,当 B 标签不是我们自己的网站时,这时一个极其危险的行为!

现在浏览器的处理逻辑:当 a 标签的 target="_blank" 时,浏览器默认会添加 rel="noopener" 属性,这时 B 标签的上下文是一个全新的,空白的上下文,并且 B 标签不可以通过 window.opener 来访问 A 标签的 window 对象。很安全!

至此,我们捋清楚了这个问题的前因后果。

解决方案

手动的为 a 链接添加一个属性:

Link

参考

https://stackoverflow.com/questions/66473527
a 标签的 target="__blank" 和 window.opener 可以实现恶意跳转?
Window.opener - MDN
链接类型 - MDN
当 target="_blank" 时是否要默认添加 rel="opener" 的讨论 - Github

你可能感兴趣的:(chroem 89 + 打开新标签 sessionStorage 失效)