crossorigin

Controls CORS mode for external resources. Required for fonts, enables full error reporting for scripts, and prevents canvas tainting from cross-origin images.

Overview

The crossorigin attribute sets the CORS (Cross-Origin Resource Sharing) mode for requests to external origins. It controls whether the browser sends credentials with the request and whether the response data is accessible to JavaScript.

Without this attribute, cross-origin resources load in "no-cors" mode: the browser fetches them but restricts access to their contents. With it, the browser makes a CORS request and the remote server must respond with appropriate Access-Control-Allow-Origin headers.

Values

Value	Credentials Sent	Behavior
`anonymous`	No	CORS request without cookies, client certs, or auth headers
`use-credentials`	Yes	CORS request with cookies and auth headers. Server must respond with `Access-Control-Allow-Credentials: true`.
`""` (empty / boolean)	No	Same as `anonymous`. Writing just `crossorigin` is equivalent.

Applies to: <script>, <link>, <img>, <audio>, <video>

Why Fonts Require crossorigin

The CSS @font-face specification requires CORS for cross-origin font files. Unlike images or scripts, fonts will not load at all from another origin unless the request uses CORS mode. This means crossorigin="anonymous" is mandatory on any <link rel="preload" as="font"> or stylesheet that loads cross-origin fonts.

<link rel="preload" href="https://fonts.gstatic.com/s/inter/v13/Inter.woff2" as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter" />

If you forget crossorigin, the preloaded font and the stylesheet's font request will be treated as separate fetches (one CORS, one no-cors), wasting bandwidth and delaying text rendering.

Error Reporting for Scripts

Cross-origin scripts loaded without crossorigin report errors as the generic message "Script error." with no filename, line number, or stack trace. This is a browser security measure to prevent information leakage. Adding crossorigin="anonymous" unlocks full error details.

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

Canvas Tainting

When a cross-origin image is drawn onto a <canvas>, the canvas becomes "tainted" and you can no longer read its pixel data. Adding crossorigin="anonymous" to the image prevents tainting, provided the server sends the correct CORS headers.

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

<img id="photo" src="https://cdn.example.com/photo.jpg" alt="Photo" crossorigin="anonymous" /> <script> const img = document.getElementById('photo'); img.addEventListener('load', () => { const canvas = document.createElement('canvas'); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); // Without crossorigin, this line throws a SecurityError const dataUrl = canvas.toDataURL('image/png'); }); </script>

anonymous vs use-credentials

Almost all use cases call for anonymous. Use use-credentials only when the server requires authentication (cookies, client certificates) to serve the resource and is configured to accept credentialed CORS requests.

<script src="https://cdn.example.com/lib.js" crossorigin="anonymous"></script>  <script src="https://private-cdn.example.com/internal.js" crossorigin="use-credentials"></script>  <img src="https://cdn.example.com/photo.jpg" alt="Photo" crossorigin />

Security Considerations

The crossorigin attribute does not bypass the same-origin policy on its own. The remote server must opt in by sending Access-Control-Allow-Origin headers. If the server does not support CORS, adding crossorigin will cause the resource to fail to load entirely — the browser blocks the response rather than falling back to no-cors mode.

Limitations

Server must support CORS: Adding crossorigin to a resource whose server does not send CORS headers will break the load, not fix it.
Caching mismatch: A resource fetched with and without CORS mode produces different cache entries. Preloading a font with crossorigin but loading the stylesheet without it causes a double fetch.
use-credentials is strict: The server cannot respond with Access-Control-Allow-Origin: * when credentials are used — it must echo the exact origin.
Same-origin resources ignore it: The attribute has no effect on resources served from the same origin.