Subresource Integrity (SRI)
A browser security feature that verifies fetched resources like scripts and stylesheets have not been tampered with by comparing them against a known cryptographic hash.
Description
Subresource Integrity (SRI) is a W3C specification that allows browsers to verify that resources fetched from CDNs or third-party hosts have not been altered. When an HTML element includes an integrity attribute containing a cryptographic hash of the expected resource content, the browser computes the hash of the downloaded file and compares it. If the hashes don't match, the browser refuses to execute or apply the resource, preventing the use of compromised or malicious files.
SRI is particularly important for resources loaded from third-party CDNs. If an attacker compromises a CDN or performs a man-in-the-middle attack, they could modify popular JavaScript libraries to include malicious code that would execute on every site using that CDN. With SRI, the tampered file would fail the hash check and be blocked. This is a real-world concern -- the 2018 British Airways breach and the 2019 Codecov supply chain attack both involved compromised third-party scripts.
Implementing SRI involves generating the hash of the resource file using SHA-256, SHA-384, or SHA-512, then adding the integrity attribute to script and link tags. The crossorigin attribute should also be set to 'anonymous' for cross-origin resources. Build tools and CDN providers often generate SRI hashes automatically. For self-hosted resources that change with each deployment, SRI may be unnecessary since you control the server, but it adds defense-in-depth against server compromise.
Prompt Snippet
Add integrity attributes to all script and link tags loading from third-party CDNs: <script src="https://cdn.example.com/lib.js" integrity="sha384-{hash}" crossorigin="anonymous">. Generate SRI hashes using openssl dgst -sha384 -binary file.js | openssl base64 -A or the srihash.org tool. Configure your build pipeline (Webpack via html-webpack-plugin SRI option, or Vite with vite-plugin-sri) to auto-generate integrity hashes for all bundled assets. Set a Content-Security-Policy require-sri-for directive for script and style resources. When updating CDN-hosted dependencies, regenerate and verify hashes as part of the upgrade checklist.Tags
Related Terms
Content Security Policy (CSP)
An HTTP response header that allows fine-grained control over which resources a browser is allowed to load and execute for a page.
Dependency Vulnerability Scanning
Automated scanning of third-party dependencies to identify known vulnerabilities before they can be exploited in production.
Security Headers
HTTP response headers that instruct browsers to enable security mechanisms, reducing the attack surface of web applications.