Skip to content

No subresource integrity validation for dynamically loaded chunks #30724

@Henerator

Description

@Henerator

Command

build

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Angular CLI < 17 with @angular-devkit/build-angular:browser builder

Description

When building an Angular application with the subresourceIntegrity option enabled, dynamically loaded chunks are no longer validated with the integrity attribute in the generated code. This is a regression from previous behavior when using the legacy @angular-devkit/build-angular:browser builder.

Using the old @angular-devkit/build-angular:browser builder, after the application build, we had a runtime.js file where we could find the list of hashes for every chunk in the format sriHashes = {chunkNumber1: "sha384-hash1", ...}, and there was code that creates a script tag and adds the integrity attribute to it using the sriHashes list.

Example of code from runtime.js

var f = document.createElement("script");
f.src = "chunk.js";
f.integrity = sriHashes[chunkId];
f.crossOrigin = "anonymous";
document.head.appendChild(f);

So the integrity validation worked for loaded chunks.

In the new @angular-devkit/build-angular:application builder, there is no list of hashes, and chunks are loaded just using import("./chunk-name.js") code.

A simple check by changing chunk code after build confirms it. There is no error from the browser about a wrong integrity value for the changed dynamically loaded chunk.

Minimal Reproduction

  • create new Angular (e.g. 19.2.15) application
  • add subresourceIntegrity flag in angular.json file
{
"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:application",
      "configurations": {
        "production": {
          "subresourceIntegrity": true,
        }
      }
    }
  }
}
  • add module with lazy loading
  • add link to open lazy loaded page
  • build application
    • ng run build
  • change code in dynamically loaded chunk in dist folder
    • e.g. add console.log('test') in any appropriate place in chunk code
  • run application from dist folder
    • e.g. use http-server
  • open application in browser
  • click link to load chunk
  • check if any error in console about invalid integrity

Exception or Error


Your Environment

Angular CLI: 19.2.15
Node: 22.15.0
Package Manager: npm 10.9.2
OS: darwin arm64

Angular: 19.2.14
... common, compiler, compiler-cli, core, forms, localize
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.15
@angular-devkit/build-angular   19.2.15
@angular-devkit/core            19.2.15
@angular-devkit/schematics      19.2.15
@angular/cli                    19.2.15
@schematics/angular             19.2.15
rxjs                            7.8.2
typescript                      5.7.3
zone.js                         0.15.1

Anything else relevant?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions