Skip to content

Integrity check error with webpack runtime file #101

Closed
@sebastiendavid

Description

@sebastiendavid

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.

Activity

jscheid

jscheid commented on Jan 29, 2019

@jscheid
Collaborator

Hi, thanks for your detailed bug report. I can reproduce this and will see that I can fix it soon.

self-assigned this
on Jan 29, 2019
added 3 commits that reference this issue on Jan 29, 2019
6a7c236
3c69f03
1363b56
added a commit that references this issue on Jan 30, 2019
8f9d404
sebastiendavid

sebastiendavid commented on Jan 30, 2019

@sebastiendavid
Author

@jscheid I tried your fix: including only lazy loaded chunks in the runtime file seems to fix this issue 👍
Thank you for your time and reactivity 😉

jscheid

jscheid commented on Jan 30, 2019

@jscheid
Collaborator

No problem. Released in version 1.3.2.

10 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @jscheid@sebastiendavid

      Issue actions

        Integrity check error with webpack runtime file · Issue #101 · waysact/webpack-subresource-integrity