search

bvaughn / react-devtools-experimental

Experimental rewrite of the React DevTools extension
https://react-devtools-experimental.now.sh
MIT License
965 stars 55 forks source link

Failed to read the 'localStorage' property from 'Window' #292

Closed robertcoopercode closed 5 years ago

robertcoopercode commented 5 years ago

When installing the extension, I get an error for the Chrome extension that says the following:

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

This error is preventing the React tabs from showing up in the Chrome Devtools for me.

image

image

Chrome Version 74.0.3729.169

Feel free to close if you have no idea.

bvaughn commented 5 years ago

Sorry. This is the first I've seen or heard of this. 😦

bvaughn commented 5 years ago

Do you have "Block third-party cookies and site data" checked in Chrome's "Content Settings" ?

https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

bvaughn commented 5 years ago

Related https://github.com/apollographql/apollo-client-devtools/pull/185/files

Chrome extensions will fail to access window.localStorage if 3rd party cookies are blocked.

Looks like the Apollo DevTools replaced window.localStorage with a wrapper around chrome.storage.local. We could do that here, except that localStorage is used in the injected renderer to support reload-and-profile:

https://github.com/bvaughn/react-devtools-experimental/blob/92c2d8366b77e94125010a626c1a56e4b4f94864/shells/browser/shared/src/injectGlobalHook.js#L65-L68

https://github.com/bvaughn/react-devtools-experimental/blob/92c2d8366b77e94125010a626c1a56e4b4f94864/src/backend/renderer.js#L2193-L2196

Maybe we could add an abstraction that used both localStorage and chrome.storage.local (depending on the context) and wrapped localStorage access with try/catch blocks in case it's not supported. This would mean that some features wouldn't work at all (e.g. reload and profile) in restricted contexts but at least others would.

robertcoopercode commented 5 years ago

Do you have "Block third-party cookies and site data" checked in Chrome's "Content Settings" ?

Yes. I unchecked it and now the extension loads correctly! Thanks a lot 💯

bvaughn commented 5 years ago

Good to know. Thanks for the report. I'll try to see that it degrades more gracefully in this case.

bvaughn commented 5 years ago

After thinking about this more, I believe it's a Chrome bug. Disabling cookies for a website shouldn't disable the localStorage API for an extension, given that those two contexts are separate.

Unfortunately it looks like this has been reported to Chrome before, without any action being taken:

I think working around it by using (the asynchronous) chrome.storage API is pretty tricky, because of timing issues during initialization. At best we would have to completely drop support for the "reload and profile" feature. It would also make user settings in more complicated in general, particularly component filters.

For now, I've filed a new crbug (since the above two have been closed):

bvaughn commented 5 years ago

For now I have at least fixed the runtime error by wrapping all calls to localStorage/sessionStorage in try/catch so the extension doesn't fail. (71bfb34)

Should be able to install the latest to get this fix. Going to close this issue in our repo for now, since I don't plan to act on it further (at least not yet, pending more info on the crbug).

itssaifurrehman commented 4 years ago

solution Hope this works for you. It worked for me

BenCoughlan15 commented 4 years ago

Hi, trying to do this on the browserless chrome image. https://hub.docker.com/r/browserless/chrome/

Any idea how I unset the "block third party cookies and site data" setting in cli mode?

cheers, Ben

bvaughn commented 4 years ago

Nope, sorry. You'll have to search the Chrome docs.