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

Question

我有一个使用 localStorage 的网络应用程序。现在我们想通过 iframe 将此 Web 应用程序嵌入到其他（第三方）网站上。我们希望提供类似于 youtube 的 iframe 嵌入，以便其他网站可以将我们的 Web 应用程序嵌入到 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 中的安全设置，如 另一个 Stackoverflow 线程 中所述，但它不起作用。是否有任何更改可以使嵌入成为可能，而无需调整大多数现代浏览器的（默认）安全设置？

为了提供更多信息，我们在 Web 应用程序中使用 Ember-CLI 并打开 CSP（有关 Ember-CLI CSP 的更多信息）。 CSP 会导致我们的 Web 应用程序抛出安全错误吗？

Answer 1

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

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

Answer 2

根据这个

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

Answer 3

在以下 URL 上：

chrome://settings/content/cookies

取消选中“阻止第三方 cookie”。

Answer 4

如果您使用隐身模式，请确保关闭

"Block third-party cookies"

。

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

Answer 5

localStorage

是每个域、每个协议。如果您尝试从独立文件（即使用

localStorage

协议）访问

file:///

，则本身没有域。因此，浏览器目前会抱怨您的文档无法访问

localStorage

。如果您将文件放在 Web 服务器中（例如部署在 Tomcat 中）并从

localhost

访问它，您将能够访问

localStorage

。

Answer 6

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

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

Answer 7

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

Answer 8

在 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"

Answer 9

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

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

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

希望这对您有帮助。

Answer 10

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

您能做的最好的事情就是通过 postMessage API 使用 XDM 破解它。 这个库声称可以为您完成繁重的工作，但我还没有尝试过。不过，在走这条路之前，我会确保您了解 IE 对 XDM 的糟糕支持。

Answer 11

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

Answer 12

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

Answer 13

对于所有像我一样寻找 Javascript 解决方案/修复的人：

var storageSupported = false;

try
{ 
    storageSupported = (window.localStorage && true);
}
catch (e) {}

if (storageSupported) 
{ 
    // your code
}

鸣谢：

https://github.com/zoomsphere/ngx-store/issues/91

Answer 14

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

Answer 15

清除Cookie

Chrome->设置->隐私和政策->永远不能使用cookie的站点依次删除本地存储的cookie。

Answer 16

注意到 Chrome 113 和 Chrome mobile 120 隐身版似乎“阻止第三方 cookie 和网站数据”，而最新的桌面版本 (120) 仅阻止“第三方 cookie”。

区别在于：只有前者影响 localStorage 访问。看起来这个问题应该不会再发生了。