I’m attempting to embed a notebook into a react app that gets deployed on a SAAS application.
However, as the observable runtime seems to depends on cdn.jsdelivr.net which causes CORS policy conflicts
I’m seeing ‘https://cdn.jsdelivr.net/npm/@email@example.com/dist/plot.umd.min.js’ popup in the console.
Any idea, how to overcome this?
Can you provide an example or share a screenshot of the error?
I don’t see how jsdelivr.net would cause CORS errors unless you’re sitting behind a proxy or firewall that rewrites response headers.
Perhaps this is in re. to a Content Security Policy (CSP) instead of Cross-Origin Resource Sharing (CORS)? If you want to host your own copy of the Observable Plot library rather than using a CDN, you can take a look at the self-hosted standalone example here:
Apologies, you’re right. It concerns the Content Security Policy (CSP).
It seems that with ‘@observablehq/runtime@5’ the runtime.js pulls in dependencies from a cdn by default. I most likely have not well understood how to overcome that by pulling in those dependencies first locally prior to deploy all files in a package.
Will have to dive deeper into the world of npm packages.
Refused to load the script 'https://cdn.jsdelivr.net/npm/@firstname.lastname@example.org/dist/plot.umd.min.js' because it violates the following Content Security Policy directive: "script-src 'self'