Do not use inline styles!

[Peter-Juhasz]

monaco-editor npm version: 0.7.0
Browser: Edge, Chrome
OS: Windows

We use up to date CSP security rules and deny inline styles to prevent browser-based attacks:
default-src: 'none'; style-src: 'self';

The editor uses inline styles instead of DOM manipulation which is not allowed in a context like this. The browsers refuse to apply these styles which makes the editor render unreadable:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-DNZrVDWDsOLjYnOQ2E2tq7OIosyNLfBDcLuoNqGotlQ='), or a nonce ('nonce-...') is required to enable inline execution.```

[lol768]

Any plans for addressing this in the future?

[starpit]

i'm curious, given that this issue is several years old now... does everyone employing monaco-editor resort to unsafe-inline for the style-src aspect of their CSP?

[JacobEvelyn]

@starpit I do unfortunately. Would love a better solution.

[sugar700]

From what I can tell, this is required due to use of innerHTML which poisons dynamic style attributes (for instance, see https://github.com/microsoft/vscode/blob/9089a79ecf76a25fccc7c232d80cdd374a7cc66e/src/vs/editor/browser/view/viewLayer.ts#L510).

[kfox112]

Any updates or workarounds (that don't leave the app completely vulnerable) on this?

[fxBrBowman]

It looks like CSP nonce support has been added to the vscode-loader. Could this be something that is could be added as an option to the monaco editor?

microsoft/vscode#58827

[rhys-e]

I've been trying to fix this all day and much to my dismay it's not even possible by hooking createElement("style") to enforce a nonce, since monaco uses lots of innerHTML to set things up.

I also wrote a script to log and grab hashes of style content so that I could instead go the fixed hash route and just supply all the inline style hashes (on the assumption that they're deterministic), but it looks like monaco updates style tag content (e.g. create and add style to the DOM, then update its content, meaning the hash changes) so it's extremely difficult to make that work, as well.

Honestly, if someone wanted to build a CSP resistant lib this would be a pretty good implementation

[bthorben]

Any updates on this? We really like monaco and use it quite extensively. Monaco is unfortunately the only frontend library that can't seem to work nicely with CSP.

[bthorben]

It looks like CSP nonce support has been added to the vscode-loader. Could this be something that is could be added as an option to the monaco editor?

microsoft/vscode#58827

It looks like this would only apply to scripts, which can already be solved nicely by bundling monaco together with the rest of the javascript. There doesn't seem to be a solution for styles (yet).