---
title: "The TinyMCE Cross-Origin Resource Sharing guide"
description: "Information and options related to using TinyMCE with Cross-Origin Resource Sharing (CORS)"
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-cors/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/tinymce-and-cors/index.md"
version: "latest"
last_updated: "2025-09-17T04:43:47Z"
tokens: 1436
---
# The TinyMCE Cross-Origin Resource Sharing guide

## Cross-Origin Resource Sharing related options

### `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

```js
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
});
```

> **Important:** When loading TinyMCE from Tiny Cloud:
> 
> - The initial script tag must include `crossorigin="anonymous"` and `referrerpolicy="origin"`.
> - Example:
> 
> ```html
> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
> ```

> **Tip:**
> - 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](../add-css-options/#content_css_cors) for details about cross-origin stylesheet loading.
For more details on the crossorigin attribute, see: [MDN Web Docs - HTML attribute: crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy).

#### Example: using `referrer_policy`

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

### `content_css_cors`

> **Important:** This option has been marked as **deprecated**. It will be completely removed in the upcoming TinyMCE 9.0 release. As an alternative, we recommend using [`crossorigin`](#crossorigin) instead.
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`

```js
// 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)).

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

> **Note:** 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.

> **Note:** `editimage_cors_hosts` is **not** required when enabling this plugin via [Tiny Cloud](../editor-and-features/).
**Type:** `Array`

**Default value:** `[]`

#### Example: `editimage_cors_hosts`

```js
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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)).

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

> **Note:** 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.

> **Note:** `export_cors_hosts` is **not** required when enabling this plugin via [Tiny Cloud](../editor-and-features/).
**Type:** `Array`

**Default value:** `[]`

#### Example: `export_cors_hosts`

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