Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Stackblitz preview doesn't work on Chrome #162

Open
danmana opened this issue Oct 6, 2017 · 32 comments
Open

Stackblitz preview doesn't work on Chrome #162

danmana opened this issue Oct 6, 2017 · 32 comments

Comments

@danmana
Copy link

@danmana danmana commented Oct 6, 2017

Live reload/ preview doesn't work in Chrome (Version 61.0.3163.100 (Official Build) (64-bit)).

Steps to reproduce:

  1. create a new project (ex: https://stackblitz.com/edit/angular-ta3yfy)
  2. the preview section doesn't load
    (open in a new window works, but without live reload)
_relay_:10 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at https://angular-vxbayq.stackblitz.io/_relay_:10:7
    at https://angular-vxbayq.stackblitz.io/_relay_:43:7
(anonymous) @ _relay_:10
(anonymous) @ _relay_:43
preview-7160e757d494cd480578.js:1 Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.
    at Object.255 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:104517)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.1003 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:4791)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.254 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:103669)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.439 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:116545)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
    at Object.447 (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:117808)
    at t (https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js:1:101)
255 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
1003 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
254 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
439 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
447 @ preview-7160e757d494cd480578.js:1
t @ preview-7160e757d494cd480578.js:1
n.10 @ preview-7160e757d494cd480578.js:1
(anonymous) @ preview-7160e757d494cd480578.js:1
(index):11 Uncaught ReferenceError: _preboot is not defined
    at (index):11
    at (index):11
@ssuperczynski
Copy link

@ssuperczynski ssuperczynski commented Oct 6, 2017

@danmana It works for me

@EricSimons
Copy link
Member

@EricSimons EricSimons commented Oct 6, 2017

@danmana can you try disabling chrome extensions and see if that fixes it?

@danmana
Copy link
Author

@danmana danmana commented Oct 9, 2017

@EricSimons Same in incognito mode without extensions.

I found the issue: aparently having the following setting enabled blocks both cookies and local storage

chrome://settings/content/cookies

Block third-party cookies
Prevent third-party websites from saving and reading cookie data

The js file in question is served from https://angular-ta3yfy.stackblitz.io
The main window is loaded from https://stackblitz.com/edit/angular-ta3yfy
Since these are two different domains, Chrome blocks cookies and local storage access.

Same happens when the originating call comes from: https://static.stackblitz.com/assets/packs/preview-7160e757d494cd480578.js

