-
问题
使用<a>
链接打开新标签时,页面跳转到了登录页。 -
原因
检查后发现新标签的 sessionStorage 是空的
多个浏览器测试,发现应该是 chrome 的版本问题链接
原来 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>