diff --git a/docs/getting-started/setup/csp.md b/docs/getting-started/setup/csp.md index 5e32fd1e752..9d44faa38ed 100644 --- a/docs/getting-started/setup/csp.md +++ b/docs/getting-started/setup/csp.md @@ -13,7 +13,7 @@ CKEditor 5 is compatible with applications that use [<abbr title="Content S 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 * +default-src 'none'; connect-src 'self'; script-src 'self'; img-src * data:; style-src 'self' 'unsafe-inline'; frame-src * ``` ## Impact of CSP on editor features @@ -36,6 +36,9 @@ Some CSP directives have an impact on certain rich-text editor features. Here is * Displaying the {@link features/media-embed 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 {@link features/media-embed media embed} and {@link features/paste-from-office paste from Word} features. +* `style-src 'self' 'unsafe-inline'`: + * The `self` directive allows to load styles from the site's own domain. Since v42.0.0, the editor {@link getting-started/setup/css distributes its stylesheets}. If you need to load styles from some other domain, add them explicitly: `style-src https://trusted-styles.example.com;`. + * The directive `unsafe-inline` is required to make the styles of certain features work properly. For instance, you are going to need it if you want to enable such editor features as {@link features/font font} or {@link features/text-alignment text alignment} or any other feature that uses the 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.