Contribute to this guide

guideContent Security Policy

CKEditor 5 is compatible with applications that use CSP rules and helps developers build a 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'; frame-src *

# Impact of CSP on editor features

Some CSP directives have an impact on certain rich-text editor features. Here is 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 whitelist. By itself, as long as it is followed by other directives, it has no impact on the editor.

  • connect-src 'self'

    Note: To use CKEditor Cloud Services, include the http://* domain in the connect-src directive, for instance: connect-src 'self' http://*

  • 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 example the official CDN, make sure the value of script-src includes that host (script-src 'self'

  • img-src * data:

    • The * directive value allows images in the editor content to come from any hosts.
    • The data: value allows:
      • Pasting images from the clipboard and from MS Office into the editor content. Pasted images are usually represented as Base64–encoded strings (<img src="data:..." />) and without data: they cannot be displayed and uploaded.
      • Displaying the media embed feature placeholders for the inserted media.

    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 media embed and paste from Word features.

  • frame-src *: Necessary for the 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.

A different set of Content Security Policy directives might be necessary to run CKFinder along with CKEditor 5. Check out the file manager documentation to learn more.

# Strictest working configuration

Knowing the role of each directive, the strictest 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'

This comes with some trade–offs, though. For example, it requires you to:

  • Load images in the content from the same host.
  • Load previewable media in the content from the same host.
  • Give up certain features that use inline styles like font or text alignment.
  • Give up pasting images from the clipboard or from Office.