The TinyMCE Cross-Origin Resource Sharing guide

crossorigin

The crossorigin option controls how TinyMCE handles cross-origin resource loading. This option accepts a function that determines the appropriate crossorigin attribute value based on the resource being loaded.

Type: (url: string, resourceType: 'script' | 'stylesheet') => string

  • For Tiny Cloud: A function that returns 'anonymous' for cloud resources and omits the attribute for other resources.

  • For self-hosted: A function that omits the crossorigin attribute for all resources.

Possible values: A function that returns one of:

  • 'anonymous' - Sets crossorigin="anonymous".

  • 'use-credentials' - Sets crossorigin="use-credentials".

  • undefined - Omits the crossorigin attribute entirely.

Example: Basic configuration

const crossOriginFunction = (url, resourceType) => {
    // Returning 'anonymous' or 'use-credentials' here would explicitly set the attribute
    return 'anonymous';
    // return 'use-credentials';
    // return undefined; // Omits the 'crossorigin' attribute for all resources by returning undefined
};

tinymce.init({
  selector: "textarea",
  crossorigin: crossOriginFunction
});

When loading TinyMCE from Tiny Cloud:

  • The initial script tag must include crossorigin="anonymous" and referrerpolicy="origin".

  • Example:

    <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>

  • The crossorigin function runs for both scripts and stylesheets loaded by TinyMCE.

  • Using 'anonymous' sends the Origin header without credentials.

  • Using 'use-credentials' sends the Origin header with credentials (not recommended for most cases).

  • Returning undefined means no crossorigin attribute will be set, as it omits the attribute entirely for the resource.

  • For stylesheet resources, the content_css_cors option takes precedence over the crossorigin function. See: content_css_cors for details about cross-origin stylesheet loading.

For more details on the crossorigin attribute, see: MDN Web Docs - HTML attribute: crossorigin.

referrer_policy

Used for setting the level of referrer information sent when loading plugins and CSS. Referrer policies can be used to:

  • Improve the privacy of end-users.

  • Assist with server-side filtering of cross-origin requests for TinyMCE resources.

Type: String

For a list of valid referrer policies (directives), see: MDN Web Docs - Referrer-Policy.

Example: using referrer_policy

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  referrer_policy: 'origin'
});

content_css_cors

When content_css_cors is set to true, the editor will add a crossorigin="anonymous" attribute to the link tags that the StyleSheetLoader uses when loading the content_css. This allows you to host the content_css on a different server than the editor itself.

Type: Boolean

Default value: false

Possible values: true, false

Example: using content_css_cors

// File: http://domain.mine/mysite/index.html

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  content_css: 'http://www.somewhere.example/mycontent.css',
  content_css_cors: true
});

editimage_cors_hosts

The Image Editing plugin cannot work with images from another domain due to security measures imposed by browsers on so called cross-origin HTTP requests. To overcome these constraints, Cross-Origin Resource Sharing (CORS) must be explicitly enabled on the specified domain(s) (for more information check HTTP access control).

An array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via the editimage_cors_hosts option.

Each string in the array must be in the format of example.com. Do not include protocols (for example, http://, https://) or any trailing slashes in your domains.
editimage_cors_hosts is not required when enabling this plugin via Tiny Cloud.

Type: Array

Default value: []

Example: editimage_cors_hosts

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'editimage',
  plugins: 'image editimage',
  editimage_cors_hosts: [ 'example.com', 'example.net' ]
});

export_cors_hosts

The Export plugin cannot work with images from another domain due to security measures imposed by browsers on so called cross-origin HTTP requests. To overcome these constraints, Cross-Origin Resource Sharing (CORS) must be explicitly enabled on the specified domain(s) (for more information check HTTP access control).

An array of supported domains for the images (with CORS enabled on them) can be supplied to TinyMCE via the export_cors_hosts option.

Each string in the array must be in the format of example.com. Do not include protocols (for example, http://, https://) or any trailing slashes in your domains.
export_cors_hosts is not required when enabling this plugin via Tiny Cloud.

Type: Array

Default value: []

Example: export_cors_hosts

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  toolbar: 'export',
  plugins: 'image export',
  export_cors_hosts: [ 'example.com', 'example.net' ]
});