codesandbox / codesandbox-client

An online IDE for rapid web development

https://codesandbox.io

Other

13.11k stars 2.29k forks source link

Embed fails for chrome with incognito (localStorage error) #6174

Open matthewoates opened 3 years ago

matthewoates commented 3 years ago

🐛 bug report

Preflight Checklist

[x] I have read the Contributing Guidelines for this project.
[x] I agree to follow the Code of Conduct that this project adheres to.
[x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

Loading an embed with incognito in the latest chrome causes an error and prevents anything from rendering.

To Reproduce

Visit https://react-hook-form.com/ with chrome in incognito. Scroll to the Less code. More performant section and notice the broken embed below.

Link to sandbox: [link]() (optional)

Not a sandbox, but observable here with incognito: https://react-hook-form.com/

Your Environment

Software	Name/Version
Сodesandbox	Huh? It's the embed
Browser	Chrome 94 with incognito
Operating System	Mac OS Catalina

PedroHase commented 3 years ago

The issue is caused by the cookies settings in Chrome. When blocking 3rd party cookies, Chrome will block 3rd parties from accessing any data including LocalStorage which seems like in this case Codesandbox tries to access. This behavior is turned on by default in incognito https://stackoverflow.com/a/44069936.

You can set exceptions here chrome://settings/cookies if you don't want to change the default behavior (which you probably shouldn't in Incognito ( ͡° ͜ʖ ͡°) ).

Edit: Check https://github.com/codesandbox/codesandbox-client/issues/5397#issuecomment-767484420 on how to add the exception.

ezzatron commented 3 years ago

Third party cookie settings definitely seem to be the cause. I just had this happen to a user with stricter privacy settings enabled outside of incognito mode.

Unfortunately, I don't think it's reasonable to ask users to change their privacy settings just to use CodeSandbox embeds. If for whatever reason it's not possible or feasible to get embeds working in stricter privacy modes, perhaps the embed should display some kind of "Could not load" UI? Having a blank box displayed is not a great user experience.

PedroHase commented 3 years ago

Third party cookie settings definitely seem to be the cause. I just had this happen to a user with stricter privacy settings enabled outside of incognito mode.

Yup, that's me as well. Quite annoying to just see blank boxes and having no way to get to the original Codesandbox. Would definitely second a "Could not load" UI with a link to the Codesandbox.

FossPrime commented 3 years ago

CodeSandbox should be able to run without using local storage... but memory instead. This is also a problem in Firefox and in-app WebViews.

I had also run into this issue with some code that used local storage. The fix was to switch from feathers-nedb DB adapter to the feathers-memory DB adapter. Hardware requirements could go up drastically, of course.

Embed: https://koa-js-static-html-server-x2b3ob3qz39s.runkit.sh/ Server: https://runkit.com/hesygolu/koa-js-static-html-server CSB: https://codesandbox.io/s/xk52mqm7o