Using with strict CSP prevents monaco editor from loading

[max-degterev]

Describe the Bug

monaco-react loads editor via network, which means that setting strict CSP policy produces this error in the console, code editor doesn't load.

[Error] Refused to load https://cdn.jsdelivr.net/npm/[email protected]/min/vs/loader.js because it does not appear in the script-src directive of the Content Security Policy.

I think it would be better to use a dynamic import with a bundled chunk containing the editor. jsdelivr.net might be unreachable for many reasons, not only CSP. Also there is a security consideration loading unknown scripts from a CDN in an admin panel environment with access to sensitive information. monaco-react has a quite naïve implementation here by default that needs a little extra work: https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#loader-config

Quick fix would be to expose editor options similar to sharp which would allow to patch this in the end user apps

Link to the code that reproduces this issue

https://github.com/suren-atoyan/monaco-react?tab=readme-ov-file#loader-config

Reproduction Steps

Set CSP script-src 'self' 'unsafe-inline' 'unsafe-eval';
See errors in the console

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

v3.11

[jmikrut]

Hey @max-degterev — this is actually intentional on our part because we don't want Next.js to have to compile the JS code that comes in with Monaco (it's pretty heavy and would slow down compilation further).

But it's a good call to allow users to pass in the Monaco dependency directly which would then bypass our CDN-based loading. I will add this to the roadmap!