HTML crossorigin Attribute
The HTML crossorigin attribute controls how certain external resources are requested using Cross-Origin Resource Sharing (CORS). It can request a resource without cross-origin credentials or include credentials when the server permits them.
Syntax
The crossorigin attribute is added to an element that retrieves a resource. Its value determines the credentials mode used for the request.
<img src="https://example.com/image.jpg" alt="Example" crossorigin="anonymous">The resource server must provide the appropriate CORS response headers for cross-origin access to succeed.
Attribute Values
The crossorigin attribute is an enumerated attribute with two keywords. An empty or invalid value uses the anonymous state.
| Value | Description |
|---|---|
anonymous |
Uses CORS without including cross-origin credentials. Credentials can still be sent for same-origin requests. |
use-credentials |
Uses CORS and includes credentials with the request. |
| Empty or invalid value | Uses the same state as anonymous. |
If the attribute is omitted, the element uses its normal behavior without selecting one of these CORS settings through the attribute.
Elements That Use the crossorigin Attribute
The crossorigin attribute is currently used with the <audio>, <img>, <link>, <script>, and <video> elements.
| Element | Description |
|---|---|
<audio> |
Controls the CORS settings used when fetching an audio resource. |
<img> |
Controls CORS when fetching an image, including when cross-origin image data will be used with a canvas. |
<link> |
Controls CORS settings for applicable external resources loaded through the link. |
<script> |
Controls CORS-related behavior and credentials when scripts or module resources are fetched. |
<video> |
Controls the CORS settings used when fetching a video resource. |
The anonymous Value
The anonymous value places the request in CORS mode while using the same-origin credentials mode. Cross-origin credentials such as cookies and HTTP authentication information are not included.
<img src="https://example.com/image.jpg" alt="Example" crossorigin="anonymous">This is commonly used when a cross-origin resource needs CORS access but does not require credentials.
The use-credentials Value
The use-credentials value places the request in CORS mode and uses the include credentials mode.
<img src="https://example.com/private-image.jpg" alt="Example" crossorigin="use-credentials">The remote server must explicitly permit credentialed cross-origin requests. Otherwise, the CORS request will fail.
Cross-Origin Images
The crossorigin attribute is especially useful when an image from another origin needs to be used with the <canvas> element.
<img src="https://example.com/image.jpg" alt="Example" crossorigin="anonymous">Without successful CORS authorization, drawing a cross-origin image onto a canvas can prevent scripts from reading data back from that canvas.
Cross-Origin Scripts
The crossorigin attribute can also affect external scripts. For classic scripts, CORS can determine whether detailed error information is available when a script is loaded from another origin.
<script src="https://example.com/example.js" crossorigin="anonymous"></script>JavaScript module scripts use CORS for cross-origin fetching, and crossorigin can control the credentials mode used for those requests.
Server Requirements
Adding crossorigin does not by itself grant access to a resource from another origin. The server hosting the resource must return CORS headers that permit the requesting origin.
When use-credentials is used, the server must also permit credentialed requests. The browser enforces these CORS requirements.
Common Mistakes
Do not assume that adding crossorigin="anonymous" automatically makes every external resource available through CORS. The resource server must also provide an appropriate CORS response.
Do not use use-credentials unless credentials are actually required and the remote server is configured to accept credentialed CORS requests.
Do not confuse crossorigin with a security permission that overrides the same-origin policy. It selects how the browser performs a CORS-related request; the server still determines whether cross-origin access is allowed.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The crossorigin attribute and its established uses are widely supported in current core browsers. Compatibility details can vary depending on the element and resource being requested.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the crossorigin Attribute
The example uses crossorigin="anonymous" on an image. The attribute tells the browser to use CORS when requesting the resource without including cross-origin credentials.
Summary
The HTML crossorigin attribute controls CORS settings for resources loaded by certain HTML elements. The anonymous value uses CORS without cross-origin credentials, while use-credentials includes credentials. Successful cross-origin access also depends on the CORS response provided by the server hosting the resource.