通过 iframe 访问域的 localStorage

Question

在

example.com

上，我有一个加载

anotherexample.com

的 iframe。我遇到的问题是，如果我直接加载

anotherexample.com

（在 iframe 之外），localStorage 不会与 iframed

anotherexample.com

共享。

这可以实现吗？

可以通过访问 https://eskimo.dev/localstorage/ 查看该问题的示例，然后访问 https://eskimo.ooo/localstorage/iframe（其中 iframes 第一个链接）。 iframe 没有使用之前的 localStorage。

Answer 1

我猜这个问题可能是由于过去几年和几个月在各种浏览器中引入的“分区存储”造成的。对我来说，类似的东西一年前在 Firefox 中可以工作，但现在不再工作了。

为了提高隐私性，浏览器现在将不同域中包含的 iframe 的存储分开，即使该框架具有相同的域也是如此。

有一个 API（“存储访问 API”）可以询问用户是否同意未分区的存储：https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API 我自己还没有尝试过，但从 MDN 上的信息来看，Chrome 中当前的实现或多或少是一个笑话，而且几乎没有用，因为它需要你向 GitHub 存储库提出拉取请求（https:// /github.com/GoogleChrome/lated-website-sets/）。不过，Firefox 和 Safari 似乎没问题，至少对于 cookie 来说是这样。

Answer 2

实际上我尝试过，它对我有用（我首先访问

/iframe

，但它对我来说两种方式都有效）：

当然，当我禁用所有第三方cookie时，它不起作用。可能是这个原因？

顺便说一句，我正在使用 chrome 107.0。

Answer 3

不知道为什么它的行为不正常。也许代码片段在这里可能真的很有帮助。但是通过上面OP中链接的例子。它在那里不起作用的原因是：

1. 有 2 个域：eskimo.dev 和 eskimo.ooo（这两个域是不同的）。当第一个域 eskimo.dev 打开时，本地存储将在浏览器中参考 eskimo.dev 设置，并且可以访问来源为“eskimo.dev”的页面。
2. 但是当打开 eskimo.ooo 时（iframe src 设置为 eskimo.dev 的域），本地存储将不会被共享，因为原始域是 eskimo.ooo，因此无法访问 eskimo.dev 的 localStorage 数据。

什么会起作用？ :

1. 如果您有 eskimo.dev/localStorage （其中 localStorage 在浏览器中设置）并且
2. 现在如果你打开eskimo.dev/localStorage/iframe（其中iframe src指向eskimo.dev/localStorage，该页面将可以访问localStorage数据。），为什么？

因为域来源没有改变，因此它可以访问相同的localStorage。

谢谢

Answer 4

它是一个完整的其他域，因此无法访问其他域的localStorage。

但是，如果您控制了两个域，则可以使用 javascript 事件通过域共享 localStorage。

您可以在这里查看更多内容：跨域本地存储与javascript