dynamic import breakage / cross-origin frame issue

Hello,

Suddenly all of my notebooks have started to fail due to: “Failed to fetch dynamically imported module”

This is due to an attempt to import an es6 module from gitcdn.

In chrome, I see “DOMException: Blocked a frame with origin “https://observablehq.com” from accessing a cross-origin frame.”

This used to work yesterday in the same chrome instance, so I guess there has been a recent change.

The notebook in question is: https://observablehq.com/@pentacular/jsxcad-shapes

Anyone know what is going on?

Thanks.

Hrm. I’m not seeing any errors. Do you have an ad-blocker enabled that might be preventing the request? Does the error still occur if you try another browser? You could also try publishing the library to npm so you can use jsDelivr for hosting (which is what we use for require and has been reliable), or attaching the library as a file to your notebook.

I just refreshed the page and it worked this time.

It seems odd that a CORS error would just pop up – but let’s see how it goes.
Maybe a pattern will become clear.

Thanks.

If it was GitCDN having issues, it could have easily manifested as a CORS errors: most servers don’t return CORS headers on their 500 error pages.

2 Likes

Could be, although I recall being able to load the page manually without any problem while it was failing to import.

This error "Blocked a frame with origin from accessing a cross-origin frame " is not a bug. The same-origin policy is a security mechanism that ensures that window objects only have access to the informations they are authorized to get.

The window.postMessage() method provides a controlled mechanism to securely circumvent this Same-Origin Policy restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.

postMessage(message, targetOrigin)
postMessage(message, targetOrigin, [transfer])

targetOrigin - specifies what the origin of targetWindow must be for the event to be dispatched, either as the literal string “*” (indicating no preference) or as a URI.