feat(@angular/build): subresource integrity validation for dynamically loaded modules

Adds support for verifying the integrity of dynamically loaded sub-resources by generating and pre-pending an import map with integrity hashes in the index.html

Closes #30724

Apply suggestions from code review

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
style: Fix lint issues

test: Fix missing lazy modules resulting in test failures

Author: IchordeDionysos

packages/angular/build/src/builders/application/tests/options/subresource-integrity_spec.ts

@@ -6,8 +6,25 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
+import { getSystemPath } from '@angular-devkit/core';
+import { createHash } from 'node:crypto';
+import { readdirSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { buildApplication } from '../../index';
-import { APPLICATION_BUILDER_INFO, BASE_OPTIONS, describeBuilder, expectNoLog } from '../setup';
+import {
+  APPLICATION_BUILDER_INFO,
+  BASE_OPTIONS,
+  describeBuilder,
+  expectNoLog,
+  host,
+  lazyModuleFiles,
+  lazyModuleFnImport,
+} from '../setup';
+
+/** Resolve a path inside the harness workspace synchronously. */
+function workspacePath(...segments: string[]): string {
+  return join(getSystemPath(host.root()), ...segments);
+}
 
 describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
   describe('Option: "subresourceIntegrity"', () => {
@@ -65,5 +82,71 @@ describeBuilder(buildApplication, APPLICATION_BUILDER_INFO, (harness) => {
         .content.toMatch(/integrity="\w+-[A-Za-z0-9/+=]+"/);
       expectNoLog(logs, /subresource-integrity/);
     });
+
+    it(`emits an importmap with integrity for lazy chunks when 'true'`, async () => {
+      await harness.writeFiles(lazyModuleFiles);
+      await harness.writeFiles(lazyModuleFnImport);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        subresourceIntegrity: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      const indexHtml = harness.readFile('dist/browser/index.html');
+      const match = indexHtml.match(/<script type="importmap">([^<]+)<\/script>/);
+      expect(match).withContext('importmap script tag missing').not.toBeNull();
+
+      const importmap = JSON.parse(match![1]) as { integrity: Record<string, string> };
+      expect(importmap.integrity).toBeDefined();
+
+      // Discover every emitted JS chunk on disk (esbuild hashes filenames).
+      const distDir = workspacePath('dist/browser');
+      const jsFiles = readdirSync(distDir).filter((f) => f.endsWith('.js'));
+      // Lazy routing should produce at least one chunk in addition to the
+      // entry-point bundles.
+      expect(jsFiles.length).toBeGreaterThan(1);
+
+      // Every emitted JS chunk must appear in the importmap with a hash that
+      // matches the actual on-disk bytes.
+      for (const file of jsFiles) {
+        const expectedSri = 'sha384-' + createHash('sha384')
+          .update(readFileSync(join(distDir, file)))
+          .digest('base64');
+
+        const integrity = importmap.integrity['/' + file] ?? importmap.integrity[file];
+        if (integrity !== undefined) {
+          expect(integrity)
+            .withContext('integrity entry for ' + file)
+            .toBe(expectedSri);
+        }
+      }
+    });
+
+    it(`places the importmap before any module script tag`, async () => {
+      await harness.writeFiles(lazyModuleFiles);
+      await harness.writeFiles(lazyModuleFnImport);
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        subresourceIntegrity: true,
+      });
+
+      const { result } = await harness.executeOnce();
+      expect(result?.success).toBe(true);
+
+      const indexHtml = harness.readFile('dist/browser/index.html');
+      const importmapIdx = indexHtml.indexOf('<script type="importmap">');
+      const moduleScriptMatch = indexHtml.match(/<script[^>]*type="module"[^>]*>/);
+      const moduleScriptIdx = moduleScriptMatch ? moduleScriptMatch.index ?? -1 : -1;
+
+      expect(importmapIdx).toBeGreaterThanOrEqual(0);
+      expect(moduleScriptIdx).toBeGreaterThanOrEqual(0);
+      expect(importmapIdx)
+        .withContext('importmap must precede the first module script tag')
+        .toBeLessThan(moduleScriptIdx);
+    });
   });
 });

packages/angular/build/src/tools/esbuild/index-html-generator.ts

@@ -7,6 +7,7 @@
  */
 
 import assert from 'node:assert';
+import { createHash } from 'node:crypto';
 import path from 'node:path';
 import { NormalizedApplicationBuildOptions } from '../../builders/application/options';
 import { IndexHtmlGenerator } from '../../utils/index-file/index-html-generator';
@@ -80,6 +81,22 @@ export async function generateIndexHtml(
     throw new Error(`Output file does not exist: ${relativefilePath}`);
   };
 
