Subresource integrity checks suddenly failing

[lukaskurz]

Problem

The build of my angular app is outputting this warning:

chunk {} runtime.39e440ffc58a0c5ea137.js (runtime) 2.62 kB [entry] [rendered]
chunk {1} main.f0787a89e56367a0d4ae.js (main) 111 kB [initial] [rendered]
chunk {2} polyfills.45adc7f91fa71ef6f425.js (polyfills) 166 kB [initial] [rendered]
chunk {3} polyfills-es5.834fe503d6f9b3377e74.js (polyfills-es5) 249 kB [initial] [rendered]
chunk {4} styles.3dd4681c5b97bbeabdf5.css (styles) 569 kB [initial] [rendered]
chunk {5} vendor.b4bbba3e16bf4652debe.js (vendor) 1.46 MB [initial] [rendered]
chunk {6} 6.8e8c786becf994378b6c.js () 1.07 MB  [rendered]
chunk {7} 7.6b6ed83ee281f7c77918.js () 34.4 kB  [rendered]
chunk {8} 8.7cf7cb03827a25cd0afb.js () 43.1 kB  [rendered]
chunk {scripts} scripts.0022afdcd9fa76f58a28.js (scripts) 324 kB [entry] [rendered]
Date: 2020-10-29T02:38:20.143Z - Hash: 14cc2dc96fe0ed82f9cc - Time: 52396ms

WARNING in webpack-subresource-integrity: Cannot determine asset for chunk scripts, computed="undefined", available=scripts.0022afdcd9fa76f58a28.js. Please report this full error message along with your Webpack configuration at https://github.com/waysact/webpack-subresource-integrity/issues/new

WARNING in budgets: Exceeded maximum budget for initial. Budget 2 MB was not met by 871 kB with a total of 2.85 MB.

and now my web-app is longer available to my customers, since the SRI checks are failing.

This problem occured since the last build, so maybe around 2 two weeks ago.
I have found absolutely nothing on how to fix this.
I tried updating node, cleaning my global packages, cleaning(removing and installing) the local packages, moving my angular versions from 9.0 to 9.1 and 10.0, but nothing worked.

[jscheid]

Sorry to hear that this broke your website - that shouldn't happen. Which version of this plugin are you running and which version of webpack?

[lukaskurz]

So i did some further digging next day, together a with a coworker and it turns out that our customer, for whom we set up cloudflare, just enabled css/js minification, without giving us any notice. You can guess what that did to the SRI checks.

So the checks did not fail because of the warning but I'd still be interested how to fix the warning.

I'll try and provide you with as much info as possible:

package.json:

