When you load JavaScript or CSS from a CDN, you’re implicitly trusting that external source. But what happens if that CDN is hacked or the file is swapped out with malicious code?
That’s where Subresource Integrity (SRI) saves the day — a simple but powerful HTML attribute that ensures the resource you load is exactly the one you expect.
What Is Subresource Integrity (SRI)?
Subresource Integrity (SRI) is a web security feature that allows browsers to verify that files (like scripts or stylesheets) fetched from a CDN haven’t been modified.
It works by adding a cryptographic hash (like SHA-384) to your HTML tag. When the browser fetches the file, it computes the file’s hash and compares it with the one declared.
If they don’t match — the file won’t load.
Why SRI Matters
Modern websites often rely heavily on external scripts — from analytics to frameworks like React, Vue, or jQuery. This introduces supply chain risks.
Here’s what SRI helps protect you against:
- Prevent supply-chain attacks: Block maliciously altered third-party scripts.
- Ensure integrity: Detect any unauthorized change in your external resources.
- Boost user trust: Protect visitors from injected or hijacked scripts.
- Simple implementation: Just a small HTML attribute offers major protection.
How to Implement SRI (with Examples)
Let’s walk through a quick example using the jQuery CDN.
Without SRI (Unsafe)
<!-- This version could be compromised -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
With SRI (Secure)
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha384-3edhP0ja6dCqViB7j9FlkG+7wE4yAi0w5gZDJ4hrRrA6TrnK9iQxDF7F1E0N6rJz"
crossorigin="anonymous">
</script>
Now, if the hosted file changes in any way — the browser refuses to execute it.
How to Generate an SRI Hash
You can easily create the hash yourself using tools like OpenSSL, Node.js, or online SRI generators.
Using OpenSSL
openssl dgst -sha384 -binary yourfile.js | openssl base64 -A
Using Node.js
const fs = require("fs");
const crypto = require("crypto");
const file = fs.readFileSync("yourfile.js");
const hash = crypto.createHash("sha384").update(file).digest("base64");
console.log(`sha384-${hash}`);
Tip: Many CDNs (like jsDelivr and CDNJS) now automatically provide the SRI hash for you.
Using SRI with CSS
SRI also works for external stylesheets:
<link
rel="stylesheet"
href="https://cdn.example.com/styles.css"
integrity="sha384-QmUeQk+qEiTzUXlRSpG5lDy7DxUbi1EZ3k5p3N1H+CxOYgXcEVuCFd7Kjqm3H+5b"
crossorigin="anonymous">
Combine SRI with Content Security Policy (CSP)
For maximum protection, use SRI together with a Content Security Policy (CSP).
CSP restricts which sources your site can load scripts or styles from.
Example CSP header:
Content-Security-Policy: script-src 'self' https://code.jquery.com; object-src 'none';
When used with SRI, even if an attacker gains access to your CDN, their modified script won’t pass the integrity check.
Best Practices for Using SRI
- Always use HTTPS along with SRI.
- Update the hash whenever you update the external file.
- Prefer SHA-384 or SHA-512 over SHA-256 for stronger security.
- Automate SRI generation with your build process (Webpack, Gulp, or npm scripts).
TL;DR
| ✅ Do This | 🚫 Avoid This |
|---|---|
Add integrity and crossorigin attributes | Linking to unverified CDNs |
| Regenerate SRI hashes after updates | Forgetting to update old hashes |
| Combine with CSP | Relying only on SRI |
Additional Resources
Final Thoughts
Subresource Integrity is one of those “small effort, big payoff” security measures.
It’s lightweight, browser-supported, and drastically improves your protection against supply-chain attacks.
Adopting SRI today makes your frontend more trustworthy, more resilient, and more professional.
Protect your users and your brand.
Contact AppsTechy today to strengthen your frontend security and stay safe from supply-chain threats.
