Chrome 中的 Iframe 错误: 未能从“ Window”中读取“ localStorage”: 拒绝访问此文档

我有一个使用 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 中检查了我的安全设置，就像 另一个堆栈溢出线程中描述的那样，但是它不起作用。是否有任何改变使嵌入成为可能而不需要调整(默认)大多数现代浏览器的安全设置？

为了提供更多的信息，我们使用 Ember-CLI 作为我们的 Web 应用程序，并打开 CSP(更多关于 Ember-CLI CSP 的信息)。CSP 会导致我们的 Web 应用程序出现安全错误吗？

137372 次浏览
小开

As has been pointed out in the comments, localstorage is single origin only -- the origin of the page. Attempting to access the page's localstorage from an iframe loaded from a different origin will result in an error.

The best you can do is hack it with XDM via the postMessage API. This library purports to do the heavy lifting for you, but I haven't tried it. However, I would make sure you're aware of IE's terrible support for XDM before going down this route.

小开

imho it has nothing to do with CSP settings on your ember cli app but to do with browser settings. Some browsers (Chrome) block localStorage content loaded into an iframe. We too are facing a similar situation for our Ember App,were we have an ember app and a plugin which loads on 3rd party websites, the user token loaded into the iframe gets blocked in Chrom,we are experimenting with some solutions, will keep this thread posted as to how it goes.

小开

Under Chrome's Settings > Privacy > Content Settings, you have the cookie setting set to "Block sites from setting any data".

This checkbox is what is causing the exception.

小开

To get rid of this warning - under Chrome's Settings -> Privacy -> Content settings, you have to clear the "Block third-party cookies and site data" option

小开

A more secure way of doing this in Chrome would be to allow only the site(s) that you trust:

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

According to this

This exception is thrown when the "Block third-party cookies and site data" checkbox is set in Content Settings.
To find the setting, open Chrome settings, type "third" in the search box, click the Content Settings button, and view the fourth item under Cookies.

enter image description here

小开

localStorage is per domain, per protocol. If you are trying to access localStorage from a standalone file, i.e. with file:/// protocol, there is no domain per se. Hence browsers currently would complain that your document does not have access to localStorage. If you put your file in a web server (e.g. deploy in Tomcat) and access it from localhost, you will be able to access localStorage.

小开

On the following URL: chrome://settings/content/cookies uncheck "Block third-party cookies".

小开

I ran into this problem in my phone, I couldn't open a certain site with chrome. It took me some time to find the cookies on my phone, when I found it, I saw that my cookies was blocked.

go to your Settings --> Site settings --> Cookies

and allow the site to save and read cookie data, make sure that you don't block third-party cookies! cookies in chrome browser on phone

I hope this helps you.

小开

I checked all the answers but ended up not finding anything. Then I realized what browser I'm using. If you're using Brave (Chromium Based), you will get this error if your shield is up. Try lowering your shield.

enter image description here

小开

Secure way of doing this in Chrome top right, click on eye logo and allow the site you are on to use third-party cookies:

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

小开

If you're using incognito mode, make sure you turn off "Block third-party cookies".

Open a new tab in any incognito window, and turn off the option:

enter image description here

小开

If disable block third-party cookies is not an option, you can use try...catch:

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

Clear Cookie

Chrome->setting->privacy and Policy->Sites that can never use cookies In turnremove cookie for local storage.

小开

For all others like me who search for a Javascript solution/fix:

var storageSupported = false;


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


if (storageSupported)
{
// your code
}

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


提交答案