乐趣区

关于chrome:chroem-89-打开新标签-sessionStorage-失效

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

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

问题

应用 <a> 链接关上新标签时,页面跳转到了登录页。

起因

查看后发现新标签的 sessionStorage 是空的!因为我把 token 保留在了 sessionStorage 外面,所以当 sessionStorage 为空时间接跳转了登录页。

然而,为啥是空的??之前还好好的呀,并且,共事电脑关上我的项目是没问题的!

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

https://stackoverflow.com/questions/66473527

原来 chrome 89 版本批改了关上新标签时 sessionStorage 的解决逻辑,这其实波及到 <a> 标签的 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 链接增加一个属性:

<a href="http://xxx" target="_blank" rel="opener">Link</a>

参考

https://stackoverflow.com/questions/66473527
a 标签的 target=”__blank” 和 window.opener 能够实现歹意跳转?
Window.opener – MDN
链接类型 – MDN
当 target=”_blank” 时是否要默认增加 rel=”opener” 的探讨 – Github

退出移动版