lowWeb Security

Missing Subresource Integrity on CDN Scripts Enables Supply Chain Attacks

What Is This Vulnerability?

Subresource Integrity (SRI) is a browser feature that lets you verify that scripts and stylesheets loaded from third-party CDNs have not been tampered with. Without SRI hashes on your script and link tags, a compromised or hijacked CDN can serve modified files that inject malicious code into every page that loads them.

Why It Happens

CDN-hosted libraries are convenient and fast, so developers copy script tags from documentation or package sites without adding integrity attributes. SRI hashes must be regenerated whenever the library version changes, which adds friction to the update process. Many teams are unaware of SRI or consider the CDN compromise risk to be low.

Example Code

Vulnerableapp/layout.tsx
<head>
  <script
    src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
  ></script>
  <link
    rel="stylesheet"
    href="https://cdn.example.com/styles/main.css"
  />
</head>
Fixedapp/layout.tsx
<head>
  <script
    src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
    integrity="sha384-oBLEEqfJPxBP4UD3xNb4290CKGM2sFKklPOERazkjBILJGcift3K6NBA2kNKqKN"
    crossorigin="anonymous"
  ></script>
  <link
    rel="stylesheet"
    href="https://cdn.example.com/styles/main.css"
    integrity="sha384-abc123def456examplehashvalue"
    crossorigin="anonymous"
  />
</head>

How Hackers Exploit It

An attacker compromises a CDN, either through a direct breach, DNS hijacking, or a man-in-the-middle attack on the CDN's origin. They modify the hosted JavaScript file to include a keylogger, credential harvester, or cryptocurrency miner. Every website loading that script without SRI will execute the malicious version, potentially affecting millions of users.

How to Fix It

Add integrity attributes to all script and link tags that load resources from third-party CDNs. Generate the hash using the sha384 algorithm: run shasum -b -a 384 file.js | awk '{ print $1 }' | xxd -r -p | base64 or use an online SRI hash generator. Always include the crossorigin='anonymous' attribute alongside the integrity hash. Automate hash generation in your build pipeline.

Frequently Asked Questions

What happens if the SRI hash does not match?
The browser refuses to execute the script or apply the stylesheet. This protects your users from tampered files but means the resource will not load. Your application should handle this gracefully, for example by showing a degraded experience or loading a fallback from your own origin.
Do I need SRI for scripts hosted on my own domain?
SRI is primarily designed for third-party resources. Scripts served from your own origin are already under your control, so SRI adds less value. However, if your static assets are served from a separate CDN subdomain, SRI provides an extra layer of protection.
How do I update SRI hashes when a library version changes?
Regenerate the hash for the new file and update the integrity attribute. Many package managers and build tools can automate this. If you use a lockfile-based workflow with npm or yarn, consider self-hosting critical libraries to eliminate CDN dependency entirely.
Does SRI work with dynamically loaded scripts?
Yes. When creating script elements in JavaScript, set the integrity and crossOrigin properties on the element before appending it to the DOM. The browser will verify the hash before executing the script, just like it does for declarative script tags.

Related Security Topics

Check Your Code for This Vulnerability

Run a free scan to check if your site is affected by missing subresource integrity on cdn scripts enables supply chain attacks.