使用 iframe 的跨域 localStorage (Chrome)答案

【问题标题】：Cross-domain localStorage with iframes (Chrome)使用 iframe 的跨域 localStorage (Chrome)
【发布时间】：2012-06-01 11:44:57
【问题描述】：

我正在尝试使用 iframe 将值存储在另一个域中（实际上，我正在使用位于 http://xauth.org/info/ 的 xauth 库）。但是，当我尝试使用 Chrome 存储任何内容时，它会返回“QUOTA_EXCEEDED_ERR: DOM Exception 22”，我认为这是访问错误。我在下面模拟了几个非常简单的页面来复制效果：

文件 1.html：

<html>
<head/>
<iframe src='http://127.0.0.1/2.html' />
</html>

文件2.html：

<html>
<head/>
<script>
console.log(localStorage);
localStorage.setItem('test', '123');
</script>
</html>

如果我将这两个都放在我的本地服务器上并访问 localhost/1.html 它会嵌入一个来自 127.0.0.1 的框架（Chrome 认为它是一个单独的域），并且我得到与上面相同的访问错误。猜测一下，即使我从另一个域嵌入了 iframe，并且 iframe 中的脚本正确引用了该域的 localStorage（正如我在 console.log(localStorage) 行中看到的那样），权限用于写入 localStorage 的内容来自首页的域。

简而言之，看起来没有 iframe 可以写入 Chrome 中的 localStorage。有人知道是否有办法绕过这个特定的安全“功能”吗？还是我做错了什么？

【问题讨论】：

注意我还检查了我的 localStorage 对象的 localhost 和 127.0.0.1 并保证它们是空的，所以我知道“超出配额”错误确实是错误的；我当然没有超过 5MB 的配额。
你解决了吗？我遇到了同样的问题
使用 postMessage...stackoverflow.com/questions/40461120/…
正如 Zvi Redler 所说，您是否尝试过使用 HTML5 postMessage 使用 IFRAME 在您的两个来源之间进行通信？你需要一个监听器和一个对 postMessage 的调用。请告诉我们您的发现。

标签： javascript google-chrome iframe local-storage

【解决方案1】：

这是一个旧帖子，但如果其他人看到它-您可以使用 postMessage

https://stackoverflow.com/a/40469196/4836581

【讨论】：

【解决方案2】：

只有在禁用第三方 cookie 时才会出现此问题。较新版本的 Firefox 和 Opera 也阻止了它。在 IE 和 Edge 中，尽管禁用了第三方 cookie，但它仍然是可能的。如果 localStorage 不会在 iframe 中被阻止，则网络跟踪器可以简单地包含 iframe，读取 cookie，将其发送到父脚本，然后将其发送到服务器。

在 IE 和 Edge 中没有被阻止的原因是这些浏览器允许网站发送第三方 cookie 到服务器，这些第三方 cookie 之前设置为第一方 cookie，尽管第三方 cookie 被阻止。例如，如果用户定期访问 facebook，他会从 facebook 获取第一方 cookie。当他随后使用 facebook 的分享按钮访问其他网站时，尽管第三方 cookie 被禁用，但 facebook 可以跟踪他。我真的不知道为什么 IE 和 Edge 不阻止第三方 cookie 发送，但我反正不会使用这些浏览器。

禁用第三方 cookie 时浏览器显示的错误：

Chrome 和 Opera：Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

火狐：SecurityError: The operation is insecure.

IE 和 Edge：没有错误，尽管禁用了第三方 cookie，但可以访问 iframe 中的 localStorage。

因此，总而言之，无法绕过此安全功能（在 Chrome、Firefox、Opera 中），这有助于确保用户的隐私。

【讨论】：

这仍然相关吗？ chrome 默认会这样做吗？

【解决方案3】：

好吧，localStorage 是基于域的，您的示例代码没有理由失败。它实际上所做的是将 test 项目设置为 123 为 127.0.0.1 而它将 localhost localStorage 留空。

这可能不是您最初 QUOTA_EXCEEDED_ERR 问题的答案，但只需尝试切换到 Chrome 上的隐私浏览 (Ctrl+Shift+N) 看看您是否仍有错误。如果没有关于您最初在做什么的更多信息，我不能说太多，但我相信超过配额意味着它意味着什么......

我认为 Chrome 的配额是 2.5mb，而 FF 的 localStorage 配额是 5mb。

【讨论】：

即使在隐身模式下，我也会遇到同样的错误。即使 Chrome 的配额是 2.5MB，我仍然无法接近。
另外，问题在于脚本应该将“test”项设置为值“123”，但它没有；它会引发错误。
我已经在 Chrome 上测试了你的代码，没有任何问题，你能找出你的代码发生了什么吗？