Chrome 中的 iframe 错误：无法从“窗口”读取“localStorage”：此文档的访问被拒绝答案

【问题标题】：Iframe in Chrome error: Failed to read 'localStorage' from 'Window': Access denied for this documentChrome 中的 iframe 错误：无法从“窗口”读取“localStorage”：此文档的访问被拒绝
【发布时间】：2015-08-09 11:35:39
【问题描述】：

我有一个使用 localStorage 的网络应用程序。现在我们想通过 iframe 将这个 Web 应用程序嵌入到其他（第三方）网站上。我们希望提供类似于 youtube 的 iframe 嵌入，以便其他网站可以将我们的网络应用程序嵌入 iframe。从功能上讲，它就像不嵌入一样。但它不起作用。 Chrome 打印错误消息：

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

我只是做了以下检查（在 iframe 中）：

if (typeof window.localStorage !== 'undefined') {
    // SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} else {
    // PROVIDE FEEDBACK TO THE USER
}

我检查了 Chrome 中的安全设置，如 another Stackoverflow Thread 中所述，但它不起作用。是否有任何更改可以在不需要调整大多数现代浏览器的（默认）安全设置的情况下进行嵌入？

为了提供更多信息，我们将 Ember-CLI 用于我们的 Web 应用程序并打开了 CSP (more info about the Ember-CLI CSP)。 CSP 会导致我们的网络应用抛出安全错误吗？

【问题讨论】：

你的标题提到了iframe？ iframe 中有什么东西试图访问本地存储吗？听起来可能会触发安全警告？
@Grapho：我重新表述了我最初的问题。我们只想为其他网站提供通过iframe 嵌入我们的网络应用程序的可能性。所以window.localStorage 调用在我们的网络应用程序代码中，因此在iframe 中。我们不想做任何花哨的跨域事情。只需通过 iframe 使我们的网络应用程序可用。希望这可以澄清问题。
如果网络应用使用本地存储，那么在 iframe 中运行它会导致跨域问题，因为 Window 是全局的...它将尝试访问本地客户端的 window.localstorage.. 记住 locastorage 是客户端浏览器的东西.. 不是托管/服务器的东西.. 你的应用程序不知道它是否从任何地方提供服务
不适用于 localStorage。如果您只想将内容存储在您的域中，则需要一个后端来将数据保存到...使用 ember-data 等。
我没有时间进一步调查这个问题。我只是再次尝试并没有将 iframe 嵌入到从文件系统提供的 html 文件中。相反，我使用了从网络服务器提供的文件。神奇的是，现在一切正常（在 Chrome、Firefox、IE11 和 Safari 中测试）。也许我没有以正确的方式解释我的问题，但当我第一次尝试时，它似乎可以正常工作。

标签： google-chrome iframe ember.js ember-cli content-security-policy

【解决方案1】：

在 Chrome 的设置 > 隐私 > 内容设置下，您将 cookie 设置设置为“阻止网站设置任何数据”

此复选框是导致异常的原因。

【讨论】：

如果不是默认的，大部分是不可用的，因为用户不会更改设置来使用某些网站。
这与“阻止网站设置任何数据”选项无关，而是：“阻止第三方 cookie 和网站数据”设置不会使大多数网站无法使用，但会切断大部分网站与您的搜索相关的广告
期望访问者为此调整设置似乎很不合理。而且我确信必须有更好的解决方案。我在尝试在网站上使用 Youtube API 时遇到了这个问题。 Youtube 在其他网站上运行良好，无需更改任何设置。必须有更好的解决方案，否则 Youtube 将无法在其他网站上运行。
我们在 iframe 中加载一个 react 应用程序，在 Mac + Chrome 中，出现此错误。我们不能告诉客户使用上述方法来修复错误。 Javascript有什么办法吗？
当我注意到某些功能中断时，我正在使用隐身模式测试我的网站。似乎 Chrome 的隐身模式现在默认阻止 localStorage 在 iframe 中使用（当您打开一个新的隐身页面时，“阻止第三方 cookie”有一个切换）。

【解决方案2】：

According to this

在“内容设置”中设置“阻止第三方 Cookie 和站点数据”复选框时会引发此异常。
要找到该设置，请打开 Chrome 设置，在搜索框中输入“第三项”，单击“内容设置”按钮，然后查看 Cookies 下的第四项。

