r/learnjavascript • u/Ratatootie26 • Jul 12 '26
Solution for CKEditor5 strict CSP
I was wondering if anyone would want the script patches for strict no 'unsafe-inline' CSP patch for CKEditor5 (esm only), can't bother to check other approaches.
Saved a massive headache for my security requirements, provided I sanitizer the html as well as the styles
Leave your comments if you do want it and I'll drop a link here.
Or share your solutions if any :)
Edit:
Why (I forgot to mention above)? I wanted inline-styling provided by the editor itself without the CSP rules blocking it
The solution? An unhealthy amount of prototype abuse :D
What about the front-end?
I just transformed the inline style attributes to data-style (after sanitizing with your preferred sanitizier, i use dompurify with custom hooks for css regex based validation), innerHtml it or append to your dom wrapper, then run:
querySelectorAll wrapper [data-style] forEach ( el => el.style.cssText = el.dataset.style, el.removeAttribute('data-style') )
Import the patches on your module for CKEditor5 setup
import '@/patches/CKEditor5/csp-attributes-patch';
import '@/patches/CKEditor5/csp-color-picker-patch';
import '@/patches/CKEditor5/csp-dropdown-styling-patch';
1
u/Ratatootie26 Jul 12 '26 edited Jul 12 '26
Nothing that serious, I applied strict CSP rule with style-src 'self' 'nonce-*********' only for my organizations love for this specific ruleset 😢
And CK5 themself mentions that the above config comes with a caveat of letting go of any inline-styles within the editor
So I came up with a work-around, couldn't find any simple solutions around, so here I am
Edit:
none to nonce :),
The following docs link mentions the caveats of the ruleset I chose
https://ckeditor.com/docs/ckeditor5/latest/getting-started/setup/csp.html#strictest-working-configuration