The TinyMCE Content Security Policy guide
Configuring Content Security Policy (CSP) for TinyMCE
TinyMCE can be used with a CSP header. When using a CSP, the following directives are required for TinyMCE to function:
Policy directives | Reason |
---|---|
|
Scripts are sometimes loaded as script element with an src attribute. |
|
XMLHttpRequest is required by some services such as spellchecking and PowerPaste. |
|
Images within the editor are sometimes base64 encoded, blob URLs, or proxied through the Tiny Cloud service. |
|
Styles are used for inline formatting (such as underline, font colors, etc.) and the positioning of user interface elements. |
|
Fonts are used for icons in the UI and is loaded from external files. |
These directives will prevent all content loading from external sources. To allow content from specific sources, add the source domains to the relevant directives. For example, to allow YouTube videos:
To allow content from any source, use the (*) wildcard. Allowing all sources (using *) negates the security policy for the source type. For example:
For information on Content Security Policies, see: MDN Web Docs - Content Security Policy (CSP). |
When using the Tiny Cloud, use this CSP header:
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self' *.tinymce.com *.tiny.cloud; connect-src 'self' *.tinymce.com *.tiny.cloud blob:; img-src 'self' *.tinymce.com *.tiny.cloud data: blob:; style-src 'self' 'unsafe-inline' *.tinymce.com *.tiny.cloud; font-src 'self' *.tinymce.com *.tiny.cloud;"
>
When self-hosting TinyMCE from a local domain, use this CSP header (excludes the *.tiny.cloud domain):
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none'; script-src 'self'; connect-src 'self' blob:; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; font-src 'self';"
>