Iframe in Chrome error: Failed to read 'localS

问题:

I have a web app which uses localStorage. Now we want to embed this web app on other (third-party) sites via iframe. We want to provide an iframe embed similar to youtube so that other websites can embed our web app in an iframe. Functionally it is the same as if it wouldn't be embedded. But it does not work. Chrome prints the error message:

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

I just do the following check (in the iframe):

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

I checked my security settings in Chrome like described in another Stackoverflow Thread but it doesn't work. Is there any change to make embedding possible without the need of adjusting (default) security settings of most modern browsers?

To give more information, we use Ember-CLI for our web app and turned on CSP (more info about the Ember-CLI CSP). Could CSP cause our web app to throw security errors?

回答1:

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

This checkbox is what is causing the exception.

回答2:

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.

回答3:

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

回答4:

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"

回答5:

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.

回答6:

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.

回答7:

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.

回答8:

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.

回答9:

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

回答10:

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!

I hope this helps you.