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