category: builds-integration
CKEditor 5 is compatible with applications that use CSP rules and helps developers build secure web.
The recommended CSP configuration that allows the rich text editor to run out–of–the–box with all standard features using the content like images or media from external hosts looks as follows:
default-src 'none'; connect-src 'self'; script-src 'self'; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src *
Some CSP directives have an impact on certain rich text editor features. Here's the round-up of directives and their specific roles in the editor:
default-src 'none': resets the policy and blocks everything. All successive directives work as a white–list. By itself, as long as followed by other directives, it has no impact on the editor.connect-src 'self'
'self' value ensures the requests remain within the same host.Note: To use {@link features/ckfinder CKFinder} hosted from another domain, make sure the domain is also included in the directive value.
Note: To use CKEditor Cloud Services, include the http://*.cke-cs.com domain in the connect-src directive, for instance connect-src 'self' http://*.cke-cs.com.
script-src 'self': allows the execution of JavaScript from the current host only and can be applied only if the CKEditor 5 script file (<script src="[ckeditor-build-path]/ckeditor.js"></script>) is also served from that host.
Note: If CKEditor 5 is served from another host, for instance the {@link builds/guides/integration/installation#cdn official CDN}, make sure the value of script-src includes that host (script-src 'self' https://cdn.ckeditor.com).
Note: To use {@link features/ckfinder CKFinder}, you may need to extend the directive value with 'unsafe-inline' 'unsafe-eval'.
Note: To use {@link features/ckfinder CKFinder} hosted from another domain, make sure the domain is also included in the directive value.
img-src * data:
* directive value allows images in the editor content to come from any hosts.data: value allows:
<img src="data:..." />) and without data: they cannot be displayed and uploaded.Note: Use the more strict img-src 'self' if all images in the editor content are hosted from the same domain and you do not want to enable the {@link features/media-embed Media embed} and {@link features/paste-from-word Paste from Word} features.
style-src 'self' 'unsafe-inline'
'unsafe-inline' is necessary for webpack's style-loader to load {@link framework/guides/theme-customization#styles-processing-and-bundling editor UI styles}.
Note: You can {@link builds/guides/integration/advanced-setup#option-extracting-css extract styles to a separate .css file} during the editor building process and remove this directive.'unsafe-inline' is necessary for certain editor content styles to work properly. For instance, you are going to need it if you want to enable editor features like {@link features/font Font} or {@link features/text-alignment Text alignment} or any other feature that uses inline style="..." attributes in the content.frame-src *: Necessary for the {@link features/media-embed Media embed} feature to load media with previews (containing <iframe>).
Note: Use the more strict frame-src 'self' if all the media in the edited content come from the same domain as your application.
Knowing the role of each directive, the most strict set of rules that allows CKEditor 5 to run is as follows:
default-src 'none'; connect-src 'self'; script-src 'self'; img-src 'self'; style-src 'self'; frame-src 'self'
but it comes with some trade–offs, for instance it requires you to:
.css file} (no style-loader),