crossorigin

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

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.

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.

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.

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.

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.