使用a标签打开新窗口sessionStorage不能携带的问题

3,862 阅读1分钟

应用场景

打开新的浏览器窗口需要携带其父窗口的sessionStorage

sessionStorage共享首先一点是要求在同源策略下

sessionStorage有效期为关闭浏览器窗口即为清除

每一个窗口都有自己独立的sessionStorage作用域(这一点和localStorage是不同的,在同源策略下localStorage则为共享的)

打开新的浏览器窗口一般有2种方式:

  1. window.open(URL, name, specs, replace)
  2. <a href="//URL" target="_blank"></a>

window.open

通过window方法可以开打新的浏览器窗口,默认打开方式为_blank,可以直接实现我们的应用场景。并建立其父窗口的引用。

在子窗口获取父窗口可通过window.opener获取引用。

但其缺点为某些浏览器为了用户安全和用户体验,会进行拦截。(在浏览器设置可以关闭或允许)

target="_blank"

使用a标签跳转时发现sessionStorage并未携带。这时检查window.opener发现返回值为null。

在2020年底之前是一直可以拿到session的,且无任何异常表现,但是这种情景很容易引起安全漏洞,网上许多web开发人员对此进行了很多的讨论:

news.ycombinator.com/item?id=115…

www.reddit.com/r/programmi…

对于2021年,更改规格后,使用_blank,默认会指定rel="noopener",这也是为什么会session未携带的原因。

最终通过修改rel="opener",即可获取到session。

参考链接:

developer.mozilla.org/zh-CN/docs/…

bugzilla.mozilla.org/show_bug.cg…

trac.webkit.org/changeset/2…

github.com/whatwg/html…

mathiasbynens.github.io/rel-noopene…