Chapter 69: Subresource Integrity (SRI) & Referrer Policy

SRI for Dynamically Injected Scripts

Programmatic subresource integrity, DOM script element creation, Fetch API integrity checks, and resilient multi-CDN runtime fallbacks.

LEARNING OBJECTIVES ⌵

Programmatically create <script> and <link> elements with integrity and crossOrigin properties.
Understand the strict order-of-operations required when configuring DOM elements before appending to the document.
Leverage the Fetch API's native integrity option for verified dynamic asset fetching.
Build a production-grade multi-CDN fallback loader that traps SRI mismatches and attempts secondary mirror CDNs.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Imagine a modern automated fulfillment center. Most standard packages enter through the main front gate (static HTML <script> tags written in the HTML template).

However, during peak traffic hours, the warehouse manager dynamically dispatches specialized courier drones (JavaScript dynamic loaders) to fetch extra tools on-demand.

+---------------------------------------------------------------------------------------+
|                          DYNAMIC RUNTIME DISPATCH INSPECTION                          |
+---------------------------------------------------------------------------------------+
|                                                                                       |
|   1. Create Drone               2. Attach Security Seal         3. Launch Drone       |
|   const script =                script.integrity = 'sha384..'   document.head         |
|   document.createElement()      script.crossOrigin = 'anon..'   .appendChild(script)  |
|                                                                                       |
|            🤖                             🏷️                            🚀            |
|       [New Script]                [Cryptographic Hash]               [To Network]     |
|                                                                                       |
|   ⚠️ CRITICAL RULE: You must attach the security seal BEFORE sending the drone       |
|      out the door. If you launch the drone before attaching the seal, the            |
|      inspection checkpoint at the gate will reject it immediately.                    |
|                                                                                       |
+---------------------------------------------------------------------------------------+

When creating scripts programmatically in JavaScript, the browser networking engine begins processing attributes immediately upon network dispatch. If you assign the source URL or append the node to the DOM before specifying the integrity and crossOrigin properties, the request may initiate as an unverified or non-CORS fetch, triggering an immediate security violation.

Technical Deep Dive & Specifications

1. Programmatic DOM `<script>` Injection Mechanics

When creating script elements dynamically via document.createElement('script'), you must configure the DOM properties in the correct sequence.

// Step 1: Instantiate the element
const script = document.createElement('script');

// Step 2: Configure type, integrity, and CORS BEFORE initiating fetch
script.type = 'text/javascript';
script.integrity = 'sha384-m6t5i17z/aP29Z19F4sN+eA4zR8nC9lP7qY1vX6mZ8bC2xD3eE4fG5hH6iI7jJ8k=';
script.crossOrigin = 'anonymous'; // Note property camelCase in JavaScript DOM

// Step 3: Attach lifecycle event listeners
script.onload = () => console.log('Script loaded and verified successfully');
script.onerror = (err) => console.error('Script blocked by SRI or network error', err);

// Step 4: Set source URL and append to DOM
script.src = 'https://cdn.example.com/analytics.min.js';
document.head.appendChild(script);

DOM Property Mapping Matrix:

HTML Attribute	JavaScript DOM Property	Type / Expected Value
`integrity="..."`	`element.integrity`	`string` (e.g. `'sha384-...'`)
`crossorigin="..."`	`element.crossOrigin`	`string` (`'anonymous'` or `'use-credentials'`)
`referrerpolicy="..."`	`element.referrerPolicy`	`string` (e.g. `'no-referrer'`)

⚠️ CamelCase Warning: In HTML, attributes are lowercase (crossorigin, referrerpolicy). In JavaScript DOM properties, they are camelCased (crossOrigin, referrerPolicy). Assigning script.crossorigin = 'anonymous' will fail silently without setting the actual property.

2. Fetch API Native `integrity` Option

The modern window.fetch() API natively supports the integrity option in RequestInit.

async function loadSecureJsonData(url, expectedHash) {
  try {
    const response = await fetch(url, {
      method: 'GET',
      mode: 'cors',
      integrity: expectedHash, // Native SRI verification in Fetch API
    });

    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    // If the hash fails, fetch() rejects with a TypeError
    console.error('Fetch integrity check failed:', error);
    throw error;
  }
}

If the downloaded byte stream fails hash verification, fetch() immediately rejects the Promise with a TypeError: Failed to fetch.

3. Dynamic ES Modules (`import()`) & SRI

As of current browser specifications, dynamic ECMAScript module imports (import('https://cdn.example.com/module.js')) do not natively accept an inline hash argument.

To enforce SRI on ES Modules today, engineers use one of two primary strategies:

<link rel="modulepreload"> with integrity:
```
<link rel="modulepreload" href="https://cdn.example.com/module.js" integrity="sha384-..." crossorigin="anonymous">
```
The browser pre-validates and caches the module. When code later calls import('https://cdn.example.com/module.js'), the browser resolves it from the verified cache.
Fetch-and-Blob Execution: The application fetches the module script via fetch(url, { integrity: '...' }), converts the verified text to an Object URL (URL.createObjectURL(blob)), and dynamically imports the local Blob URL.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code: Resilient Multi-CDN Fallback Loader

