Hello,

We started to use webpack-subresource-integrity plugin in my company, and I noticed some integrity errors because of our webpack runtime file and the browser cache. In some cases, it is possible to generate a runtime file with a name which does not change but where the content changed ([name].[contenthash].js). So if the runtime file (with this same name) is in the user browser cache (because long term caching) and the index.html file is loaded with the new integritry hash (because no long term caching for index.html): an integrity error occurs.

I created a repository in which you can reproduce this issue: https://github.com/sebastiendavid/webpack-sri-runtime-hash-issue

Steps to reproduce issue

• Install node modules

npm ci

• Build project

npm run build

• Copy runtime file:

cp build/runtime.94ebc40d8dbd2fa73811.js runtime1.js

• Change src/modules/moduleA content, for example:

Before:

import React from 'react';

export default function ModuleA() {
  return <div>ModuleA</div>;
}

After:

import React from 'react';

export default function ModuleA() {
  return <div>ModuleA FOOBAR</div>;
}

• Build again

npm run build

• Copy runtime file: build/runtime.94ebc40d8dbd2fa73811.js.

cp build/runtime.94ebc40d8dbd2fa73811.js runtime2.js

Notice that the hash in the filename did not change.

• Compare the 2 runtime files

diff runtime1.js runtime2.js

var sriHashes = {
  "vendors": "sha256-yg3QzpkruWNm6WDkQxkfriaJxgtrrkRt8Q0dHCJQq90=",
- "app": "sha256-mvIw4Dp56Bv+nKsu9opwjBXHjonZgZ74q/HELYx401A=",
+ "app": "sha256-jlJ+6K39QeYSRDEzkeFV9NpXhrAULzxUAJTG1RtjBVg=",
  "moduleB": "sha256-GHBHstHDefAN+5Hv7+vVQj5fK0qzELaR/nkh75mVJjk=",
  "moduleC": "sha256-CLQxfIsv0UujQXZL1Ezz3Rb/guLqcWahQjSGnaebpuQ="
};

Subresource integrity hash from app chunk changed.

• So the runtime filename did not change, but the content did. So if this file is cached by the browser and loaded from this cache: an integrity error occurs.