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

Question

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?

Answer 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.

Answer 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.