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 · 20 comments
Open

Stackblitz preview doesn't work on Chrome #162

danmana opened this issue Oct 6, 2017 · 20 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

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

Successfully merging a pull request may close this issue.

None yet