HTML crossorigin Attribute
Description
The crossorigin attribute in HTML is used in conjunction with HTML elements that fetch resources from external sources, such as <script>, <img>, <link>, and <video> tags. This attribute enhances security and control over cross-origin resource sharing (CORS), dictating how these elements interact with resources from different origins (i.e., different domains, protocols, or ports from the one of the current page).
The primary purpose of the crossorigin attribute is to provide a mechanism for web pages to request external resources securely and in compliance with the Same-Origin Policy, which is a critical security measure in web browsers. It helps prevent malicious websites from accessing sensitive data on another domain without permission. By specifying the crossorigin attribute, developers can fine-tune how resources from different origins are requested and utilized, enhancing the security and privacy of web applications.
Syntax
<tagname crossorigin='anonymous | use-credentials'>Values
- anonymousThis value allows the resource to be fetched without sending credentials (like cookies or HTTP authentication). If the server does not provide credentials in its CORS headers (
Access-Control-Allow-Origin), the browser will treat the resource as a same-origin request, but won't send user credentials. This is the default behavior if thecrossoriginattribute is set without a value. - use-credentialsThis value permits the resource to be fetched with credentials such as cookies, client-side SSL certificates, or HTTP authentication. The server must also include the
Access-Control-Allow-Credentialsheader in its CORS response for the resource to be used successfully. This ensures that the request is made with user credentials, allowing more sensitive or personalized cross-origin requests.
Applies To
The crossorigin attribute can be used on the following html elements.
Example
<script crossorigin="anonymous" src="https://example.com/external.js"></script>Browser Support
The following table will show you the current browser support for the HTML crossorigin Attribute.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| Yes | Yes | Yes | Yes | Yes | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 29th March 2024