microsoft
[Bug] Monaco editor used inline styling that violates Content Security Policy for a web application
Reproducible in vscode.dev or in VS Code Desktop?
- [x] Not reproducible in vscode.dev or VS Code Desktop
Reproducible in the monaco editor playground?
- [x] Not reproducible in the monaco editor playground
Monaco Editor Playground Link
No response
Monaco Editor Playground Code
Reproduction Steps
Prerequisites: Node.js LTS should be available
Unzip the attached monaco-editor-demo.zip, navigate to the 'monaco-editor-demo' folder using command prompt
cd monaco-editor-demo npm install npm install monaco-editor npm run preview
Access browser link generated to see the violation in browser console(png image attached)
Browser snapshot
Sample code monaco-editor-demo.zip
Actual (Problematic) Behavior
The CSP configuration is done in dist\index.html file, in line 5
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; script-src-elem 'self'; script-src-attr 'self'; font-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; form-action '*'; frame-src 'self'; worker-src 'self'; frame-ancestors 'self' "/>
We are using Monaco editor in our enterprise application. To support EU-CRA, we are trying to turn on Content Security Policy(CSP) in our application. However, we are getting many inline styling CSP violations coming from monaco editor code. The sample application attached is demonstrating the issue in a standalone web application.
Expected Behavior
No response
Additional Context
No response
This is what Chatgpt has to say about Monaco Editor:
CSP Challenges with Monaco Editor Monaco uses:
Web Workers (served as blob URLs or via separate files)
Inline styles/scripts (especially in dev mode with Vite)
That makes it tricky to lock down with a strict CSP.
This is frustrating and means that Monaco editor is unusable for enterprise applications.
We're managing with an old version which seems to work OK with our CSP for now, but to get more recent versions working it looks like we'd need to add worker-src blob: and font-src data: which we're not happy about doing.
@bpasero what are your thoughts here?
I believe it should be possible to support this. We have some places that load webworkers from data urls, but I believe we don't necessarily have to do that.
@mark-storefeeder: Which version of the Monaco editor did you use, that is compatible with your CSP?
We are also blocked to use the monaco editor with our current content security policy.
We're using a very old version unfortunately - https://www.npmjs.com/package/monaco-editor/v/0.22.3
I imagine we could go several versions forward, but we definitely can't go all the way because of these CSP issues.