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

script-src 'self' *.tinymce.com *.tiny.cloud;

Scripts are sometimes loaded as script element with an src attribute.

connect-src 'self' *.tinymce.com *.tiny.cloud blob:;

XMLHttpRequest is required by some services such as spellchecking and PowerPaste.

img-src 'self' *.tinymce.com *.tiny.cloud data: blob:;

Images within the editor are sometimes base64 encoded, blob URLs, or proxied through the Tiny Cloud service.

style-src 'self' 'unsafe-inline' *.tinymce.com *.tiny.cloud;

Styles are used for inline formatting (such as underline, font colors, etc.) and the positioning of user interface elements.

font-src 'self' *.tinymce.com *.tiny.cloud;

Fonts are used for icons in the UI and is loaded from external files.

There is a hardened approach to CSP, commonly known as strict CSP. A strict CSP:

  1. uses a nonce for all <script> elements;

  2. regenerates each nonce on every page load;

  3. refactors inline event handlers such that they are added from a JavaScript block; and

  4. does not allow the unsafe-inline value in any directive.

However, TinyMCE currently requires the unsafe-inline value in the style-src directive to present content other than plain-text.

As a consequence, running TinyMCE from within a strict CSP configuration is not currently supported.

Also, the required directives documented above prevent any 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:

media-src 'self' *.youtube.com;

To allow content from any source, use the (*) wildcard. Allowing all sources (using *) negates the security policy for the source type. For example:

media-src *;

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';"
>

Content Security Policy related options

content_security_policy

This option allows a custom content security policy to be set for the editor’s iframe contents.

Type: String

Example: Using content_security_policy

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_security_policy: "default-src 'self'"
});