The crossorigin attribute on an element specifies that CORS is supported when fetching files from a third party server or domain.
CORS is a standard mechanism used to retrieve files from other domains.
Elements that accept this attribute include <img>, <link>, <script>, <audio>, and <video>.
An <img> with a crossorigin attribute.
With this attribute, the image supports CORS. No credentials are sent when the image file is retrieved.
<img crossorigin="anonymous"
src="/img/html/vangogh.jpg"
alt="Van Gogh, self-portrait">
Note: the example image is not retrieved from a third party server, but you get the idea.
For additional details see our HTML img crossorigin Reference.
The crossorigin attribute specifies that the element supports CORS.
CORS stands for Cross Origin Resource Sharing.
CORS is a standard mechanism to retrieve files from a third party domain or server.
If specified, the request will be sent with or without credentials.
Note: This attribute is only relevant when the file is retrieved from a third party server. Do not use this attribute when the file is on your own server.
<tagname crossorigin>
| Value | Description |
|---|---|
| anonymous or "" or blank |
A cross-origin request will be sent without credentials and performs basic HTTP authentication.
This is the default. Note: crossorigin="anonymous", crossorigin="", and crossorigin are all the same.
|
| use-credentials | A cross-origin request will be sent with credentials, cookies, and certificate. |
The following elements accept the crossorigin attribute.
| Elements | Description | |
|---|---|---|
| <img> | Displays an image -- see example above | |
| <link> | Specifies a linked resource to the page | |
| <script> | Specifies a JavaScript code | |
| <audio> | Creates an audio player | |
| <video> | Creates a video player |
A <link> tag with a crossorigin attribute.
<link crossorigin="anonymous"
rel="stylesheet" href="/tutorial/style.css">
For additional details see our HTML link crossorigin Reference.
A <script> tag with a crossorigin attribute.
<script crossorigin="anonymous"
src="/tutorial/script-defer.js"></script>
For additional details see our HTML script crossorigin Reference.
An <audio> tag with a crossorigin attribute.
<audio crossorigin="anonymous" controls>
<source src="/media/epic.mp3" type="audio/mpeg">
<source src="/media/epic.wav" type="audio/wav">
</audio>
For additional details see our HTML audio crossorigin Reference.
A <video> tag with a crossorigin attribute.
<video crossorigin="anonymous" width="320" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
</video>
For additional details see our HTML video crossorigin Reference.
Here is when crossorigin support started for each browser:
 Chrome
|
30.0 | Sep 2013 |
 Firefox
|
13.0 | Jun 2012 |
 IE/Edge
|
18.0 | Jan 2020 |
 Opera
|
12.0 | Jun 2012 |
 Safari
|
1.0 | Jan 2003 |
