使用iframe实现跨域localStorage（Chrome）

Question

使用iframe实现跨域localStorage（Chrome）

javascriptgoogle-chromeiframelocal-storage

6

我将尝试使用iframe（实际上，我正在使用xauth库，网址为http://xauth.org/info/）在另一个域上存储值。然而，当我尝试使用Chrome存储任何内容时，它会返回“QUOTA_EXCEEDED_ERR：DOM异常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。有人知道是否有办法绕过这个特定的安全“功能”吗？还是我做错了什么？

- Chris

请注意，我已经检查了本地主机和127.0.0.1的localStorage对象，并确保它们为空，因此我知道“超出配额”错误确实是错误的；我肯定没有超过5MB的配额。 - Chris

你解决了吗？我也遇到了同样的问题。 - Lloyd

使用postMessage... https://dev59.com/yZzha4cB1Zd3GeqPCkZk - Zvi Redler

正如Zvi Redler所说，您是否尝试使用HTML5 postMessage在IFRAME之间进行通信？您需要一个监听器和一个postMessage调用。请告诉我们您的发现。 - StephenKC

3个回答

2

最初的回答：这是一篇旧文章，但是如果有其他人看到它-你可以使用postMessage。

参考翻译：虽然这篇文章比较老了，但是如果有其他人看到的话，你可以使用postMessage方法。具体细节可以参考这个链接。

- Zvi Redler

1

嗯，localStorage 是基于域名的，所以你的示例代码没有失败的理由。它实际上是将 test 项目设置为 123，对于 127.0.0.1 而言，而会使本地主机的 localStorage 为空。

这可能不是解决 QUOTA_EXCEEDED_ERR 的问题的答案，但只需尝试在 Chrome 上切换到隐私浏览（Ctrl+Shift+N），看看是否仍然出现错误。我无法告诉你更多关于你最初在做什么的信息，但我相信超过配额意味着它的字面意思...

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

- mmg666

即使在隐身模式下，我仍然遇到了相同的错误。即使Chrome的配额为2.5MB，我仍然远未达到该配额。 - Chris

此外，问题在于尽管脚本应该将“test”项设置为值“123”，但它没有这样做；相反，它会抛出错误。 - Chris

我已经在Chrome上测试了你的代码，没有发现任何问题，你能找出你的代码出了什么问题吗？ - mmg666

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- maxeh · Accepted Answer

只有在禁用第三方Cookie时才会出现问题。新版本的Firefox和Opera也在阻止它。在IE和Edge中，即使禁用了第三方Cookie，仍然可以使用。如果在iframe中不阻止localStorage，则网络跟踪器可以简单地包括一个iframe，读取Cookie，将其发送到父脚本，然后将其发送到服务器。

IE和Edge之所以不阻止此功能，是因为这些浏览器允许网站将先前设置为第一方Cookie的第三方Cookie发送到服务器，尽管已经禁用了第三方Cookie。例如，如果用户经常访问Facebook，则会从Facebook获得第一方Cookie。当他访问其他带有Facebook共享按钮的网站时，Facebook可以追踪他，尽管禁用了第三方Cookie。我真的不知道为什么IE和Edge不阻止发送第三方Cookie，但我也不会使用这些浏览器。

当禁用第三方Cookie时，浏览器显示的错误：

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

Firefox：SecurityError: The operation is insecure.

IE和Edge：没有错误，可以访问iframe中的localStorage，即使禁用了第三方Cookie。

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