Scastie Embedding is broken

bradcarter1994 commented 11 months ago

Describe the bug

Scastie's embedding feature is broken in all major browsers

Scastie snippet link

https://scastie.scala-lang.org/UVDHguSaRTCQz9pz8SGFJw

To Reproduce

Open any Scastie - example
Click the Embed button and copy the given HTML
Create a file called index.html and paste in the HTML from Scastie
Open index.html in a browser
Note that the embedded Scastie window does not render

Expected behavior

The embedded Scastie window should be rendering, but isn't

Screenshot ( Optional )

Screenshot 2023-09-25 at 10 59 01 AM

Screenshot 2023-09-25 at 11 00 03 AM

Version

Embedded Scastie

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

Relevant log output

// Chrome Logs
P86D8EETQHWhQfOTreiV6w.js:1 A parser-blocking, cross site (i.e. different eTLD+1) script, https://icvm0042.epfl.ch/embedded.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
P86D8EETQHWhQfOTreiV6w.js:1 A parser-blocking, cross site (i.e. different eTLD+1) script, https://icvm0042.epfl.ch/embedded.js, is invoked via document.write. The network request for this script MAY be blocked by the browser in this or a future page load due to poor network connectivity. If blocked in this page load, it will be confirmed in a subsequent console message. See https://www.chromestatus.com/feature/5718547946799104 for more details.
embedded.js:1 
 Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID
index.html:1 Uncaught ReferenceError: scastie is not defined
    at index.html:1:-91

// Firefox Logs
This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”.
index.html
Loading failed for the <script> with source “https://icvm0042.epfl.ch/embedded.js”. index.html:2:93
An unbalanced tree was written using document.write() causing data from the network to be reparsed. More information: https://developer.mozilla.org/en-US/docs/Glossary/speculative_parsing index.html:1:95
Uncaught ReferenceError: scastie is not defined
    <anonymous> file:///Users/bcarter/Desktop/index.html:1
index.html:1:50

bradcarter1994 commented 11 months ago

Adding a little more context here. I'm a backend Scala developer and I use Scastie to embed code snippets in my dev blog, which is a super cool feature. A couple of weeks ago, I noticed that the Scastie snippets weren't rendering in my blog.

I've been digging into the issue, but front end development is unfamiliar territory for me and I will gladly take any help that anyone can offer with the problem.

What I've found so far:

The chromestatus link from the Chrome warning logs and related Chrome blog page explain that synchronously adding content to a webpage with document.write can cause performance issues, and that they may sometimes block content that is synchronously loaded over slower connections. However, the blog page also explains that Chrome will not block the content on a reload, which is still happening here. Additionally, this doesn't explain why the issue is also happing in browsers other than Chrome. I suspect that this may be a related issue, but probably isn't the root cause.
A Google search for that warning yields this stack overflow thread. This thread recommends
- Adding defer/async to the script tag. I tried this, but it results in the error message Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. It looks like there's already an open issue for this here.
- Submitting the script provider to Google for whitelisting. I submitted the form from the Stackoverflow page, but haven't gotten anything back from Google.

rochala commented 11 months ago

Hey, thanks for reporting! I think this may be the only issue on your side. I've just tried embedding the Scastie in CodePen, locally, and it seems to work. If you check https://tourofscala.com/scala/list-sum-method, it is also using embedded one and it is loading as intended. Maybe it is blocked for some reason? Can you try using your mobile network / phone / other computer and try reproducing it? What is the status of the request?

bradcarter1994 commented 11 months ago

Hi, thanks for getting back so quickly. That's really good to hear that it's not broken everywhere, but I'm now significantly more confused than I was yesterday.

The two sites I'm looking at that use embedded Scasties are OlegYch's CodePen that's linked to in the embedding section of the project Readme and my own blog.

Both of those pages are broken on my macbook on Chrome, Safari, and Firefox and on my PC on Chrome, Edge, and Firefox. Additionally, a co-worker in a different timezone messaged me that my blog was broken for them too (which is how I found out about the issue.)

That being said, the tourofscala page that you linked to is working for me on both my mac and PC. (I noticed though that Scastie component on that page isn't being loaded immediately, that you have to click Load Exercise to get it to appear, and I wonder if that's what's making the difference.) By chance, do you know of any other sites that use embedded scasties that we can check as well?

Also, can you check if Oleg's Codepen and my blog are broken for you too?

scalacenter / scastie