{
  "name": "app-web",
  "version": "0.1.20",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ng build --prod --aot --build-optimizer --optimization --output-hashing=all --vendor-chunk --output-path=dist",
    "test": "ng test",
    "lint": "ng lint",
    "lint:fix": "ng lint --fix",
    "e2e": "ng e2e",
    "postinstall": "ngcc"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.1.0",
    "@angular-material-components/datetime-picker": "^2.0.4",
    "@angular-material-components/moment-adapter": "^4.0.0",
    "@angular/animations": "9.0.5",
    "@angular/cdk": "9.1.1",
    "@angular/common": "9.0.5",
    "@angular/compiler": "9.0.5",
    "@angular/core": "9.0.5",
    "@angular/forms": "9.0.5",
    "@angular/http": "7.2.16",
    "@angular/material": "9.1.1",
    "@angular/platform-browser": "9.0.5",
    "@angular/platform-browser-dynamic": "9.0.5",
    "@angular/platform-server": "9.0.5",
    "@angular/router": "9.0.5",
    "@ngxs/devtools-plugin": "^3.6.2",
    "@ngxs/logger-plugin": "^3.6.2",
    "@ngxs/store": "^3.6.2",
    "@types/ol": "^6.3.1",
    "ajv": "6.12.0",
    "angular2-qrcode": "^2.0.3",
    "arrive": "2.4.1",
    "bootstrap": "4.3.1",
    "bootstrap-material-design": "4.1.2",
    "bootstrap-notify": "3.1.3",
    "chartist": "0.11.2",
    "classlist.js": "1.1.20150312",
    "cookieconsent": "^3.1.1",
    "core-js": "3.1.3",
    "express": "4.17.1",
    "faker": "^4.1.0",
    "googleapis": "40.0.0",
    "hammerjs": "2.0.8",
    "html2canvas": "^1.0.0-rc.7",
    "jquery": "^3.5.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.19",
    "moment": "2.24.0",
    "ngx-cookieconsent": "^2.2.3",
    "ngx-material-timepicker": "^5.5.2",
    "ol": "^6.3.1",
    "perfect-scrollbar": "1.1.0",
    "popper.js": "1.15.0",
    "rxjs": "6.5.2",
    "rxjs-compat": "6.5.2",
    "uuid": "^8.0.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.900.5",
    "@angular/cli": "9.0.5",
    "@angular/compiler-cli": "9.0.5",
    "@angular/language-service": "9.0.5",
    "@ngxs/cli": "^2.0.0",
    "@types/bootstrap": "4.3.0",
    "@types/chartist": "^0.9.46",
    "@types/faker": "^4.1.11",
    "@types/googlemaps": "3.36.4",
    "@types/jasmine": "3.3.13",
    "@types/jquery": "3.3.29",
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.14.149",
    "@types/node": "12.0.7",
    "@types/uuid": "^8.0.0",
    "codelyzer": "5.2.1",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.1",
    "karma-jasmine-html-reporter": "1.5.2",
    "protractor": "5.4.3",
    "ts-node": "8.6.2",
    "tslint": "6.0.0",
    "typescript": "3.7.5"
  }
}

from package-lock.json:

