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?

your title mentions an `iframe`? is something in the iframe trying to access the local storage? that sounds like it could trigger a security warning? — Grapho, May 27 '15 at 13:21
@Grapho: I rephrased my initial question. We just want to provide other websites the possibility to embed our web app via `iframe`. So the `window.localStorage` call is in our web app code and therefore in the `iframe`. We don't want to do any fancy cross domain thing. Just make our web app available via iframe. Hope this clarifies the problem. — tschoartschi, May 27 '15 at 13:53
if the web app uses local storage, then running it in an iframe _will_ cause a cross-domain issue, because Window is global... it will be trying to access the local client's window.localstorage.. remember locastorage is a client browser thing.. not a hosted/server thing.. your app has no knowledge if it is being served from anywhere — Grapho, May 27 '15 at 14:07
So there is no chance to get it working? We didn't design our app for this but many customers requested this feature, therefore we need some solution. I know that localStorage is no server thing. But I thought the entries are stored by domain. I don't want to set anything for another domain, just for the domain which is specified in the src attribute of the iframe. Is there a way to bypass the window and just write to our "domain-entry" of the localStorage? — tschoartschi, May 27 '15 at 14:14
not with localStorage. if you want to only store things on your domain, you will need a back-end to persist data to... utilizing ember-data or such. — Grapho, May 27 '15 at 14:18
Maybe use a localstorage polyfill. Might help. https://code.google.com/p/chromium/issues/detail?id=357625 — blessanm86, May 27 '15 at 14:20
@blessenm a pollyfill could work if the issue lies soley in that the client has no localstorage capability.. however the end result would still be that clients would be storing data on their own local browsers... which becomes a problem if the data is needed to be passed back and forth through the iframe — Grapho, May 27 '15 at 14:26
Maybe a polyfill is a good solution. Concerning our usage of localStorage: we don't store data we want to persist to our back-end there. We just save settings like actual locale, actual access token etc. If the user clears the localStorage it's totally fine she/he just needs to set locale again and login again. We use [ember-simple-auth](https://github.com/simplabs/ember-simple-auth/) which relies on localStorage. I hope it's not too painful to integrate a polyfill or something similar... — tschoartschi, May 27 '15 at 14:26
yet, data that is stored locally will not be available for the app hosted in the iframe.. which is why you are getting the original errors you posed.. not being able to read properties from the local storage — Grapho, May 27 '15 at 14:28
okay I see. So a user can not login to our app if it is hosted in an iframe, because I can't write login credentials to the localStorage. Hm... that's not good. Any idea how to fix this? Is the polyfill the only viable option? — tschoartschi, May 27 '15 at 14:35
the only thing i can suggest is looking into CSP: http://content-security-policy.com/ there should be a way to monkey with it to allow cross-origin cmmunication on iframes.. (see: sandbox).. however the disclaimer is that it is risky and could open up vulnerabilities... — Grapho, May 27 '15 at 14:40
also.. you could consider storing session info in a controller or service instead of local storage... only use local storage as a back up if user hits refresh. — Grapho, May 27 '15 at 14:42
I haven't had time to investigate into this issue more. I just tried it again and didn't embed the iframe in a html file which is serve from file-system. Instead I used a file served from a webserver. Magically everything works now (tested in Chrome, Firefox, IE11 and Safari). Maybe I explained my question not in the right way, but it seems to work as I expected when I first tried it. — tschoartschi, Jun 22 '15 at 12:36
So, your problem was solved just by serving the embedded iframe from a web server instead of directly from the file system? — gaurav5430, Jun 02 '20 at 12:41

score 71 · Answer 1 · edited Sep 22 '22 at 01:52

71

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.

edited Sep 22 '22 at 01:52

a_manfrinati

82
1
8

answered Oct 09 '15 at 21:34

Paul Irish

47,354
22
98
132

41

if it's not default, it's mostly unusable, because users won't change settings to use some website. – Lukas Liesis Jan 28 '16 at 16:07
4

It is not about the "Block sites from setting any data" option but rather: "Block third-party cookies and site data" setting which doesn't make most sites unusable, but cuts off most of the your-searches-related adverts – Picard Feb 10 '17 at 13:55
6

Seems quite unreasonable to expect visitors to adjust their settings for this. And I'm sure there has to be a better solution. I run into this problem trying to use the Youtube API on a site. Youtube works fine on other sites without changing any settings. There must be a better solution, or Youtube wouldn't work on other sites. – mcv Nov 23 '17 at 13:45
somehow the site was block in the content settings I might have had done it before. After remove the site from the blocking list it works just fine for me. – channa ly Jan 31 '19 at 03:48
2

We are loading a react app in Iframe, In Mac + Chrome, Getting this error. We cannot tell customers to use the above to fix the error. Is there any way in Javascript? – Ilyas karim Aug 05 '20 at 00:55
3

I was testing my site with incognito when I noticed that certain features break. Seems like Chrome's incognito blocks `localStorage` use within iframes by default now (there's a toggle for "Block third-party cookies" when you open up a fresh incognito page). – joe Jan 14 '21 at 03:42
@joe did you find a solution for this? I need to be able to use the localstorage with iframe even when the "Block third-party cookies" option is enabled. – Viny Machado May 22 '21 at 00:24
any new information? – Fernando Santiago Jun 02 '22 at 16:25

