Skip to content

Commit c4843a8

Browse files
kemister85kemister85
authored
DOC-3147: Add crossorigin attribute to all script tags for CORS compliance. (#3762)
* DOC-3147: Add crossorigin attribute to script tags for CORS compliance. * DOC-3233: Add release notes entry for new crossorigin option, and updated script_crossorigin.adoc partial to provide examples. * DOC-3233:Refactor CORS documentation: replace script_crossorigin.adoc with crossorigin.adoc for improved clarity and organization. * DOC-3233: Update crossorigin function in release notes to match new implementaiton standard. * DOC-3147: Refactor crossorigin examples in documentation to clarify attribute handling and provide options for omitting the attribute. * DOC-3147: Fix indent issues. * DOC-3147: Update scripttag.png file to include crossorigin. * Update modules/ROOT/partials/configuration/crossorigin.adoc * Update modules/ROOT/partials/configuration/crossorigin.adoc * Update modules/ROOT/partials/configuration/crossorigin.adoc * Update modules/ROOT/partials/configuration/crossorigin.adoc * Update modules/ROOT/pages/8.0-release-notes.adoc * Update modules/ROOT/pages/editor-and-features.adoc
1 parent f1adf74 commit c4843a8

25 files changed

+144
-39
lines changed

‎modules/ROOT/images/scripttag.png‎

39.4 KB
Loading

‎modules/ROOT/pages/8.0-release-notes.adoc‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -254,6 +254,39 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
254254

255255
{productname} {release-version} also includes the following improvement<s>:
256256

257+
=== Enhanced cross-origin resource handling
258+
259+
Added a new function-based `crossorigin` configuration option that provides granular control over cross-origin resource loading. The function receives the resource URL and type (script or stylesheet) as parameters and can return 'anonymous', 'use-credentials', or undefined to control the crossorigin attribute.
260+
261+
.Example: Setting `+crossorigin="anonymous"+` to script.
262+
[source,html,subs="attributes+"]
263+
----
264+
<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
265+
----
266+
Or;
267+
268+
.Example: Setting reusable constant function.
269+
[source,js]
270+
----
271+
const crossOriginFunction = (url, resourceType) => {
272+
// Returning 'anonymous' or 'use-credentials' here would explicitly set the attribute
273+
return 'anonymous';
274+
// return 'use-credentials';
275+
// return undefined; // Omits the 'crossorigin' attribute for all resources by returning undefined
276+
};
277+
278+
tinymce.init({
279+
selector: "textarea",
280+
crossorigin: crossOriginFunction
281+
});
282+
----
283+
284+
For more details, see: xref:configure-cross-origin-resource-loading.adoc#crossorigin[crossorigin].
285+
286+
This improvement ensures consistent resource loading behavior across different deployment scenarios and provides better control over CORS settings for both scripts and stylesheets.
287+
288+
For more details, see xref:tinymce-and-cors.adoc#crossorigin[crossorigin configuration option] documentation.
289+
257290
=== Tooltips can now be closed by pressing the `escape` key.
258291
// #TINY-12054
259292

@@ -334,6 +367,7 @@ Split buttons in {productname} {release-version} now render as two independent,
334367

335368
Previously, menu items and tooltips containing three consecutive periods (`...`) were read aloud by the JAWS screen reader as "dot dot dot," which could confuse users relying on assistive technologies. To enhance accessibility, the `translate` API in {productname} {release-version} now automatically replaces three dots with the typographic ellipsis character (`…`) across all translations. This update ensures a consistent visual appearance while improving screen reader behavior, as the ellipsis character is not read aloud. The change is implemented directly in the translation function, ensuring comprehensive coverage across all languages.
336369

370+
337371
[[additions]]
338372
== Additions
339373

‎modules/ROOT/pages/basic-setup.adoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,8 @@ The following example is a basic {productname} configuration.
198198
<script
199199
type="text/javascript"
200200
src='{cdnurl}'
201-
referrerpolicy="origin">
201+
referrerpolicy="origin"
202+
crossorigin="anonymous">
202203
</script>
203204
<script type="text/javascript">
204205
tinymce.init({

‎modules/ROOT/pages/cloud-troubleshooting.adoc‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ For example:
3232

3333
[source,html,subs="attributes+"]
3434
----
35-
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
35+
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
3636
----
3737

3838
In this case, the editor will be in a **read-only** state, and a notification appears stating: **"A valid API key is required to continue using {productname}. Please alert the admin to check the current API key. Click here to learn more."**
@@ -47,7 +47,7 @@ For example: if your API is `+abcd1234+`:
4747
+
4848
[source,html,subs="attributes+"]
4949
----
50-
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
50+
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
5151
----
5252
+
5353
. Check the `+apiKey+` provided in the script tag:
@@ -82,7 +82,7 @@ For example: if your API is `+abcd1234+`:
8282

8383
[source,html,subs="attributes+"]
8484
----
85-
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin"></script>
85+
<script src="https://cdn.tiny.cloud/1/abcd1234/tinymce/{productmajorversion}/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
8686
----
8787

8888
To retrieve your API key, or to sign up for an API key, visit: link:{accountsignup}/[{cloudname}].

‎modules/ROOT/pages/editor-and-features.adoc‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,15 @@ The following example adds a script tag into the application that inserts the co
2020

2121
[source,html,subs="attributes+"]
2222
----
23-
<script src="{cdnurl}" referrerpolicy="origin"></script>
23+
<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
2424
----
2525

2626
[cols="1,2,12",options="header"]
2727
|===
2828
| |Value |Description
2929
|1 |no-api-key |Replace with your api key
3030
|2 |origin |A `+referrerpolicy+` specifies how much of the current page's URL is sent in the `+Referer+` header when the browser fetches page resources (for example, the {productname} editor). The use of the `+Referer+` header ensures API keys are only used on domains registered to their owners. We only care about the domain portion however (similar to the operation of `+Origin+` header), so for improved performance and privacy always set the `+referrerpolicy+` to `+origin+` when requesting {cloudname} resources.
31+
|3 |anonymous |the `+crossorigin="anonymous"+` attribute is required on all script tags loading {productname} from {cloudname}. This attribute ensures consistent Origin header behavior for license key validation and improves security for cross-origin script loading.
3132
|===
3233

3334
image::scripttag.png[Script Tag Description]
@@ -79,13 +80,15 @@ Migrating from a self-hosted environment to {cloudname} is easy. Remove the exis
7980

8081
NOTE: The script tag typically references `+tinymce.min.js+` hosted within the application or available at a legacy CDN.
8182

82-
Replace the script tag with the following:
83+
Replace the script tag with the following, making sure to include both required attributes (`referrerpolicy` and `crossorigin`):
8384

8485
[source,html,subs="attributes+"]
8586
----
86-
<script src="{cdnurl}" referrerpolicy="origin"></script>
87+
<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
8788
----
8889

90+
NOTE: When migrating to {cloudname}, both the `referrerpolicy="origin"` and `crossorigin="anonymous"` attributes are required for optimal performance and cross-browser functionality.
91+
8992
=== Step 2: Update custom plugin paths
9093

9194
Reference xref:editor-important-options.adoc#external_plugins[external_plugins] to ensure custom plugins or modified plugins continue to function in the {cloudname} deployment.

‎modules/ROOT/pages/editor-plugin-version.adoc‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,21 +10,21 @@ The example below shows the default way to load {productname} {productmajorversi
1010

1111
[source,html,subs="attributes+"]
1212
----
13-
<script src="{cdnurl}" referrerpolicy="origin"></script>
13+
<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
1414
----
1515

1616
To load a specific version of {productname} {productmajorversion} other than the latest release, replace the `{productmajorversion}` in the URL with the desired version. For example, to load a minor version such as {productname} `{productmajorversion}.1`, use the following URL:
1717

1818
[source,html,subs="attributes+"]
1919
----
20-
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}.1/tinymce.min.js" referrerpolicy="origin"></script>
20+
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}.1/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
2121
----
2222

2323
To load a specific patch version, replace the `{productmajorversion}` in the URL with the desired patch version. For example, to load {productname} `{productmajorversion}.1.2`, use the following URL:
2424

2525
[source,html,subs="attributes+"]
2626
----
27-
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}.1.2/tinymce.min.js" referrerpolicy="origin"></script>
27+
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}.1.2/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
2828
----
2929