I'm not sure how this should be addressed, or even if it's possible while keeping each project sandboxed. Perhaps the window url should also be on the project domain? (ex: https://angular-ta3yfy.stackblitz.io/edit)

Right now the only alternative is running with 3rd party cookies enabled, which some users might not want to do.

@jlamby
Copy link

@jlamby jlamby commented Nov 17, 2017

Same problem with Firefox (obviously) when 3rd party cookies are disabled

@cvietor
Copy link

@cvietor cvietor commented Jan 15, 2018

thx @danmana
a quick workaround without enabling 3rd party cookies globally is to add an exception to stackblitz.io

-> chrome://settings/content/cookies
-> Allow -> Add:
[*.]stackblitz.io

@Knighton910
Copy link

@Knighton910 Knighton910 commented Jan 27, 2018

Thanks @cvietor a verbatim solution 👍

@alexsasharegan
Copy link

@alexsasharegan alexsasharegan commented May 1, 2018

Is there any way to detect that 3rd party cookies is disabled? It would be amazingly nice if you could sniff this and provide a helpful message like this fix: #162 (comment)

Maybe something like

window.opener.cookie = 'xdomaincookie';
let cookiesEnabled = window.opener.cookie.indexOf('xdomaincookie') != -1;

@trusktr
Copy link

@trusktr trusktr commented Oct 3, 2018

For reference, if 3rd party stuff is not allowed, here's how to make it work in Chrome for the specific sites (stackblitz in this case):

Click the cookie in the address bar:

screen shot 2018-10-03 at 11 29 35 am

Click "Show cookies and other site data..." which takes you to:

screen shot 2018-10-03 at 11 30 50 am

Switch to the "Blocked" tab, then select the cookies to allow.

In the case of stackblitz, you need to allow staticblitz.com and the specific subdomain for the blitz you're working on. In my case, it was these two:

screen shot 2018-10-03 at 11 31 54 am

Then refresh, and it will work.

Note, you don't need to allow the other ones, and it will still work. F.e. I did not allow these ones:

screen shot 2018-10-03 at 11 33 52 am

@alexsasharegan
Copy link

@alexsasharegan alexsasharegan commented Oct 3, 2018

It's been a while since this, but I remember it being easy to correct the issue. I just remember being very confused for a while as to why things weren't working.

@Sixtisam
Copy link

@Sixtisam Sixtisam commented Oct 11, 2018

Isn't this going to be fixed? Yeah, there exists a workaround for that, but the issue was created over a year ago and there is still no proper solution for this?

@beeman
Copy link

@beeman beeman commented Dec 11, 2018

There seem to be issues with getting it to work in Brave too. You can work around it by disabling the shield for the domain stackblitz.com.

image

Thanks to @MarkPieszak for informing be about the issue!

@Otolone
Copy link

@Otolone Otolone commented Jun 3, 2019

Thanks at cvietor

@tanybt51
Copy link

@tanybt51 tanybt51 commented Jul 1, 2019

that's what worked for me:
go to : chrome://settings/content/cookies

image

@Pyrdacor
Copy link

@Pyrdacor Pyrdacor commented Sep 1, 2019

There seem to be issues with getting it to work in Brave too. You can work around it by disabling the shield for the domain stackblitz.com.

image

Thanks to @MarkPieszak for informing be about the issue!

Ran into the same problem. You can leave the shields up but change "Cookie Control" to "Allow 3rd Party Cookies". It's a workaround. Maybe this could be fixed in the future?

@abhishek0196
Copy link

@abhishek0196 abhishek0196 commented Nov 29, 2019

Thanks @cvietor it worked like charm !!!

@scott859
Copy link

@scott859 scott859 commented Jul 7, 2020

Another shout-out to @cvietor for his solution!

@dusanbass
Copy link

@dusanbass dusanbass commented Jul 9, 2020

This doesn't work for chrome Version 83.0.4103.116 (Official Build) (64-bit)
I don't have any add block or similar.
The preview window is blank no matter which project I open.

It's always this error
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://angular-m9cmad.stackblitz.io') does not match the recipient window's origin ('https://stackblitz.com').

Also I've cleaned up my Chrome browser, added third party cookies, removed plugins, tried with other github accounts, tried even other browsers, and the everything is not working.

Last thing to try is not to use VPN, but I need that because of my company. If any ideas, please :/

@agroupp
Copy link

@agroupp agroupp commented Jul 17, 2020

Same here, it stopped working few days ago, before was ok.
The error in console is Uncaught (in promise) TypeError: Cannot navigate to URL: https://<playground>.stackblitz.io/_relay_.
This issue happens if console opened only. If close console and refresh the page everything is ok.

@dusanbass
Copy link

@dusanbass dusanbass commented Sep 18, 2020

Hey, here's what worked for me in the end:

Logged out out of all gmails.
Cleared cache of the Chrome.
Logged in into only one gmail for github.

Works now. Even with ad block.

@luisjunco
Copy link

@luisjunco luisjunco commented Nov 3, 2020

@cvietor

the domain seems to have changed from .io to .com. It'd be great if you can pls update your wonderful answer to reflect that change.

a quick workaround without enabling 3rd party cookies globally is to add an exception to stackblitz.io / stackblitz.com

-> chrome://settings/content/cookies
-> Allow -> Add:
[*.]stackblitz.io
[*.]stackblitz.com

@AndyOGo
Copy link

@AndyOGo AndyOGo commented Mar 3, 2021

Same here.
App won't start up in Chrome, but in Firefox.

@AMBudnik
Copy link

@AMBudnik AMBudnik commented Apr 9, 2021

Chrome 89 - still enabling cookies for the [*.]stackblitz.com doesn't help...

@J-Siu
Copy link

@J-Siu J-Siu commented May 9, 2021

Firefox stable(88.0.1) and nightly(90.0a1) won't start preview panel.

@fnky
Copy link

@fnky fnky commented May 24, 2021

The temporary fix is to enable cookies for [*.]stackblitz.io (note the .io TLD and not .com) from cookies settings.

@avshin12
Copy link

@avshin12 avshin12 commented May 25, 2021

FYI [*.]stackblitz.com worked for me - spent 10 minutes on this.

@pixelbucket-dev
Copy link

@pixelbucket-dev pixelbucket-dev commented Jul 26, 2021

Just a small helper from my side, since I struggled to fix this in Firefox.

I wanted to try the Ionic example. For me the preview did not show anything (even the loading animation) and I had several console errors:

Failed to register/update a ServiceWorker for scope ‘https://ionic-zmi9cb.stackblitz.io/’: Storage access is restricted in this context due to user settings or private browsing mode.
Uncaught (in promise) DOMException: The operation is insecure.
Failed to get service worker registration(s): Storage access is restricted in this context due to user settings or private browsing mode.
Uncaught (in promise) DOMException: The operation is insecure.

Steps to fix the issue in in Firefox:

  1. I deactivated all extensions that potentially block content/cookies
  2. Then I found I had set the mode of Enhanced Tracking Protection to "Strict".
  3. Change the mode to "Standard" and it works, alternatively use the "Custom" mode, but youy must keep the option Cross-site tracking cookies — includes social media cookies set.

Screenshot 2021-07-26 at 19 02 01

Screenshot 2021-07-26 at 19 04 10

Also, for me Delete cookies and site data when Firefox is closed was unticked, so not the issue in my case.

@thykka
Copy link

@thykka thykka commented Sep 24, 2021

Softening the browser's security settings hardly seems like a solution. There are good reasons to block 3rd party cookies. IMO this should be resolved without resorting to forcing the user to open their browser for 3rd party tracking.

@pixelbucket-dev
Copy link

@pixelbucket-dev pixelbucket-dev commented Sep 25, 2021

I totally agree. It's quite a dubious practice to force such cookies.

@Sebi2020
Copy link

@Sebi2020 Sebi2020 commented Oct 20, 2021

thx @danmana a quick workaround without enabling 3rd party cookies globally is to add an exception to stackblitz.io

-> chrome://settings/content/cookies -> Allow -> Add: [*.]stackblitz.io

Did not solve the problem for me. I keep getting the same error as before (Chrome 94.0.4606.81)

@michaelbazos
Copy link

@michaelbazos michaelbazos commented Oct 20, 2021

@Sebi2020

In Chrome settings, search for cookies. Or go straight to chrome://settings/cookies

Under "Sites that can always use cookies" click Add

Do either of the following:

  • Variant 1: type [*.]stackblitz.com, and enable "Including third-party cookies on this site"
  • Variant 2: type [*.]stackblitz.io, and do not enable "Including third-party cookies on this site"

stackblitz.io is the domain used by the webserver, the second variant is therefore more restrictive as any other third-party cookie from stackblitz.com would still be blocked.

Actually the second variant is a bit intriguing. It looks like if the checkbox is enabled, the pattern would be matched only against the site location's url. I however haven't investigated further to verify this point.

@Nezteb
Copy link

@Nezteb Nezteb commented Jan 14, 2022

Nothing works for me.

macOS 11.6.2
Chrome Version 97.0.4692.71 (Official Build) (x86_64)

My cookie settings:
Screen Shot 2022-01-14 at 3 21 14 PM

No cookies are being blocked:
Screen Shot 2022-01-14 at 3 19 48 PM

Console errors:
Screen Shot 2022-01-14 at 3 20 43 PM

I've tried with all plugins disabled, incognito, restarting the browser, trying several different Stackblitz examples, and nothing works.

@Nezteb
Copy link

@Nezteb Nezteb commented Jan 14, 2022

Okay I assumed that when I had uBlock Origin turned off that it would actually... turn off everything. But no, apparently it does not.

In order to resolve this I had to go into the "My rules" tab of uBlock Origin's settings and add these:

no-scripting: stackblitz.com false
no-scripting: stackblitz.io false
no-scripting: local.webcontainer.io false

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet