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

test: Adjust test to validate more specific assumptions

fix: Escape < in generated importmap JSON

style: fix all formatting issues in angular-build

refactor: Inject importmap after base tag

fix: Lint failures in tests

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,84 @@ 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();
+
+      const initialJsFiles = new Set<string>();
+      for (const [, src] of indexHtml.matchAll(/<script[^>]*src="([^"]+)"[^>]*>/g)) {
+        initialJsFiles.add(src);
+      }
+      for (const [, href] of indexHtml.matchAll(
+        /<link[^>]*rel="modulepreload"[^>]*href="([^"]+)"[^>]*>/g,
+      )) {
+        initialJsFiles.add(href);
+      }
+
+      const distDir = workspacePath('dist/browser');
+      const lazyJsFiles = readdirSync(distDir).filter(
+        (f) => f.endsWith('.js') && !initialJsFiles.has(f),
+      );
+      expect(lazyJsFiles.length)
+        .withContext('expected at least one non-initial (lazy) JS file')
+        .toBeGreaterThan(0);
+
+      const importmapFiles = Object.keys(importmap.integrity);
+      expect(importmapFiles.sort())
+        .withContext('importmap integrity keys should match emitted lazy JS files')
+        .toEqual(lazyJsFiles.sort());
+
+      for (const [file, integrity] of Object.entries(importmap.integrity)) {
+        const expectedSri =
+          'sha384-' +
+          createHash('sha384')
+            .update(readFileSync(join(distDir, file)))
+            .digest('base64');
+
+        expect(integrity)
+          .withContext('importmap integrity hash should match for emitted lazy JS file ' + 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/angular/compilation/jit-compilation.ts

@@ -43,9 +43,8 @@ export class JitCompilation extends AngularCompilation {
     referencedFiles: readonly string[];
   }> {
     // Dynamically load the Angular compiler CLI package
-    const { constructorParametersDownlevelTransform } = await import(
-      '@angular/compiler-cli/private/tooling'
-    );
+    const { constructorParametersDownlevelTransform } =
+      await import('@angular/compiler-cli/private/tooling');
 
     // Load the compiler configuration and transform as needed
     const {

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/tools/esbuild/watcher.ts

@@ -41,7 +41,7 @@ export function createWatcher(options?: {
   followSymlinks?: boolean;
 }): BuildWatcher {
   const watcher = new WatchPack({
-    poll: options?.polling ? options?.interval ?? true : false,
+    poll: options?.polling ? (options?.interval ?? true) : false,
     ignored: options?.ignored,
     followSymlinks: options?.followSymlinks,
     aggregateTimeout: 250,

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[] = [];
@@ -128,8 +153,27 @@ export async function augmentIndexHtml(
     scriptTags.push(`<script ${attrs.join(' ')}></script>`);
   }
 
+  let subResourceIntegrityTag: string | undefined;
   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;
+    }
+    const importMapJson = JSON.stringify({ integrity }).replace(/</g, '\\u003c');
+    subResourceIntegrityTag = `<script type="importmap">${importMapJson}</script>`;
+  }
+
   for (const src of stylesheets) {
     const attrs = [`rel="stylesheet"`, `href="${generateUrl(src, deployUrl)}"`];
 
@@ -212,6 +256,9 @@ export async function augmentIndexHtml(
           if (!baseTagExists && isString(baseHref)) {
             rewriter.emitStartTag(tag);
             rewriter.emitRaw(`<base href="${baseHref}">`);
+            if (subResourceIntegrityTag) {
+              rewriter.emitRaw(subResourceIntegrityTag);
+            }
 
             return;
           }
@@ -221,6 +268,9 @@ export async function augmentIndexHtml(
           if (isString(baseHref)) {
             updateAttribute(tag, 'href', baseHref);
           }
+          if (subResourceIntegrityTag) {
+            rewriter.emitRaw(subResourceIntegrityTag);
+          }
           break;
         case 'link':
           if (readAttribute(tag, 'rel') === 'preconnect') {

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

@@ -459,6 +459,22 @@ describe('augment-index-html', () => {
     );
   });
 
+  it('should escape `<` characters in inline importmap JSON', async () => {
+    const { content } = await augmentIndexHtml({
+      ...indexGeneratorOptions,
+      sri: true,
+      chunksIntegrity: new Map([['lazy<chunk.js', 'sha384-abc']]),
+    });
+
+    const match = content.match(/<script type="importmap">([^<]+)<\/script>/);
+    expect(match).withContext('importmap script tag missing').not.toBeNull();
+    expect(match?.[1]).toContain('lazy\\u003cchunk.js');
+    expect(match?.[1]).not.toContain('lazy<chunk.js');
+    expect(JSON.parse(match?.[1] ?? '{}')).toEqual({
+      integrity: { 'lazy<chunk.js': 'sha384-abc' },
+    });
+  });
+
   it('should add image domain preload tags', async () => {
     const imageDomains = ['https://www.example.com', 'https://www.example2.com'];
     const { content, warnings } = await augmentIndexHtml({

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,
     });
   };
 }

packages/angular/build/src/utils/server-rendering/utils.ts

@@ -7,7 +7,9 @@
  */
 
 import type { createRequestHandler } from '@angular/ssr';
-import type { createNodeRequestHandler } from '@angular/ssr/node' with { 'resolution-mode': 'import' };
+import type { createNodeRequestHandler } from '@angular/ssr/node' with {
+  'resolution-mode': 'import',
+};
 
 export function isSsrNodeRequestHandler(
   value: unknown,