Subresource integrity for third-party scripts and stylesheets

What it is

MDN (cited) describes subresource integrity as a defence against a compromised third-party host: the integrity attribute holds one or more hashes, each prefixed by sha256-, sha384- or sha512-, and before executing a script or applying a stylesheet the browser hashes the fetched content and compares. It uses only the strongest algorithm present, accepts a match against any listed value for that algorithm, and on mismatch refuses the resource with a network error. It applies to <script> and to <link> with rel of stylesheet, preload or modulepreload. The W3C specification (cited) states that subresource integrity requires CORS: a cross-origin resource must be requested with the crossorigin attribute and the server must answer with Access-Control-Allow-Origin, otherwise the check cannot be performed.

Why it matters

A page that loads https://cdn.example/lib.js executes whatever that host serves, today and after the host is compromised, sold or hijacked through DNS. A hash turns "trust the host" into "trust this exact file", which is the same discipline as pinning a dependency by digest.

How to apply

• Compute the hash from the exact bytes you tested: cat lib.js | openssl dgst -sha384 -binary | openssl base64 -A (from MDN), or take the value your bundler emits.
• Pin versioned URLs only (/lib@1.2.3/lib.min.js); a "latest" URL will fail as soon as the vendor updates it, which is the feature working.
• Add crossorigin="anonymous" to every cross-origin element with integrity; without it the browser will not load the resource at all.
• Treat a hash update like a dependency update: fetch the new file, review the diff or changelog, recompute, commit.
• Watch your error tracker for the pinned resource failing to load (a script that never defines its global); a sudden wave means the vendor changed the file or someone tampered with it.
• Combine with a Content Security Policy that restricts script sources; SRI verifies content, CSP verifies origin.

Pitfalls

Resources that legitimately vary per request (tag managers, A/B scripts, personalised bundles) cannot be pinned; either self-host a fixed copy or accept the trust. Hashing a minified file after a pipeline that re-minifies it. Forgetting that a script the pinned script loads at runtime is not covered. A CDN without CORS headers, which makes every pinned load fail.