remix icon indicating copy to clipboard operation
remix copied to clipboard

Published 20 hours ago • verified publisher icon remix-run

Uncaught DOMException when in an environment without access to sessionStorage

Open shieldski opened this issue 2 years ago • 4 comments

What version of Remix are you using?

1.6.3

Steps to Reproduce

  1. Establish an environment where the application does not have access to sessionStorage, such as using a Remix app in a child iframe with a different origin from the parent while the user is using Chrome in Incognito mode with third party cookies blocked.

  2. Visit any route within the Remix app and receive Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

Expected Behavior

I would expect the app to load, even without access to sessionStorage. Functionality provided by a component dependent on sessionStorage (ScrollRestoraion) may not function correctly, but the application should not throw an unhandled exception.

Placing access to sessionStorage inside a try/catch block appears to allow the application to continue to function. See remix/packages/react/scroll-restoration.tsx lines 11-14.

I attempted not using the ScrollRestoration component, but the exception still occurs.

Actual Behavior

Visiting any route in the above environment causes an Uncaught DOMException to be thrown and the application fails to render.

shieldski avatar Jul 06 '22 03:07 shieldski

I'm getting this error as well.

Gim3l avatar Jul 12 '22 12:07 Gim3l

I'm also receiving this error. It seems to only happen to me when using netlify dev. If I use the remix server it works fine. To reproduce:

  1. Run netlify dev
  2. Create a page with an iframe
  3. Refresh page
  4. Add in another iframe to the same page
  5. Refresh Page and you should see the sessionStorage is undefined error.

mattevans-dev avatar Aug 01 '22 13:08 mattevans-dev

We're having the same issue at https://github.com/webstudio-is . This happens when a Remix website is in an iframe with a domain different from the main document, and "Block third-party cookies" is enabled at chrome://settings/cookies.

rpominov avatar Oct 24 '22 11:10 rpominov

Since Remix 1.10.0, the <ScrollRestoration /> component is the one from React Router.

Its implementation changed a bit, and the only calls to sessionStorage are within the component, removing the component like OP tried should work fine.

machour avatar Jan 23 '23 17:01 machour

@machour is correct and this should no longer be an issue once you remove the component

brophdawg11 avatar May 05 '23 17:05 brophdawg11