CSP improvements

[Witoso]

This is a general ticket gathering thought and comments on the CSP. Mostly regarding style-src (or style-src-attr). unsafe-inline needs to be used so that features like Fonts work. Remember, this directive doesn't relate only to the style, but also to individual styles of certain elements, like span.

Research so far:

1. ✅ Assigning styles to elements in engine. It was mentioned by @oleq in this comment. I discovered that assigning styles to .cssText bypasses this issue without much modification of the code, so I think it's fixed. Here is PoC.
2. ⚠️ Pasting content with styles throws CSP exception. It happens in the HTML data processor right there because we are attending to parse <p style="color: red">Foo</p> from clipboard. It's not fixed in PoC, but with a lot of hacks it might be.
3. ❌ Let's assume we have #editor div with <p style="color: red">Foo</p> content. Calling ClassicEditor.create( document.querySelector( '#editor' ), { creates editor with Foo paragraph that is unstyled on Firefox. It's black instead of red. On the Chrome on the other hand it's working, style tag is preserved. It looks like Firefox disallows the browser to read style tag and trims these tags from HTML content before attending to bootstrap editor. I'm not sure if we can fix this.
4. ❓ Using nonce attribute on our elements affected by style-src 'self' CSP attribute. We can add an optional editor configuration option to specify the value of this attribute tag. This approach is used by styled-loader used by Webpack.
   1. ✅ This is solved by New installation methods (v42+, June 2025). CKEditor integrated this way does not inject <style> elements anymore so you can use nonce. Read the migration guide to migrate from the legacy installation methods if you used them.

[aljaznuncic]

Is using CSP nonce currently possible with custom build CKEditor5 (version 41 or later) and Angular 18? Any useful link for this?

My CSP HEADER at nginx: add_header Content-Security-Policy "default-src 'self'; connect-src 'self'; img-src 'self' data:; font-src 'self' data:; style-src 'self' 'nonce-$request_id'; script-src 'self' 'nonce-$request_id'; frame-ancestors 'none'; object-src 'none'; frame-src 'self'" always;

I got this:

[jeandat]

Is using CSP nonce currently possible with custom build CKEditor5 (version 41 or later) and Angular 18? Any useful link for this?

I don't think so mate since this ticket is still open. I also don't saw anything in documentation about configuring a nonce.

For the record I'm also very interested by this feature. Because of libraries like ckeditor, I cannot remove "unsafe-inline" and use a nonce on styles.

[jcompagner]

Yes i think CKEditor should just fix it as Angular also fixed this, as an example:

https://www.innoq.com/en/blog/2023/07/style-nonces-for-csp-in-angular-16/

so give use a config setting that we provide to the ckeditor instance, that is then used by ckeditor to set on the inline style tags that they generate using: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce

[Reinmar]

I'm a bit confused by this ticket and I think that it misses a very important thing.

CKEditor does not generate inline <style> elements anymore.

It did so in the so called legacy installation methods. Those were the only installation methods available prior to v42.0 (June 2024). We used webpack style loader which was automatically injecting <style> elements to the page.

However, since v42.0, it's the integrator's job to include CKEditor's stylesheets on the page. So, the integrator can use nonce. Check out the latest docs.

Note: The legacy installation methods are still supported too. So, if you use v42.0+ you might still be using them. You might need to migrate to the new installation methods.

Do I miss something?

[Witoso]

Yep, I will update the title and description. Somehow I thought nonce could be used in the elements other than style and script but this is not the case.

[jcompagner]

but attribute inline styling can be controlled by: style-src-attr = " 'unsafe-inline' " (i guess ckeditor can mention this ins the more "strict" csp setting)

so at least you can use inline styling in the attribute section because not allowing that breaks a lot of stuff yes.

But then at last we can use style-src = " 'self' 'nonce-xxxx' "

but currently our build of CKEditor generates a lot of

[Witoso]

Thanks for pointing this out, I will update the docs.

[kglickman]

Unfortunately, I am not allowed to use 'unsafe-inline' on style-src-attr any more than I am on style-src so I've had to disable many plugins.

What would be helpful would be to make variations of the plugins that are slightly less flexible so that they could be styled with classes instead. For instance, instead of allowing the selection of an infinite number of colors, allow for a subset so that you could apply a class named 'red' instead of style with color:#FF0000. For fonts, have a default list of fonts so that you could have a class named 'arial'. For things like image sizing, instead of supporting widths with pixels, support classes for various percentages. For indents, allow styles for up to 10 indents. You get the idea.

[Witoso]

This is a very interesting proposal, but we would need to gather more interest in the area, as it's non-trivial to develop. By my quick research, all WYSIWYG editors on the market have features that require 'unsafe-inline'.

[iamnexxed]

Removing the use of unsafe-inline would be a great advantage as I need to use strictest CSP. @kglickman has a decent suggestion for the solution.

[apoorv-2204]

I am using nonce in my project to whitelist the css style tag. is there any way that can cke editor5 generate css inside

Or is there any plugin that generate classes instead of inline styles?

[herrardo]

Is there any documentation that shows what tooling is generating inline styles?

As far as i have tested, some of the plugins change classes for the elements to alter its styling, which is perfectly fine for CSP, but others, as you are pointing out, are adding inline styles, so my question here would be if there are a documentation where it is shown which plugins add inline styling to prevent customers to use them in order to use CSP without unsafe- values.

On top of that documentation, some approach as @kglickman suggested would work to safley uise the plugins.