HTML crossorigin Attribute

Introduction

The crossorigin attribute is a valuable feature in HTML that controls how a resource — such as a script, stylesheet, font, image, or media file — is fetched when it comes from a different origin than your page. It enables Cross-Origin Resource Sharing (CORS) so the browser can use the resource safely in APIs like <canvas>, WebGL, and font loading.

What You’ll Learn

Purpose of crossorigin

The primary purpose of the crossorigin attribute is to opt into CORS when loading a cross-origin resource. CORS is a browser security mechanism that lets servers declare which origins may read their responses. Without CORS, the browser may still display an image or run a script, but JavaScript may be blocked from inspecting the resource (for example, a tainted canvas).

📝 Syntax

Add crossorigin to supported elements loading cross-origin URLs:

<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>



<link rel="stylesheet" href="https://cdn.example.com/style.css" crossorigin="anonymous">



<img src="https://cdn.example.com/photo.jpg" alt="Photo" crossorigin="anonymous">

Syntax Rules

• Only meaningful for cross-origin URLs (different scheme, host, or port).
• Empty attribute crossorigin or crossorigin="" means anonymous.
• JavaScript property name is crossOrigin (capital O).
• The remote server must respond with appropriate CORS headers or the resource may fail to load for CORS purposes.

💎 Values

The crossorigin attribute accepts these CORS settings:

• anonymous (or empty) — Fetch with CORS but do not send cookies, client certificates, or HTTP authentication credentials.
• use-credentials — Include credentials such as cookies with the cross-origin request. The server must respond with Access-Control-Allow-Credentials: true and a specific allowed origin (not *).

<!-- Anonymous CORS (most common) -->

<script src="https://cdn.example.com/lib.js" crossorigin="anonymous"></script>



<!-- Shorthand for anonymous -->

<script src="https://cdn.example.com/lib.js" crossorigin></script>



<!-- Send cookies / credentials -->

<img src="https://api.example.com/avatar.jpg" alt="Avatar" crossorigin="use-credentials">

Applicable Elements

When do you need crossorigin?

Examples Gallery

Script, font preload, image, and JavaScript crossOrigin examples.

<script src="https://example.com/scripts/app.js" crossorigin="anonymous"></script>

<link rel="preload" href="https://cdn.example.com/font.woff2" as="font" type="font/woff2" crossorigin>

<img src="https://cdn.example.com/photo.jpg" alt="Photo" crossorigin="anonymous" id="photo">



<canvas id="c" width="200" height="133"></canvas>

<script>

  var img = document.getElementById("photo");

  img.onload = function () {

    var ctx = document.getElementById("c").getContext("2d");

    ctx.drawImage(img, 0, 0);

  };

</script>

<script>

  var script = document.createElement("script");

  script.crossOrigin = "anonymous";

  script.src = "https://example.com/scripts/app.js";

  document.body.appendChild(script);

</script>

var script = document.createElement("script");

script.crossOrigin = "anonymous";

script.src = "https://example.com/scripts/app.js";

document.body.appendChild(script);

♿ Accessibility & UX

• Fallback content — If a CORS-protected script or font fails to load, ensure users still get readable text and functional UI.
• Alt text on images — crossorigin does not replace meaningful alt descriptions.
• Don’t block critical CSS — Misconfigured CORS on stylesheets can leave pages unstyled; test CDN headers.
• Error monitoring — CORS failures may appear as network errors in DevTools; log them in production apps.
• Performance — Failed font preloads without matching crossorigin waste bandwidth.

💡 Best Practices

• Use the crossorigin attribute when loading resources from different origins to enable proper CORS behavior, especially for fonts, canvas, and authenticated assets.
• Choose anonymous for public CDN files and use-credentials only when cookies or HTTP auth must be sent.
• Verify CORS headers on the server; the HTML attribute alone is not enough.