前几天工作中遇到一个奇怪的问题,记录一下。
我的项目信息: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