score 28 · Answer 2 · answered May 19 '17 at 12:18

28

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.

answered May 19 '17 at 12:18

alessandrio

4,282
2
29
40

1

If going in this direction, use Manage Exceptions additional configuration section rather than unchecking this feature off – st35ly May 10 '23 at 02:37

score 25 · Answer 3 · answered May 19 '18 at 20:30

25

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

answered May 19 '18 at 20:30

e18r

7,578
4
45
40

New URL: chrome://settings/cookies . You can also just search in the settings for "cookies". chrome://settings/?search=cookies – CoperNick Jun 29 '23 at 08:51

score 19 · Answer 4 · answered Aug 31 '21 at 19:17

19

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:

answered Aug 31 '21 at 19:17

Prid

1,272
16
20

score 12 · Answer 5 · edited Sep 01 '21 at 09:54

12

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.

edited Sep 01 '21 at 09:54

Wenfang Du

8,804
9
59
90

answered May 31 '17 at 15:33

Somu

3,593
6
34
44

2

my self I had the issue with an iFrame today inside a website .. hence your answer is missing something :/ still reading about it I'll let you know if I find anything. – M. Gara Jul 11 '19 at 17:33
if I read comment on the question it makes complete sense : if the web app uses local storage, then running it in an iframe will cause a cross-domain issue, because Window is global... it will be trying to access the local client's window.localstorage.. remember locastorage is a client browser thing.. not a hosted/server thing.. your app has no knowledge if it is being served from anywhere – M. Gara Jul 11 '19 at 17:35

score 6 · Answer 6 · answered Apr 15 '20 at 22:51

6

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.

answered Apr 15 '20 at 22:51

Seph Reed

8,797
11
60
125

score 5 · Answer 7 · answered Dec 01 '19 at 07:46

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.

score 5 · Answer 8 · answered Sep 20 '21 at 14:58

5

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
}

answered Sep 20 '21 at 14:58

Bruno Cunha

264
2
5

score 4 · Answer 9 · answered Mar 02 '17 at 18:11

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"

score 3 · Answer 10 · answered May 27 '15 at 22:21

3

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.

answered May 27 '15 at 22:21

Mike Post

6,355
3
38
48

1

As I pointed out in a comment before, everything works as expected after I embedded the iframe in a file which is served from a webserver instead from file system. So everything works fine. Maybe I just phrased my question wrongly. But thanks for all the comments and explanations. If someone is interested in more details, just ask :) – tschoartschi Jun 22 '15 at 12:41
I am facing a similar problem. Can you let me know how you solved it? – Mad Scientist Aug 23 '15 at 02:16
same problem here, thinking about cookies.. :/ – Lukas Liesis Jan 28 '16 at 16:05

score 1 · Answer 11 · answered Aug 23 '15 at 02:05

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.

score 1 · Answer 12 · answered Feb 10 '17 at 13:57

1

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

answered Feb 10 '17 at 13:57

Picard

3,745
3
41
50

score 1 · Answer 13 · answered Apr 13 '21 at 17:16

1

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

answered Apr 13 '21 at 17:16

Mohamad SINANE

11
1

score 0 · Answer 14 · answered Apr 26 '22 at 04:25

0

Clear Cookie

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

answered Apr 26 '22 at 04:25

Nikunj

1
2

score 0 · Answer 15 · answered Oct 18 '22 at 06:21

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

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

15 Answers15

Linked

Related