HTML crossorigin Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

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 the crossorigin attribute 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-Credentials header 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

Example

HTML

&lt;script crossorigin="anonymous" src="https://example.com/external.js"&gt;&lt;/script&gt;

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML crossorigin attribute. Hover over a browser icon to see the version that first introduced support for this HTML attribute.