【讨论】：

【解决方案3】：

在以下 URL 上：chrome://settings/content/cookies 取消选中“阻止第三方 cookie”。

【讨论】：

【解决方案4】：

localStorage 是每个域，每个协议。如果您尝试从独立文件访问localStorage，即使用file:/// 协议，则本身没有域。因此，浏览器目前会抱怨您的文档无权访问localStorage。如果您将文件放在 Web 服务器中（例如部署在 Tomcat 中）并从 localhost 访问它，您将能够访问 localStorage。

【讨论】：

我自己我今天在网站内遇到了 iFrame 的问题..因此您的答案缺少某些内容：/ 仍在阅读有关它的内容，如果找到任何内容，我会告诉您。
如果我阅读了关于这个问题的评论，这完全有道理：如果网络应用程序使用本地存储，那么在 iframe 中运行它会导致跨域问题，因为 Window 是全局的......它将尝试访问本地客户端的 window.localstorage.. 记住 locastorage 是客户端浏览器的东西.. 不是托管/服务器的东西.. 你的应用程序不知道它是否从任何地方提供服务

【解决方案5】：

我在手机中遇到了这个问题，我无法使用 chrome 打开某个网站。我花了一些时间在手机上找到 cookie，当我找到它时，我看到我的 cookie 被阻止了。

转到您的设置 --> 网站设置 --> Cookies

并允许网站保存和读取 cookie 数据，确保您不阻止第三方 cookie！

希望对你有帮助。

【讨论】：

【解决方案6】：

正如 cmets 中所指出的，localstorage 只是单一来源——页面的来源。尝试从从不同来源加载的 iframe 访问页面的本地存储将导致错误。

您能做的最好的事情就是通过 postMessage API 使用 XDM 破解它。 This library 声称为你做繁重的工作，但我还没有尝试过。不过，我会确保你在走这条路之前知道IE's terrible support for XDM。

【讨论】：

正如我之前在评论中指出的那样，在我将 iframe 嵌入到由网络服务器而不是文件系统提供的文件中后，一切都按预期工作。所以一切正常。也许我只是错误地表达了我的问题。但感谢所有 cmets 和解释。如果有人对更多细节感兴趣，请问:)
我面临着类似的问题。你能告诉我你是怎么解决的吗？
同样的问题，考虑cookies..：/

【解决方案7】：

在 Chrome 中执行此操作的更安全的方法是只允许您信任的网站：

Chrome
  -> "Settings"
    -> "Show advanced settings..."
      -> "Privacy"
        -> "Content settings..."
          -> "Manage exceptions..."
            -> (add a pattern such as [*.]microsoft.com)
            -> be sure to hit enter
            -> "Done"
          -> "Done"

【讨论】：

【解决方案8】：

我检查了所有答案，但最终什么也没找到。然后我意识到我正在使用什么浏览器。如果您使用的是 Brave（基于 Chromium），如果您的盾牌已启动，您将收到此错误。试着降低你的盾牌。

【讨论】：

【解决方案9】：

如果您使用隐身模式，请确保关闭"Block third-party cookies"。

在任何隐身窗口中打开一个新选项卡，然后关闭该选项：

【讨论】：

【解决方案10】：

恕我直言，这与您的 ember cli 应用程序上的 CSP 设置无关，而是与浏览器设置有关。某些浏览器 (Chrome) 会阻止加载到 iframe 中的 localStorage 内容。我们的 Ember 应用程序也面临着类似的情况，如果我们有一个 ember 应用程序和一个加载到 3rd 方网站上的插件，加载到 iframe 中的用户令牌在 Chrom 中被阻止，我们正在尝试一些解决方案，将保留这个帖子发布了它的进展情况。

【讨论】：

【解决方案11】：

要消除此警告 - 在 Chrome 的设置 -> 隐私 -> 内容设置下，您必须清除“阻止第三方 cookie 和站点数据”选项

【讨论】：

【解决方案12】：

在 Chrome 右上角执行此操作的安全方式，单击眼睛徽标并允许您所在的网站使用第三方 cookie：

Check this image if you can't find the eye logo

【讨论】：

【解决方案13】：

如果禁用阻止第三方 cookie 不是一个选项，您可以使用 try...catch：

try {
 // SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
} catch(err) {
 // PROVIDE FEEDBACK TO THE USER
}

【讨论】：