Description
Version
5.0.1
Reproduction link
github.com/sisou/sri-realcontenthash-repro
Environment info
System:
OS: Linux 5.16 Fedora Linux 35 (Workstation Edition)
CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics
Binaries:
Node: 14.18.3 - /usr/bin/node
Yarn: 1.22.10 - /usr/bin/yarn
npm: 6.14.15 - /usr/bin/npm
Browsers:
Chrome: 99.0.4844.51
Firefox: 97.0.1
npmPackages:
@vue/cli-overlay: 5.0.1
@vue/cli-plugin-router: 5.0.1
@vue/cli-plugin-vuex: 5.0.1
@vue/cli-service: ~5.0.0 => 5.0.1
@vue/cli-shared-utils: 5.0.1
@vue/compiler-core: 3.2.31
@vue/compiler-dom: 3.2.31
@vue/compiler-sfc: 3.2.31
@vue/compiler-ssr: 3.2.31
@vue/component-compiler-utils: 3.3.0
@vue/reactivity: 3.2.31
@vue/reactivity-transform: 3.2.31
@vue/runtime-core: 3.2.31
@vue/runtime-dom: 3.2.31
@vue/server-renderer: 3.2.31
@vue/shared: 3.2.31
@vue/web-component-wrapper: 1.3.0
vue: ^3.2.13 => 3.2.31
vue-hot-reload-api: 2.3.4
vue-loader: 17.0.0 (15.9.8)
vue-style-loader: 4.1.3
vue-template-es2015-compiler: 1.9.1
npmGlobalPackages:
@vue/cli: Not Found
Steps to reproduce
Add this as the vue.config.js to a fresh vue-cli project:
module.exports = {
integrity: process.env.NODE_ENV === 'production',
configureWebpack: {
optimization: {
realContentHash: true
}
}
}What is expected?
Served production build works
What is actually happening?
Served production build shows white page, browser console shows app.[contenthash].js is being blocked because of SRI missmatch.
Webpack v5 introduced asset processing stages: https://webpack.js.org/api/compilation-hooks/#list-of-asset-processing-stages
The html-webpack-plugin (from here HWP) runs at stage PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE.
Webpack's real content hash generation only runs later, at stage PROCESS_ASSETS_STAGE_OPTIMIZE_HASH. At this stage, the content and filename of the chunks-vendor file changes, which in turn changes the content of the entry app.[contenthash].js file, making it have another SRI hash.
realContentHash is enabled by default in Webpack for production builds, but disabled by default in vue/cli:
vue-cli/packages/@vue/cli-service/lib/config/app.js
Lines 36 to 39 in 7527271
According to the maintainer of HWP, their plugin webpack-subresource-integrity works with realContentHash, but I have not verified this: jantimon/html-webpack-plugin#1554 (comment)