Skip to content

Commit

Permalink
Merge pull request #17075 from ckeditor/fix-csp
Browse files Browse the repository at this point in the history
Docs: Fix `style-src` entry in the CSP doc. Closes #17074
  • Loading branch information
Witoso authored Sep 11, 2024
2 parents bddd2b3 + 182b8d6 commit 129ba4f
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion docs/getting-started/setup/csp.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ CKEditor&nbsp;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
Expand All @@ -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.
Expand Down

0 comments on commit 129ba4f

Please sign in to comment.