Subresource Integrity (SRI) | HAHWUL
A guide to understanding and implementing Subresource Integrity (SRI) for enhanced web security.
Subresource Integrity (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.
This article explains what SRI is, why it’s needed, how it works, and how to implement it.
What is SRI?
SRI is a W3C specification that allows web developers to ensure that resources hosted on third-party servers (like CDNs) have not been tampered with. By providing a cryptographic hash (integrity metadata) for a resource, the browser can verify that the fetched resource matches the expected hash before executing it. If the resource does not match, the browser will refuse to load it, preventing potential attacks.
graph LR
subgraph Server
A[Generate resource hash and
embed in HTML 'integrity' attribute]
end
subgraph Browser
B[Download resource from CDN] --> C[Calculate hash from
the downloaded resource]
C --> D{Compare hashes}
end
A --> B
D -- Match --> E[ Execute script]
D -- Mismatch --> F[ Block script & throw error]
Why is SRI needed?
Websites often rely on Content Delivery Networks (CDNs) to serve common files like JavaScript libraries and CSS frameworks. This improves performance and availability. However, if a CDN is compromised, malicious actors could modify these files to inject malicious code into websites that use them. This could lead to various attacks, such as data theft or a complete site takeover.
SRI mitigates this risk by ensuring that the browser only executes code that matches the developer-provided integrity hash.
How does SRI work?
SRI works by using the integrity attribute on and elements. This attribute contains one or more base64-encoded cryptographic hashes.
The integrity attribute
The integrity attribute’s value is a string containing at least one hash. Multiple hashes can be provided, separated by whitespace. Each hash consists of a prefix indicating the hash algorithm (e.g., sha256, sha384, sha512), followed by a hyphen, and then the base64-encoded hash value.
Example: sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC
Hash generation
The most commonly used hash algorithms for SRI are SHA-256, SHA-384, and SHA-512. SHA-384 is generally recommended as a good balance between security and performance.
Browser verification process
When a browser encounters a or element with an integrity attribute, it performs the following steps:
- It fetches the resource from the specified URL.
- It calculates the cryptographic hash of the fetched resource using one of the algorithms specified in the
integrityattribute. Browsers will attempt to use the strongest algorithm listed if multiple are provided. - It compares the calculated hash with the hash provided in the
integrityattribute. - If the hashes match, the resource is executed or applied.
- If the hashes do not match, the browser refuses to execute or apply the resource and typically logs an error in the console.
How to implement SRI?
Implementing SRI is straightforward. You need to add the integrity attribute to your and tags that reference external resources.
Examples
For a JavaScript file:
<script src="https://example.com/library.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
crossorigin="anonymous">script>
For a CSS file:
<link href="https://example.com/style.css"
rel="stylesheet"
integrity="sha384-AbcDEfGhIjKlMnOpQrStUvWxYz1234567890AbcDEfGhIjKlMnOpQrSt="
crossorigin="anonymous">
Note the crossorigin="anonymous" attribute. For SRI to work with resources fetched from a third-party origin, the resource must be served with CORS (Cross-Origin Resource Sharing) headers that allow the resource to be shared with your origin (e.g., Access-Control-Allow-Origin: *). The crossorigin="anonymous" attribute tells the browser to make a CORS request without sending credentials (cookies, client-side SSL certificates, or HTTP authentication).
SRI Hash Generation Tools
You can generate SRI hashes in several ways:
Advantages of SRI
- Protection against CDN compromise: SRI ensures that even if a CDN is breached and files are modified, your website will not load the tampered resources.
- Increased trust: It provides an additional layer of security, increasing the trustworthiness of your website.
- Simple implementation: Adding the
integrityattribute is relatively easy.
Limitations of SRI
- Dynamic content: SRI is not suitable for resources that change frequently or are dynamically generated, as the hash would need to be updated every time the content changes.
- Not a replacement for HTTPS: SRI protects against a specific type of attack (resource modification on a third-party server). It does not replace the need for HTTPS, which encrypts the communication channel and protects against man-in-the-middle attacks.
- Browser support: While most modern browsers support SRI, older browsers might not. However, these browsers will simply ignore the
integrityattribute and load the resource without verification, so it doesn’t break functionality for them. - Requires CORS: For cross-origin resources, the server hosting the resource must include appropriate CORS headers.
Conclusion
Subresource Integrity is a valuable security feature that helps protect websites from attacks originating from compromised third-party hosts. By verifying the integrity of external resources, SRI adds a crucial layer of defense against malicious code injection. While it has some limitations, its ease of implementation and significant security benefits make it a recommended practice for any website that relies on external resources.
Source link
![[tl;dr sec] #284 - Google Cloud CISO Interview, AWS Threat Technique Catalog, Finding Secrets with AI](https://cybernoz.com/wp-content/uploads/2025/06/tldr-sec-284-Google-Cloud-CISO-Interview-AWS-Threat.png "[tl;dr sec] #284 - Google Cloud CISO Interview, AWS Threat Technique Catalog, Finding Secrets with AI 2")
