HTML crossorigin Attribute

The crossorigin attribute on an element specifies that CORS is supported when fetching files from a third party server or domain. Elements that accept this attribute include <img>, <link>, <script>, <audio>, and <video>.

Example

#

A crossorigin attribute on an <img> element.
With this attribute, the image supports CORS. No credentials are sent when the image file is retrieved.

Van Gogh, self-portrait
<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.


Using crossorigin

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.


Syntax

<tagname crossorigin>

Values

#

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.

Elements that accept crossorigin

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

<link> with crossorigin

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.


<script> with crossorigin

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.


<audio> with crossorigin

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.


<video> with crossorigin

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.


Browser support

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

You may also like



Guides