Stackblitz preview doesn't work on Chrome

[danmana]

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]

@danmana It works for me

[EricSimons]

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

[danmana]

@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]

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

[cvietor]

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]

Thanks @cvietor a verbatim solution 👍

[alexsasharegan]

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]

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:

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

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:

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:

[alexsasharegan]

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]

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]

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.

Thanks to @MarkPieszak for informing be about the issue!

[Otolone]

Thanks at cvietor

[tanybt51]

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

[Pyrdacor]

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.

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]

Thanks @cvietor it worked like charm !!!

[scott859]

Another shout-out to @cvietor for his solution!

[dusanbass]

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]

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]

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]

@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]

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

[AMBudnik]

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

[J-Siu]

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

[fnky]

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

[avshin12]

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

[pixelbucket-dev]

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.

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

[thykka]

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]

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

[Sebi2020]

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]

@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]

Nothing works for me.

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

My cookie settings:

No cookies are being blocked:

Console errors:

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

[Nezteb]

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