使用 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 文檔