angular-cli icon indicating copy to clipboard operation
angular-cli copied to clipboard

No subresource integrity validation for dynamically loaded chunks

Open Henerator opened this issue 6 months ago • 2 comments

Command

build

Is this a regression?

  • [x] 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

Henerator avatar Jul 16 '25 19:07 Henerator

We could now use the integrity metamap to archive this: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap#integrity_metadata_map

alan-agius4 avatar Jul 21 '25 08:07 alan-agius4

This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list.

You can find more details about the feature request process in our documentation.

angular-robot[bot] avatar Jul 21 '25 13:07 angular-robot[bot]