crossorigin Attribute with SRI

The crossorigin Attribute and SRI

When loading resources from a different origin (domain), the crossorigin attribute is required for SRI to function. Without it, the browser treats the response as opaque and cannot access its content to compute the hash.

Why crossorigin Is Needed

Browsers enforce the Same-Origin Policy (SOP) by default. When a <script> tag loads a file from a different origin, the browser downloads and executes it, but does not expose the response body to the page. SRI needs access to the raw bytes to compute the hash. The crossorigin attribute triggers a CORS request, which — if the server responds with appropriate Access-Control-Allow-Origin headers — gives the browser permission to read the response body.

crossorigin Values

<!-- Most common: no credentials sent -->
<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

<!-- With credentials (cookies, HTTP auth) -->
<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-..."
  crossorigin="use-credentials"
></script>

• anonymous — sends a CORS request without credentials. The CDN must respond with Access-Control-Allow-Origin: * or the specific origin. This is the correct choice for public CDNs.
• use-credentials — sends cookies and HTTP authentication with the CORS request. The CDN must respond with Access-Control-Allow-Origin: <specific-origin> (not *) and Access-Control-Allow-Credentials: true. Used for private CDNs behind authentication.

Common Pitfall: Missing crossorigin

The most common SRI implementation error is forgetting the crossorigin attribute:

<!-- BROKEN: SRI will always fail for cross-origin resources -->
<script
  src="https://cdn.example.com/lib.js"
  integrity="sha384-..."
></script>

Without crossorigin, the browser cannot read the response body. It will report an integrity mismatch in the console even though the file is unmodified.

Same-Origin Resources

For resources loaded from your own domain, the crossorigin attribute is optional. The browser can always access same-origin response bodies:

<!-- Same-origin: crossorigin not required -->
<script
  src="/js/app.js"
  integrity="sha384-..."
></script>

CDN CORS Configuration

All major public CDNs are configured to send Access-Control-Allow-Origin: *, which is why crossorigin="anonymous" works universally. If you host your own CDN or use a private CDN, ensure the CORS headers are properly configured.