javascript 使用 iframe 的跨域 localStorage (Chrome)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10762096/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross-domain localStorage with iframes (Chrome)
提问by Chris
I'm trying to store a value on another domain using an iframe (actually, I'm using the xauth library at http://xauth.org/info/). However, when I try to store anything using Chrome, it comes back with "QUOTA_EXCEEDED_ERR: DOM Exception 22", which I've come to recognize as an access error. I've mocked up a couple of very simple pages below to duplicate the effect:
我正在尝试使用 iframe 在另一个域上存储一个值（实际上，我正在使用http://xauth.org/info/ 上的 xauth 库）。但是，当我尝试使用 Chrome 存储任何内容时，它会返回“QUOTA_EXCEEDED_ERR: DOM Exception 22”，我认为这是访问错误。我在下面模拟了几个非常简单的页面来复制效果：
File 1.html:
文件 1.html：
<html>
<head/>
<iframe src='http://127.0.0.1/2.html' />
</html>
File 2.html:
文件 2.html：
<html>
<head/>
<script>
console.log(localStorage);
localStorage.setItem('test', '123');
</script>
</html>
If I place both of these on my local server and access localhost/1.html it embeds a frame from 127.0.0.1 (which Chrome considers a separate domain), and I get the same access error as above. At a guess, it looks like even though I'm embedding an iframe from another domain, and the script inside that iframe references the localStorage for that domain properly (as I can see with the console.log(localStorage) line), the permissions for writing to localStorage are coming from the top page's domain.
如果我将这两个都放在我的本地服务器上并访问 localhost/1.html，它会嵌入一个来自 127.0.0.1（Chrome 认为是一个单独的域）的框架，并且我得到与上面相同的访问错误。猜测，即使我嵌入了来自另一个域的 iframe，并且该 iframe 中的脚本正确引用了该域的 localStorage（正如我在 console.log(localStorage) 行中看到的那样），权限用于写入 localStorage 的内容来自首页的域。
In short, it looks like no iframe can write to localStorage in Chrome. Does anybody know if there's a way around this particular security "feature"? Or am I doing something wrong?
简而言之，在 Chrome 中似乎没有 iframe 可以写入 localStorage。有谁知道是否有办法绕过这个特定的安全“功能”？还是我做错了什么？
回答by Max
The problem only occurs when third-party cookies are disabled. Newer versions of Firefox and Opera are also blocking it. In IE and Edge it is still possible although third-party cookies are disabled. If the localStorage would not be blocked in the iframe, a web tracker could simply include a iframe, read the cookie, send it to the parent script, and then send it to the server.
只有在禁用第三方 cookie 时才会出现此问题。较新版本的 Firefox 和 Opera 也阻止了它。在 IE 和 Edge 中，尽管禁用了第三方 cookie，但仍然可以使用。如果 localStorage 不会在 iframe 中被阻止，则网络跟踪器可以简单地包含一个 iframe，读取 cookie，将其发送到父脚本，然后将其发送到服务器。
The reason why this is not blocked in IE and Edge is that these browser allow websites to send third-party cookies, which were previously set as first-party cookies, to the server although third-party cookies are blocked. For example, if a user visits facebook on a regular basis, he gets first-party cookies from facebook. When he then visits other websites with facebook's share button, facebook can track him although third-party cookies are disabled. I really do not know why IE and Edge do not block third-party cookie sending, but I would not use these browsers anyway.
这在 IE 和 Edge 中没有被阻止的原因是这些浏览器允许网站将第三方 cookie 发送到服务器，尽管第三方 cookie 被阻止，但以前设置为第一方 cookie。例如，如果用户定期访问 facebook，他会从 facebook 获取第一方 cookie。当他随后通过 facebook 的分享按钮访问其他网站时，尽管第三方 cookie 被禁用，facebook 仍可以跟踪他。我真的不知道为什么 IE 和 Edge 不阻止第三方 cookie 发送，但我无论如何都不会使用这些浏览器。
The errors the browsers show when third-party cookies are disabled:
禁用第三方 cookie 时浏览器显示的错误：
Chrome and Opera: Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
铬和歌剧： Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
Firefox: SecurityError: The operation is insecure.
火狐： SecurityError: The operation is insecure.
IE and Edge: No error, access to localStorage in iframe is possible although third-party cookies are disabled.
IE 和 Edge：没有错误，尽管禁用了第三方 cookie，但可以访问 iframe 中的 localStorage。
So in conclusion, it is not possible to bypass this security feature (in Chrome, Firefox, Opera) and this is good in order to ensure users' privacy.
所以总而言之，绕过这个安全功能是不可能的（在 Chrome、Firefox、Opera 中），这很好地确保了用户的隐私。
回答by Zvi Redler
This is an old post, but if someone else see it- you can use postMessage
这是一个旧帖子，但如果其他人看到它-您可以使用 postMessage
回答by mmg666
Well, localStorageis domain-based and there is no reason for your example code to fail. What it actually does is to set the testitem to 123for 127.0.0.1 whereas it will leave the localhost localStorageempty.
嗯，localStorage是基于域的，您的示例代码没有理由失败。它实际上所做的是将127.0.0.1的test项目设置为123，而它将本地主机localStorage留空。
This might not be the answer to your initial problem of QUOTA_EXCEEDED_ERR, but just try to switch to private browsing on Chrome (Ctrl+Shift+N) to see if you still have the error. Without further information on what you were initially doing, I can't tell much but I believe that quota exceeded means what it means...
这可能不是您最初的 QUOTA_EXCEEDED_ERR 问题的答案，但只需尝试在 Chrome 上切换到隐私浏览 (Ctrl+Shift+N) 以查看是否仍有错误。如果没有关于你最初做什么的更多信息，我不能说太多，但我相信超出配额意味着什么......
And I think Chrome's quota is 2.5mb unlike FF which has 5mb of localStorage quota.
而且我认为 Chrome 的配额是 2.5mb，不像 FF 有 5mb 的 localStorage 配额。
