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

Posted 2023-02-19

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

【英文标题】：Iframe in Chrome error: Failed to read 'localStorage' from 'Window': Access denied for this document

【发布时间】：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 *** 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 中测试）。也许我没有以正确的方式解释我的问题，但当我第一次尝试时，它似乎可以正常工作。

【参考方案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