使用 target="_blank"/window.open() 打开新窗口/选项卡时如何防止 sessionStorage 被继承？

Question

在带有 url http://foo.com/的选项卡上，我因此设置了一个 sessionStorage 项目-

sessionStorage.bar="hello";

然后我在同一域上的任何路径上打开一个新的 window -

window.open("http://foo.com/any/path");

然后在新的 window 上，我发现-

sessionStorage.bar === "hello"

是真的。 如果我使用带有 target="_blank" 属性的链接打开新的 window，则会发生完全相同的事情。 当打开一个新选项卡而不是新的 window 时，也会发生完全相同的事情。 另外需要注意的是，这仅适用于在打开新的 window 之前在 sessionStorage 上设置的项目。 打开新的 window 后，在 windows 中的 sessionStorage 上添加或更改任何项目不会以任何方式影响其他 window。

我认为 sessionStorage 应该限定为单个选项卡/窗口，但显然 sessionStorage 从另一个 window 打开时扩展到新选项卡和 windows。

有没有办法防止这种情况？ 我可能可以测试 window.opener 的存在以检测这种情况，但如果可以首先防止它会更干净。

谢谢！

Answer 1

根据Webstorage规范 ，“当在具有顶级浏览上下文的浏览上下文中创建新文档时，用户代理必须检查该顶级浏览上下文是否具有该文档源的会话存储区域。如果是，那就是文档指定的会话存储区域。“

因此，我对此的看法是，如果您关闭选项卡，然后打开一个新选项卡，它将是每个规范的新“会话”。 但是，如果选项卡保持打开状态，然后打开新选项卡，则顶级浏览上下文会匹配，因此会引用sessionStorage。

Answer 2

我通过在打开新的 window 时临时删除 session 项目解决了这个问题。

sessionStorage.removeItem('bar');
window.open('http://example.com/any/path', '_blank');
sessionStorage.setItem('bar', 'hello');

Answer 3

您可以使用这种方式：

    const a = document.createElement('a');
    a.href = "http://example.com/any/path";
    a.target = '_blank';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

Answer 4

您可以通过在每个窗口使用单独的密钥来解决继承行为（或者如果您有多个密钥，则通过为每个密钥应用一些唯一的前缀）。

这引出了如何为每个窗口分配/保留唯一键的问题。 好吧， 当Internet Explorer中的新选项卡中打开的链接显示您可以将每个窗口的名称设置为某个唯一值（在重新加载时保留） 时 ， SessionStorage不为空 。

Answer 5

您可以通过将 window.open windowFeatures 参数 'noopener' 设置为 true 来防止新选项卡或 window 继承原始窗口 sessionStorage 的副本：

window.open('http://example.com', undefined, 'noopener=true');

参数 'noreferrer' 也有效，因为如果设置，浏览器将省略 Referer header，并将 noopener 设置为 true。

window.open 的 Mozilla 文档