chroem 89 + 打开新标签 sessionStorage 失效

Posted 2021-09-24 半块苹果

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

项目信息：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