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

问题描述 投票:0回答:16

我有一个使用 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 应用程序抛出安全错误吗?

google-chrome iframe ember.js ember-cli content-security-policy
16个回答
73
投票

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

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


28
投票

根据这个

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


24
投票

在以下 URL 上:

chrome://settings/content/cookies
取消选中“阻止第三方 cookie”。


21
投票

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

"Block third-party cookies"

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


12
投票

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


6
投票

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

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

5
投票

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


4
投票

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

4
投票

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

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

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

希望这对您有帮助。


3
投票

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

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


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


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


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

var storageSupported = false; try { storageSupported = (window.localStorage && true); } catch (e) {} if (storageSupported) { // your code }
鸣谢:

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


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

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


0
投票
清除Cookie

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


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

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

© www.soinside.com 2019 - 2024. All rights reserved.