...
"@angular-devkit/build-angular": {
      "version": "0.900.5",
      "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-0.900.5.tgz",
      "integrity": "sha512-WCfmQNTzQNgdh8baeNJm5uIhXbWp62e+upsZzh6eJ1ZrIeJSPJxE5mI1VvqBoAQH3hKjuAaAW3axpWGar4kJjw==",
      "dev": true,
      "requires": {
        "@angular-devkit/architect": "0.900.5",
        "@angular-devkit/build-optimizer": "0.900.5",
        "@angular-devkit/build-webpack": "0.900.5",
        "@angular-devkit/core": "9.0.5",
        "@babel/core": "7.7.7",
        "@babel/generator": "7.7.7",
        "@babel/preset-env": "7.7.7",
        "@ngtools/webpack": "9.0.5",
        "ajv": "6.10.2",
        "autoprefixer": "9.7.1",
        "babel-loader": "8.0.6",
        "browserslist": "4.8.3",
        "cacache": "13.0.1",
        "caniuse-lite": "1.0.30001020",
        "circular-dependency-plugin": "5.2.0",
        "copy-webpack-plugin": "5.1.1",
        "core-js": "3.6.4",
        "coverage-istanbul-loader": "2.0.3",
        "cssnano": "4.1.10",
        "file-loader": "4.2.0",
        "find-cache-dir": "3.0.0",
        "glob": "7.1.5",
        "jest-worker": "24.9.0",
        "karma-source-map-support": "1.4.0",
        "less": "3.10.3",
        "less-loader": "5.0.0",
        "license-webpack-plugin": "2.1.3",
        "loader-utils": "1.2.3",
        "magic-string": "0.25.4",
        "mini-css-extract-plugin": "0.8.0",
        "minimatch": "3.0.4",
        "open": "7.0.0",
        "parse5": "4.0.0",
        "postcss": "7.0.21",
        "postcss-import": "12.0.1",
        "postcss-loader": "3.0.0",
        "raw-loader": "3.1.0",
        "regenerator-runtime": "0.13.3",
        "rimraf": "3.0.0",
        "rollup": "1.25.2",
        "rxjs": "6.5.3",
        "sass": "1.23.3",
        "sass-loader": "8.0.0",
        "semver": "6.3.0",
        "source-map": "0.7.3",
        "source-map-loader": "0.2.4",
        "source-map-support": "0.5.16",
        "speed-measure-webpack-plugin": "1.3.1",
        "style-loader": "1.0.0",
        "stylus": "0.54.7",
        "stylus-loader": "3.0.2",
        "terser": "4.5.1",
        "terser-webpack-plugin": "2.3.3",
        "tree-kill": "1.2.2",
        "webpack": "4.41.2",
        "webpack-dev-middleware": "3.7.2",
        "webpack-dev-server": "3.9.0",
        "webpack-merge": "4.2.2",
        "webpack-sources": "1.4.3",
        "webpack-subresource-integrity": "1.3.4",
        "worker-plugin": "3.2.0"
      },
      "dependencies": {
        "@babel/generator": {
          "version": "7.7.7",
          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.7.7.tgz",
          "integrity": "sha512-/AOIBpHh/JU1l0ZFS4kiRCBnLi6OTHzh0RPk3h9isBxkkqELtQNFi1Vr/tiG9p1yfoUdKVwISuXWQR+hwwM4VQ==",
          "dev": true,
          "requires": {
            "@babel/types": "^7.7.4",
            "jsesc": "^2.5.1",
            "lodash": "^4.17.13",
            "source-map": "^0.5.0"
          },
          "dependencies": {
            "source-map": {
              "version": "0.5.7",
              "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
              "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
              "dev": true
            }
          }
        },
...

So I think the versions you need should be this:

"webpack": "4.41.2",
"webpack-dev-middleware": "3.7.2",
"webpack-dev-server": "3.9.0",
"webpack-merge": "4.2.2",
"webpack-sources": "1.4.3",
"webpack-subresource-integrity": "1.3.4",

[jscheid]

Thanks.

This looks a lot like #104. However, this is the first time I hear about this issue breaking a web page Sorry, missed the part about minification. Yes that would be the expected outcome then...

About the warning, it's hard to debug this without a test case / demo repository. I don't suppose you could try to boil it down into one?

Otherwise, could you tell me a bit more about that "scripts" chunk. How is it generated? Is there anything special about it?

A copy of your webpack config might be helpful.

[lukaskurz]

This is a boiled down version of my repo:
https://github.com/lukaskurz/sri_warning_demo

Basically calling make should do everything from clean, install and build for you.

[jscheid]

Thanks for the demo, much appreciated.

I've had a look and what I've found is that this plugin expects the webpack chunkAsset hook to be called for every chunk. Angular contains a custom plugin called scripts-webpack-plugin that adds a chunk without calling this hook, which means that this plugin doesn't know about the chunk.

Adding the following line at the end of the _insertOutput function fixes it:

compilation.hooks.chunkAsset.call(chunk, filename);

The required change for Angular 10 is probably identical but I haven't tested it. (The file in question moved here.)

Now, these parts of the Webpack plugin interface (both how to add a custom chunk, and how to process chunks like webpack-subresource-integrity does) are not well documented, or barely documented at all, so I wouldn't call this a bug in Angular's plugin. However, it feels to me that this is the cleanest and most straightforward fix. Do you want to suggest it to the maintainers and see if they agree? If they disagree, we will probably have to involve someone from the Webpack core team to explain how this is meant to work in Webpack 4.

Note that Webpack 5 has introduced a new asset processing pipeline that we've started discussing for html-webpack-plugin integration. I would imagine that it will help prevent issues like this one in the future.

[lukaskurz]

Great, thanks for the explanation and taking time for this. I'll look into creating an issue on their repo about this.

[jscheid]

I'm going to close this for now. Feel free to reopen if you think there's anything to be done at this end.

[jscheid]

@lukaskurz did you end up following up on this with the Angular folks?

[lukaskurz]

@jscheid Sorry, totally forgot about that project, life got in the way and all that 😅 I'll try to make some time to create an issue there.

[lukaskurz]

I created an issue over there:

angular/angular-cli#19829

[jscheid]

Thanks @lukaskurz!