Iframe in Chrome error: Failed to read 'localStorage' from 'Window': Access denied for this document

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?

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.

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.

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

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.

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:

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.

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.

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"

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.

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
}

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.

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

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

Clear Cookie

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