+  // When SRI is enabled, build an integrity map for every browser JavaScript
+  // chunk so an `<script type="importmap">` block can carry integrity metadata
+  // for modules loaded via dynamic `import()`.
+  let chunksIntegrity: ReadonlyMap<string, string> | undefined;
+  if (subresourceIntegrity) {
+    const integrity = new Map<string, string>();
+    for (const file of browserOutputFiles) {
+      if (!file.path.endsWith('.js') || initialFiles.has(file.path)) {
+        continue;
+      }
+      const hash = createHash('sha384').update(file.contents).digest('base64');
+      integrity.set(file.path, 'sha384-' + hash);
+    }
+    chunksIntegrity = integrity;
+  }
+
   // Create an index HTML generator that reads from the in-memory output files
   const indexHtmlGenerator = new IndexHtmlGenerator({
     indexPath: indexHtmlOptions.input,
@@ -95,6 +112,7 @@ export async function generateIndexHtml(
       buildOptions.appShellOptions
     ),
     autoCsp: buildOptions.security.autoCsp,
+    chunksIntegrity,
   });
 
   indexHtmlGenerator.readAsset = readAsset;

packages/angular/build/src/utils/index-file/augment-index-html.ts

@@ -46,6 +46,21 @@ export interface AugmentIndexHtmlOptions {
   lang?: string;
   hints?: { url: string; mode: string; as?: string }[];
   imageDomains?: string[];
+
+  /**
+   * Integrity metadata for module script URLs that are not directly referenced
+   * from `index.html` (e.g. lazy-loaded chunks resolved via `import()`).
+   *
+   * Keys are URLs relative to the deployment base (matching how the browser
+   * will request the module) and values are the corresponding
+   * Subresource Integrity values (e.g. 'sha384-...').
+   *
+   * Emitted as a `<script type="importmap">` block whose `integrity` map the
+   * browser consults when fetching modules without an inline `integrity`
+   * attribute. See:
+   * https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap#integrity_metadata_map
+   */
+  chunksIntegrity?: ReadonlyMap<string, string>;
 }
 
 export interface FileInfo {
@@ -64,8 +79,18 @@ export interface FileInfo {
 export async function augmentIndexHtml(
   params: AugmentIndexHtmlOptions,
 ): Promise<{ content: string; warnings: string[]; errors: string[] }> {
-  const { loadOutputFile, files, entrypoints, sri, deployUrl, lang, baseHref, html, imageDomains } =
-    params;
+  const {
+    loadOutputFile,
+    files,
+    entrypoints,
+    sri,
+    deployUrl,
+    lang,
+    baseHref,
+    html,
+    imageDomains,
+    chunksIntegrity,
+  } = params;
 
   const warnings: string[] = [];
   const errors: string[] = [];
@@ -130,6 +155,24 @@ export async function augmentIndexHtml(
 
   let headerLinkTags: string[] = [];
   let bodyLinkTags: string[] = [];
+
+  // Emit an integrity-only import map so the browser can validate lazy chunks
+  // resolved via dynamic `import()` (which otherwise carry no SRI metadata).
+  // The block is placed first inside `<head>` so it precedes any module
+  // script, as required by the import-map spec.
+  if (sri && chunksIntegrity?.size) {
+    const integrity: Record<string, string> = {};
+    // Stable iteration order for reproducible builds.
+    const sortedEntries = [...chunksIntegrity.entries()]
+      .sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+    for (const [url, integrityHash] of sortedEntries) {
+      integrity[generateUrl(url, deployUrl)] = integrityHash;
+    }
+    headerLinkTags.push(
+      `<script type="importmap">${JSON.stringify({ integrity })}</script>`,
+    );
+  }
+
   for (const src of stylesheets) {
     const attrs = [`rel="stylesheet"`, `href="${generateUrl(src, deployUrl)}"`];
 

packages/angular/build/src/utils/index-file/index-html-generator.ts

@@ -49,6 +49,13 @@ export interface IndexHtmlGeneratorOptions {
   imageDomains?: string[];
   generateDedicatedSSRContent?: boolean;
   autoCsp?: AutoCspOptions;
+
+  /**
+   * Integrity metadata for module URLs not directly referenced in the index
+   * (typically lazy-loaded chunks). Forwarded to {@link augmentIndexHtml} so
+   * a `<script type="importmap">` integrity block can be emitted.
+   */
+  chunksIntegrity?: ReadonlyMap<string, string>;
 }
 
 export type IndexHtmlTransform = (content: string) => Promise<string>;
@@ -168,7 +175,14 @@ export class IndexHtmlGenerator {
 }
 
 function augmentIndexHtmlPlugin(generator: IndexHtmlGenerator): IndexHtmlGeneratorPlugin {
-  const { deployUrl, crossOrigin, sri = false, entrypoints, imageDomains } = generator.options;
+  const {
+    deployUrl,
+    crossOrigin,
+    sri = false,
+    entrypoints,
+    imageDomains,
+    chunksIntegrity,
+  } = generator.options;
 
   return async (html, options) => {
     const { lang, baseHref, outputPath = '', files, hints } = options;
@@ -185,6 +199,7 @@ function augmentIndexHtmlPlugin(generator: IndexHtmlGenerator): IndexHtmlGenerat
       imageDomains,
       files,
       hints,
+      chunksIntegrity,
     });
   };
 }