Subresource Integrity for lazy modules is broken when using $localize

[TimoWilhelm]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] build
• [ ] serve
• [ ] test
• [ ] e2e
• [ ] generate
• [ ] add
• [ ] update
• [ ] lint
• [ ] extract-i18n
• [ ] run
• [ ] config
• [ ] help
• [ ] version
• [ ] doc

Is this a regression?

No

Description

When using $localize strings in a lazy module, the Subresource Integrity generation seems to produce invalid hashes for both the source language and any translated apps. This blocks the loading of lazy modules when subresourceIntegrity is enabled in the angular.json config.

🔬 Minimal Reproduction

I've created a minimal GitHub repository to reproduce the issue here: https://github.com/TimoWilhelm/lazy-demo

Here are the steps to reproduce:

• run ng build --prod
• enter the dist folder of the app cd ./dist/lazy-demo
• serve the app (I'm using http-server to test) http-server
• open the app in the browser at http://127.0.0.1:8080 and open either en-US or de.
• click the link to load the lazy module

🔥 Exception or Error

Failed to find a valid digest in the 'integrity' attribute for resource 'http://127.0.0.1:8080/en-US/4.HASH.js' with computed SHA-256 integrity 'SHA'. The resource has been blocked.

🌍 Your Environment

Angular CLI: 11.0.2
Node: 12.18.0
OS: win32 x64

Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.2
@angular-devkit/build-angular   0.1100.2
@angular-devkit/core            11.0.2
@angular-devkit/schematics      11.0.2
@schematics/angular             11.0.2
@schematics/update              0.1100.2
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant? I tested this issue in Firefox + Chrome using different http servers.

[junderw]

Perhaps the problem exists that this is not being done to the content after inlining i18n.

This (createFileEntry and cachePut):

https://github.com/angular/angular-cli/blob/645353db26e9d6e8f893322a52b320ccd5ca1d5d/packages/angular_devkit/build_angular/src/utils/process-bundle.ts#L367-L379

Needs to be done here too?:

https://github.com/angular/angular-cli/blob/645353db26e9d6e8f893322a52b320ccd5ca1d5d/packages/angular_devkit/build_angular/src/utils/process-bundle.ts#L704-L709

And maybe also here?:

https://github.com/angular/angular-cli/blob/645353db26e9d6e8f893322a52b320ccd5ca1d5d/packages/angular_devkit/build_angular/src/utils/process-bundle.ts#L797-L802

[MrKrabat]

I have the same problem, is there still no solution?

[mjolk]

i have a security audit telling me i need to add this, but it does not work due to this bug it's 2022

[MonsieurMan]

I confirm this issue still happens with angular 13.2.6.

[famaridon]

+1

[hamelhmc]

I confirm that I am also experiencing the same issue with "Subresource Integrity for lazy modules" when using $localize. It would be greatly appreciated if a solution could be provided as soon as possible.

[alan-agius4]

This should no longer be an issue when using the application builder.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}