CSS Portal

HTML crossorigin Attribute

☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee
crossorigin
HTML AttributeThis attribute is supported by all modern browsers.
Updated 29th March 2024

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

&lt;script crossorigin="anonymous" src="https://example.com/external.js"&gt;&lt;/script&gt;
Open in 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.

This attribute is supported by all modern browsers.

Desktop

Chrome
Edge
Firefox
Opera
Safari

Tablets & Mobile

Chrome Android
Firefox Android
Opera Android
Safari iOS
Samsung Internet
Android WebView
-
Supported Unknown Not supported
☕
Enjoying this site?

Help keep it running with a small coffee donation. Every bit of support is appreciated!

Buy us a coffee