Line-by-Line Code Breakdown

Lines 38–41 (tryLoad()): Instantiates the <script> element and sets script.integrity and script.crossOrigin = 'anonymous' prior to setting the src.
Lines 44–47 (script.onload): Resolves the Promise once the browser verifies the cryptographic hash against the incoming byte stream.
Lines 49–58 (script.onerror): Intercepts the network error or SRI mismatch event. It cleans up the failed DOM node and transparently attempts the fallback CDN URL with the same integrity constraint.
Lines 60–61 (script.src = url; document.head.appendChild(script)): Initiates the network fetch and mounts the element into the DOM tree.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic SRI Loader & Fallback</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 2rem; background: #f1f5f9; }
    .panel { background: white; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
    .log-box { background: #0f172a; color: #38bdf8; font-family: monospace; padding: 1rem; border-radius: 6px; margin-top: 1rem; height: 180px; overflow-y: auto; }
    .btn { background: #2563eb; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .btn:hover { background: #1d4ed8; }
  </style>
</head>
<body>

<div class="panel">
    <h2>Dynamic SRI Script Loader with Auto-Fallback</h2>
    <p>Simulates loading an external library. If the primary CDN hash is corrupted, it automatically falls back to a verified mirror.</p>
    
    <button id="load-btn" class="btn">Load Chart Library Securely</button>

<div id="log" class="log-box">System ready. Click button to begin secure dynamic fetch...</div>
  </div>

/**
     * Programmatic script injector with SRI and fallback support
     */
    function loadSecureScript({ primaryUrl, fallbackUrl, integrity }) {
      return new Promise((resolve, reject) => {
        
        function tryLoad(url, isFallback = false) {
          log(`Attempting load from ${isFallback ? 'FALLBACK' : 'PRIMARY'} source: ${url}`);
          
          const script = document.createElement('script');
          script.type = 'text/javascript';
          script.integrity = integrity;
          script.crossOrigin = 'anonymous';

script.onload = () => {
            log(`✅ SUCCESS: Resource verified and loaded from ${url}`);
            resolve();
          };

script.onerror = (err) => {
            log(`🛑 FAILED: Integrity or network error on ${url}`);
            if (!isFallback && fallbackUrl) {
              log(`🔄 Initiating automatic switchover to fallback mirror...`);
              document.head.removeChild(script);
              tryLoad(fallbackUrl, true);
            } else {
              reject(new Error(`All CDN sources failed SRI verification.`));
            }
          };

script.src = url;
          document.head.appendChild(script);
        }

tryLoad(primaryUrl, false);
      });
    }

document.getElementById('load-btn').addEventListener('click', () => {
      log('Starting secure dynamic injection pipeline...');
      
      // Known valid hash for Luxon 3.4.4
      const validHash = 'sha512-793vf1A5g2S+U3vE3+fLwX6iYf+693Fh64xH/q3f3kP2xY2xX8N1lQ9U7K4x/g==';

loadSecureScript({
        // Primary URL points to an intentional non-existent or invalid source to demonstrate fallback
        primaryUrl: 'https://invalid-tampered-cdn.example.com/luxon.min.js',
        // Fallback points to legitimate CDN
        fallbackUrl: 'https://cdnjs.cloudflare.com/ajax/libs/luxon/3.4.4/luxon.min.js',
        integrity: 'sha512-793vf1A5g2S+U3vE3+fLwX6iYf+693Fh64xH/q3f3kP2xY2xX8N1lQ9U7K4x/g=='
      }).catch(err => {
        log(`CRITICAL FAILURE: ${err.message}`);
      });
    });
  </script>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

> System ready. Click button to begin secure dynamic fetch...
> Starting secure dynamic injection pipeline...
> Attempting load from PRIMARY source: https://invalid-tampered-cdn.example.com/luxon.min.js
> 🛑 FAILED: Integrity or network error on https://invalid-tampered-cdn.example.com/luxon.min.js
> 🔄 Initiating automatic switchover to fallback mirror...
> Attempting load from FALLBACK source: https://cdnjs.cloudflare.com/ajax/libs/luxon/3.4.4/luxon.min.js

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Promise-Based Fetch Integrity Asset Wrapper

Instructions:

Implement a generic async function fetchWithIntegrity(url, integrityHash) using the native Fetch API.
The function must:
- Request the resource in cors mode.
- Attach the provided integrity hash.
- Return the response body as plain text (response.text()) if verification succeeds.
- Catch any TypeError (hash mismatch or network error) and re-throw a custom SecurityException with the message "CRITICAL: Resource integrity check failed for <url>".

🏁 Starter Code Sandbox

class SecurityException extends Error {
  constructor(message) {
    super(message);
    this.name = 'SecurityException';
  }
}

/**
 * Fetches text content from a remote URL with mandatory SRI validation.
 * @param {string} url - Target resource URL
 * @param {string} integrityHash - Expected SRI hash (e.g. 'sha384-...')
 * @returns {Promise<string>} Plain text content of verified resource
 */
async function fetchWithIntegrity(url, integrityHash) {
  if (!url || !integrityHash) {
    throw new Error('URL and integrityHash parameters are mandatory');
  }

  try {
    const response = await fetch(url, {
      method: 'GET',
      mode: 'cors',
      integrity: integrityHash,
      cache: 'default',
    });

    if (!response.ok) {
      throw new Error(`HTTP fetch failed with status ${response.status} (${response.statusText})`);
    }

    return await response.text();
  } catch (err) {
    // If the SRI digest mismatches or CORS fails, browser throws TypeError
    throw new SecurityException(`CRITICAL: Resource integrity check failed for ${url}. Error: ${err.message}`);
  }
}

// Verification Test:
(async () => {
  const targetUrl = 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js';
  const bogusHash = 'sha384-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA';
  
  try {
    await fetchWithIntegrity(targetUrl, bogusHash);
  } catch (e) {
    console.log(`Caught expected error: ${e.name} - ${e.message}`);
    // Output: Caught expected error: SecurityException - CRITICAL: Resource integrity check failed...
  }
})();

Why this works:

Modern Fetch API implements the W3C Subresource Integrity specification directly in the integrity option.
If the computed digest does not match, the fetch specification mandates rejecting the promise with a network error before the response body is made available to JavaScript.

⚠️ Common Pitfalls

Setting script.src Before script.integrity: In some browser engines and web worker environments, setting src immediately triggers the resource loader. If integrity has not been set yet, the resource may load unverified. Always configure integrity and crossOrigin before assigning src.
Using Lowercase script.crossorigin in JavaScript: In JavaScript DOM scripting, the property is script.crossOrigin (capital 'O'). Setting script.crossorigin = 'anonymous' sets an arbitrary custom property on the object without configuring the DOM reflection.
Leaking Memory on Failed Injections: When a dynamic script fails SRI verification, remember to call document.head.removeChild(script) or let garbage collection clean up the rejected node before retrying with a fallback mirror.

💡 Pro Tips

Pair Dynamic SRI with Service Workers: If your application uses a Service Worker for offline caching, you can validate SRI inside the Service Worker's fetch event handler using fetch(event.request, { integrity: knownHash }) before storing the response in the Cache API.
Integrity Map Pattern: Store all vendor asset URLs and their corresponding SRI hashes in a frozen configuration object (const ASSET_REGISTRY = Object.freeze({ ... })) at the root of your application to prevent tampering by unauthorized runtime code.

📌 Key Takeaways

Dynamic script injection requires setting script.integrity and script.crossOrigin before assigning script.src or appending to the DOM.
The JavaScript DOM property for CORS is element.crossOrigin (camelCase).
The native Fetch API supports SRI directly via the integrity option in RequestInit.
If an SRI hash mismatch occurs in fetch(), the browser rejects the Promise with a TypeError.
Robust frontend architectures implement multi-CDN fallback loaders to survive both CDN outages and upstream integrity failures.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Which of the following code snippets correctly configures a dynamically created `<script>` element with SRI?

Topic: HTML Fundamentals

? Question 2 / 3

What error does `window.fetch('https://cdn.example.com/lib.js', { integrity: 'sha384-WRONG' })` throw when the hash fails verification?

Topic: HTML Fundamentals

? Question 3 / 3

How can you enforce SRI verification on ECMAScript Modules loaded via dynamic `import()` in modern browsers?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

1. Programmatic DOM <script> Injection Mechanics

DOM Property Mapping Matrix:

2. Fetch API Native integrity Option

3. Dynamic ES Modules (import()) & SRI

💻 Interactive Code Playground

Starter Code: Resilient Multi-CDN Fallback Loader

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Build a Promise-Based Fetch Integrity Asset Wrapper

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which of the following code snippets correctly configures a dynamically created <script> element with SRI?

What error does window.fetch('https://cdn.example.com/lib.js', { integrity: 'sha384-WRONG' }) throw when the hash fails verification?

How can you enforce SRI verification on ECMAScript Modules loaded via dynamic import() in modern browsers?

1. Programmatic DOM `<script>` Injection Mechanics

2. Fetch API Native `integrity` Option

3. Dynamic ES Modules (`import()`) & SRI

Which of the following code snippets correctly configures a dynamically created `<script>` element with SRI?

What error does `window.fetch('https://cdn.example.com/lib.js', { integrity: 'sha384-WRONG' })` throw when the hash fails verification?

How can you enforce SRI verification on ECMAScript Modules loaded via dynamic `import()` in modern browsers?