3030
[TIP]
@@ -55,7 +55,7 @@ This channel deploys the latest release of {productname} that has passed our qua
5555

5656
[source,html,subs="attributes+"]
5757
----
58-
<script src="{cdnurl}" referrerpolicy="origin"></script>
58+
<script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
5959
----
6060

6161
[#{productmajorversion}-testing-release-channel]
@@ -68,7 +68,7 @@ This channel deploys the current *release candidate* for the `{productmajorversi
6868

6969
[source,html,subs="attributes+"]
7070
----
71-
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-testing/tinymce.min.js" referrerpolicy="origin"></script>
71+
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-testing/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
7272
----
7373

7474
[#{productmajorversion}-dev-release-channel]
@@ -86,7 +86,7 @@ The current version of {productname} available on the `{productmajorversion}-dev
8686

8787
[source,html,subs="attributes+"]
8888
----
89-
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-dev/tinymce.min.js" referrerpolicy="origin"></script>
89+
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/{productmajorversion}-dev/tinymce.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
9090
----
9191

9292
For more details, check out the xref:editor-and-features.adoc[{productname} editor via {cloudname}].
@@ -106,7 +106,7 @@ The `plugins.min.js` script loads every premium plugin the API key is entitled t
106106

107107
[source,html,subs="attributes+"]
108108
----
109-
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/plugins.min.js" referrerpolicy="origin"></script>
109+
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/plugins.min.js" referrerpolicy="origin" crossorigin="anonymous"></script>
110110
----
111111

112112
=== `plugins.min.js` with Exclusions for Specific Plugins
@@ -115,7 +115,7 @@ To exclude specific premium plugins from `plugins.min.js` because you are self-h
115115

116116
[source,html,subs="attributes+"]
117117
----
118-
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/plugins.min.js?mentions=sdk&powerpaste=sdk" referrerpolicy="origin"></script>
118+
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/plugins.min.js?mentions=sdk&powerpaste=sdk" referrerpolicy="origin" crossorigin="anonymous"></script>
119119
----
120120

121121
[NOTE]
@@ -131,7 +131,7 @@ The `cloud-plugins.min.js` script allows loading of specific premium plugins fro
131131

132132
[source,html,subs="attributes+"]
133133
----
134-
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/cloud-plugins.min.js?mentions&powerpaste&advcode" referrerpolicy="origin"></script>
134+
<script src="https://cdn.tiny.cloud/1/api-key/tinymce/{productmajorversion}/cloud-plugins.min.js?mentions&powerpaste&advcode" referrerpolicy="origin" crossorigin="anonymous"></script>
135135
----
136136

137137
[NOTE]

‎modules/ROOT/pages/export-to-pdf-with-jwt-authentication-nodejs.adoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ Inside the `public` folder where you created the `index.html` file add the HTML
3030
<title>TinyMCE with Export to PDF</title>
3131
<script
3232
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js"
33-
referrerpolicy="origin">
33+
referrerpolicy="origin"
34+
crossorigin="anonymous">
3435
</script>
3536
<script>
3637
tinymce.init({

‎modules/ROOT/pages/export-to-pdf-with-jwt-authentication-php.adoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Inside the `public` folder where you created the `index.html` file add the HTML
2929
<title>TinyMCE with PDF Export</title>
3030
<script
3131
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js"
32-
referrerpolicy="origin">
32+
referrerpolicy="origin"
33+
crossorigin="anonymous">
3334
</script>
3435
<script>
3536
tinymce.init({

‎modules/ROOT/pages/export-to-word-with-jwt-authentication-nodejs.adoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ Inside the `public` folder where you created the `index.html` file add the HTML
3030
<title>TinyMCE with Export to Word</title>
3131
<script
3232
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js"
33-
referrerpolicy="origin">
33+
referrerpolicy="origin"
34+
crossorigin="anonymous">
3435
</script>
3536
<script>
3637
tinymce.init({

‎modules/ROOT/pages/export-to-word-with-jwt-authentication-php.adoc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Inside the `public` folder where you created the `index.html` file add the HTML
2929
<title>TinyMCE with Word Export</title>
3030
<script
3131
src="https://cdn.tiny.cloud/1/no-api-key/tinymce/8/tinymce.min.js"
32-
referrerpolicy="origin">
32+
referrerpolicy="origin"
33+
crossorigin="anonymous">
3334
</script>
3435
<script>
3536
tinymce.init({

0 commit comments

Comments
 (0)