fix: error when used integrity with root publicPath, #42, #43

webdiscus · Oct 28, 2023 · f7e5e04 · f7e5e04
1 parent 6f8e15b
commit f7e5e04
Show file tree

Hide file tree

Showing 50 changed files with 291 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 2.15.1 (2023-10-28)
+
+- fix: error when used integrity with root publicPath, #42, #43
+
 ## 2.15.0 (2023-10-18)
 
 - feat: add `parsedValue` argument as an array of parsed filenames w/o URL query, in the `filter()` function of the `sources`

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "2.15.0",
+  "version": "2.15.1",
   "description": "HTML bundler plugin for webpack handles a template as an entry point, extracts CSS and JS from their sources referenced in HTML, supports template engines like Eta, EJS, Handlebars, Nunjucks.",
   "keywords": [
     "html",

diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -818,6 +818,7 @@ class Collection {
 
       if (!rawSource) return;
 
+      const entryDirname = path.dirname(entryFilename);
       const importedStyles = [];
       let hasInlineSvg = false;
       let content = rawSource.source();
@@ -843,8 +844,16 @@ class Collection {
 
             // 1.1 compute CSS integrity
             if (isIntegrity && !inline) {
-              const assetContent = compilation.assets[asset.assetFile].source();
-              asset.integrity = Integrity.getIntegrity(assetContent, asset.assetFile);
+              // path to asset relative by output.path
+              let pathname = asset.assetFile;
+              if (Options.isAutoPublicPath()) {
+                pathname = path.join(entryDirname, pathname);
+              } else if (Options.isRootPublicPath()) {
+                pathname = pathname.slice(1);
+              }
+
+              const assetContent = compilation.assets[pathname].source();
+              asset.integrity = Integrity.getIntegrity(assetContent, pathname);
               assetIntegrity.set(asset.assetFile, asset.integrity);
 
               if (!parseOptions.has(type)) {
@@ -864,7 +873,7 @@ class Collection {
                 if (!chunk.inline) {
                   const assetContent = compilation.assets[chunk.chunkFile].source();
                   chunk.integrity = Integrity.getIntegrity(assetContent, chunk.chunkFile);
-                  assetIntegrity.set(chunk.chunkFile, chunk.integrity);
+                  assetIntegrity.set(chunk.assetFile, chunk.integrity);
 
                   if (!parseOptions.has(type)) {
                     parseOptions.set(type, {

diff --git a/src/Plugin/Options.js b/src/Plugin/Options.js
@@ -222,6 +222,7 @@ class Options {
 
     this.autoPublicPath = false;
     this.isUrlPublicPath = false;
+    this.rootPublicPath = false;
     this.isRelativePublicPath = false;
     this.webpackPublicPath = publicPath;
 
@@ -231,6 +232,8 @@ class Options {
       this.isUrlPublicPath = true;
     } else if (!publicPath.startsWith('/')) {
       this.isRelativePublicPath = true;
+    } else if (publicPath.startsWith('/')) {
+      this.rootPublicPath = true;
     }
   }
 
@@ -378,13 +381,14 @@ class Options {
     return this.options.preload != null && this.options.preload !== false;
   }
 
-  /**
-   * @return {boolean}
-   */
   static isAutoPublicPath() {
     return this.autoPublicPath === true;
   }
 
+  static isRootPublicPath() {
+    return this.rootPublicPath === true;
+  }
+
   /**
    * @return {string}
    */

diff --git a/...rity/expected/assets/css/style.bundle.css → ...auto/expected/assets/css/style.bundle.css b/...rity/expected/assets/css/style.bundle.css → ...auto/expected/assets/css/style.bundle.css
diff --git a/...ity/expected/assets/css/vendor.bundle.css → ...uto/expected/assets/css/vendor.bundle.css b/...ity/expected/assets/css/vendor.bundle.css → ...uto/expected/assets/css/vendor.bundle.css
diff --git a/...ty/expected/assets/img/image.697ef306.png → ...to/expected/assets/img/image.697ef306.png b/...ty/expected/assets/img/image.697ef306.png → ...to/expected/assets/img/image.697ef306.png
diff --git a/...tegrity/expected/assets/js/main.bundle.js → ...th-auto/expected/assets/js/main.bundle.js b/...tegrity/expected/assets/js/main.bundle.js → ...th-auto/expected/assets/js/main.bundle.js
diff --git a/...expected/assets/js/no-integrity.bundle.js → ...expected/assets/js/no-integrity.bundle.js b/...expected/assets/js/no-integrity.bundle.js → ...expected/assets/js/no-integrity.bundle.js
diff --git a/...grity/expected/assets/js/vendor.bundle.js → ...-auto/expected/assets/js/vendor.bundle.js b/...grity/expected/assets/js/vendor.bundle.js → ...-auto/expected/assets/js/vendor.bundle.js
diff --git a/test/cases/integrity-publicPath-auto/expected/pages/index.html b/test/cases/integrity-publicPath-auto/expected/pages/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+
+  <!-- load source style -->
+  <link href="../assets/css/style.bundle.css" rel="stylesheet" integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E" crossorigin="use-credentials">
+
+  <!-- load source script -->
+  <script src="../assets/js/main.bundle.js" defer="defer" integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe" crossorigin="use-credentials"></script>
+
+  <!-- test: mixed order of css and js files -->
+  <link href="../assets/css/vendor.bundle.css" rel="stylesheet" integrity="sha384-S5He9W/ycWxLrmqRI+6B4V1TOIe0rK0NKdUpD8M61yjawdrgmpxiC/EwmNGkUkcd" crossorigin="use-credentials">
+  <script src="../assets/js/vendor.bundle.js" defer="defer" integrity="sha384-KOHLjGo0rQ+C8SOiWbOw8KN2r6NlfN+E6Jlre5dqkZJLv2NCk3EzaQClYi7qJBtc" crossorigin="use-credentials"></script>
+
+  <!-- test: already exists integrity attribute -->
+  <script src="../assets/js/no-integrity.bundle.js" integrity="ignore me" defer="defer"></script>
+
+  <!-- test: not processed script, because the attribute is invalid -->
+  <script x-src="./not-processed-script.js" defer="defer"></script>
+
+  <!-- test: not processed script, because it's loaded via url -->
+  <script src="//cdn-script.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+
+  <!-- load source image -->
+  <img src="../assets/img/image.697ef306.png">
+</body>
+</html>
diff --git a/test/cases/integrity/src/image.png → ...s/integrity-publicPath-auto/src/image.png b/test/cases/integrity/src/image.png → ...s/integrity-publicPath-auto/src/image.png
diff --git a/test/cases/integrity/src/index.html → .../integrity-publicPath-auto/src/index.html b/test/cases/integrity/src/index.html → .../integrity-publicPath-auto/src/index.html
diff --git a/test/cases/integrity/src/main.js → ...ses/integrity-publicPath-auto/src/main.js b/test/cases/integrity/src/main.js → ...ses/integrity-publicPath-auto/src/main.js
diff --git a/test/cases/integrity/src/no-integrity.js → ...grity-publicPath-auto/src/no-integrity.js b/test/cases/integrity/src/no-integrity.js → ...grity-publicPath-auto/src/no-integrity.js
diff --git a/test/cases/integrity/src/style.css → ...s/integrity-publicPath-auto/src/style.css b/test/cases/integrity/src/style.css → ...s/integrity-publicPath-auto/src/style.css
diff --git a/test/cases/integrity/src/vendor.css → .../integrity-publicPath-auto/src/vendor.css b/test/cases/integrity/src/vendor.css → .../integrity-publicPath-auto/src/vendor.css
diff --git a/test/cases/integrity/src/vendor.js → ...s/integrity-publicPath-auto/src/vendor.js b/test/cases/integrity/src/vendor.js → ...s/integrity-publicPath-auto/src/vendor.js
diff --git a/test/cases/integrity-publicPath-auto/webpack.config.js b/test/cases/integrity-publicPath-auto/webpack.config.js
@@ -0,0 +1,51 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('../../../');
+
+module.exports = {
+  //mode: 'development',
+  mode: 'production',
+  target: 'web',
+
+  output: {
+    publicPath: 'auto', // test empty
+    path: path.join(__dirname, 'dist/'),
+    crossOriginLoading: 'use-credentials', // required for test Subresource Integrity
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        //jquery: 'https://code.jquery.com/ui/1.13.2/jquery-ui.min.js',
+        //test: the relative asset file must be the same as pathname of `compilation.assets`
+        'pages/index': './src/index.html',
+      },
+
+      js: {
+        filename: 'assets/js/[name].bundle.js',
+      },
+
+      css: {
+        filename: 'assets/css/[name].bundle.css',
+      },
+
+      integrity: true, // test the `true` value
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-loader'],
+      },
+
+      {
+        test: /\.(png|jpe?g|ico|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/img/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/css/style.bundle.css b/test/cases/integrity-publicPath-empty/expected/assets/css/style.bundle.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/css/vendor.bundle.css b/test/cases/integrity-publicPath-empty/expected/assets/css/vendor.bundle.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/img/image.697ef306.png b/test/cases/integrity-publicPath-empty/expected/assets/img/image.697ef306.png
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/js/main.bundle.js b/test/cases/integrity-publicPath-empty/expected/assets/js/main.bundle.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/js/no-integrity.bundle.js b/test/cases/integrity-publicPath-empty/expected/assets/js/no-integrity.bundle.js
@@ -0,0 +1 @@
+console.log(">> ignore integrity");
diff --git a/test/cases/integrity-publicPath-empty/expected/assets/js/vendor.bundle.js b/test/cases/integrity-publicPath-empty/expected/assets/js/vendor.bundle.js
@@ -0,0 +1 @@
+console.log(">> vendor");
diff --git a/test/cases/integrity/expected/index.html → ...rity-publicPath-empty/expected/index.html b/test/cases/integrity/expected/index.html → ...rity-publicPath-empty/expected/index.html
diff --git a/test/cases/integrity-publicPath-empty/src/image.png b/test/cases/integrity-publicPath-empty/src/image.png
diff --git a/test/cases/integrity-publicPath-empty/src/index.html b/test/cases/integrity-publicPath-empty/src/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+
+  <!-- load source style -->
+  <link href="./style.css" rel="stylesheet">
+
+  <!-- load source script -->
+  <script src="./main.js" defer="defer"></script>
+
+  <!-- test: mixed order of css and js files -->
+  <link href="./vendor.css" rel="stylesheet">
+  <script src="./vendor.js" defer="defer"></script>
+
+  <!-- test: already exists integrity attribute -->
+  <script src="./no-integrity.js" integrity="ignore me" defer="defer"></script>
+
+  <!-- test: not processed script, because the attribute is invalid -->
+  <script x-src="./not-processed-script.js" defer="defer"></script>
+
+  <!-- test: not processed script, because it's loaded via url -->
+  <script src="//cdn-script.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+
+  <!-- load source image -->
+  <img src="./image.png">
+</body>
+</html>
diff --git a/test/cases/integrity-publicPath-empty/src/main.js b/test/cases/integrity-publicPath-empty/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/integrity-publicPath-empty/src/no-integrity.js b/test/cases/integrity-publicPath-empty/src/no-integrity.js
@@ -0,0 +1 @@
+console.log('>> ignore integrity');
diff --git a/test/cases/integrity-publicPath-empty/src/style.css b/test/cases/integrity-publicPath-empty/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-empty/src/vendor.css b/test/cases/integrity-publicPath-empty/src/vendor.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/integrity-publicPath-empty/src/vendor.js b/test/cases/integrity-publicPath-empty/src/vendor.js
@@ -0,0 +1 @@
+console.log('>> vendor');
diff --git a/test/cases/integrity/webpack.config.js → ...egrity-publicPath-empty/webpack.config.js b/test/cases/integrity/webpack.config.js → ...egrity-publicPath-empty/webpack.config.js
@@ -7,6 +7,7 @@ module.exports = {
   target: 'web',
 
   output: {
+    publicPath: '', // test empty
     path: path.join(__dirname, 'dist/'),
     crossOriginLoading: 'use-credentials', // required for test Subresource Integrity
   },

diff --git a/test/cases/integrity-publicPath-root/expected/assets/css/style.bundle.css b/test/cases/integrity-publicPath-root/expected/assets/css/style.bundle.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-root/expected/assets/css/vendor.bundle.css b/test/cases/integrity-publicPath-root/expected/assets/css/vendor.bundle.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/integrity-publicPath-root/expected/assets/img/image.697ef306.png b/test/cases/integrity-publicPath-root/expected/assets/img/image.697ef306.png
diff --git a/test/cases/integrity-publicPath-root/expected/assets/js/main.bundle.js b/test/cases/integrity-publicPath-root/expected/assets/js/main.bundle.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/integrity-publicPath-root/expected/assets/js/no-integrity.bundle.js b/test/cases/integrity-publicPath-root/expected/assets/js/no-integrity.bundle.js
@@ -0,0 +1 @@
+console.log(">> ignore integrity");
diff --git a/test/cases/integrity-publicPath-root/expected/assets/js/vendor.bundle.js b/test/cases/integrity-publicPath-root/expected/assets/js/vendor.bundle.js
@@ -0,0 +1 @@
+console.log(">> vendor");
diff --git a/test/cases/integrity-publicPath-root/expected/pages/index.html b/test/cases/integrity-publicPath-root/expected/pages/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+
+  <!-- load source style -->
+  <link href="/assets/css/style.bundle.css" rel="stylesheet" integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E" crossorigin="use-credentials">
+
+  <!-- load source script -->
+  <script src="/assets/js/main.bundle.js" defer="defer" integrity="sha384-E4IoJ3Xutt/6tUVDjvtPwDTTlCfU5oG199UoqWShFCNx6mb4tdpcPLu7sLzNc8Pe" crossorigin="use-credentials"></script>
+
+  <!-- test: mixed order of css and js files -->
+  <link href="/assets/css/vendor.bundle.css" rel="stylesheet" integrity="sha384-S5He9W/ycWxLrmqRI+6B4V1TOIe0rK0NKdUpD8M61yjawdrgmpxiC/EwmNGkUkcd" crossorigin="use-credentials">
+  <script src="/assets/js/vendor.bundle.js" defer="defer" integrity="sha384-KOHLjGo0rQ+C8SOiWbOw8KN2r6NlfN+E6Jlre5dqkZJLv2NCk3EzaQClYi7qJBtc" crossorigin="use-credentials"></script>
+
+  <!-- test: already exists integrity attribute -->
+  <script src="/assets/js/no-integrity.bundle.js" integrity="ignore me" defer="defer"></script>
+
+  <!-- test: not processed script, because the attribute is invalid -->
+  <script x-src="./not-processed-script.js" defer="defer"></script>
+
+  <!-- test: not processed script, because it's loaded via url -->
+  <script src="//cdn-script.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+
+  <!-- load source image -->
+  <img src="/assets/img/image.697ef306.png">
+</body>
+</html>
diff --git a/test/cases/integrity-publicPath-root/src/image.png b/test/cases/integrity-publicPath-root/src/image.png
diff --git a/test/cases/integrity-publicPath-root/src/index.html b/test/cases/integrity-publicPath-root/src/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+
+  <!-- load source style -->
+  <link href="./style.css" rel="stylesheet">
+
+  <!-- load source script -->
+  <script src="./main.js" defer="defer"></script>
+
+  <!-- test: mixed order of css and js files -->
+  <link href="./vendor.css" rel="stylesheet">
+  <script src="./vendor.js" defer="defer"></script>
+
+  <!-- test: already exists integrity attribute -->
+  <script src="./no-integrity.js" integrity="ignore me" defer="defer"></script>
+
+  <!-- test: not processed script, because the attribute is invalid -->
+  <script x-src="./not-processed-script.js" defer="defer"></script>
+
+  <!-- test: not processed script, because it's loaded via url -->
+  <script src="//cdn-script.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+
+  <!-- load source image -->
+  <img src="./image.png">
+</body>
+</html>
diff --git a/test/cases/integrity-publicPath-root/src/main.js b/test/cases/integrity-publicPath-root/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/integrity-publicPath-root/src/no-integrity.js b/test/cases/integrity-publicPath-root/src/no-integrity.js
@@ -0,0 +1 @@
+console.log('>> ignore integrity');
diff --git a/test/cases/integrity-publicPath-root/src/style.css b/test/cases/integrity-publicPath-root/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-root/src/vendor.css b/test/cases/integrity-publicPath-root/src/vendor.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/integrity-publicPath-root/src/vendor.js b/test/cases/integrity-publicPath-root/src/vendor.js
@@ -0,0 +1 @@
+console.log('>> vendor');
diff --git a/test/cases/integrity-publicPath-root/webpack.config.js b/test/cases/integrity-publicPath-root/webpack.config.js
@@ -0,0 +1,51 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('../../../');
+
+module.exports = {
+  //mode: 'development',
+  mode: 'production',
+  target: 'web',
+
+  output: {
+    publicPath: '/', // test the root path
+    path: path.join(__dirname, 'dist/'),
+    crossOriginLoading: 'use-credentials', // required for test Subresource Integrity
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        //jquery: 'https://code.jquery.com/ui/1.13.2/jquery-ui.min.js',
+        //test: the relative asset file must be the same as pathname of `compilation.assets`
+        'pages/index': './src/index.html',
+      },
+
+      js: {
+        filename: 'assets/js/[name].bundle.js',
+      },
+
+      css: {
+        filename: 'assets/css/[name].bundle.css',
+      },
+
+      integrity: true, // test the `true` value
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-loader'],
+      },
+
+      {
+        test: /\.(png|jpe?g|ico|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'assets/img/[name].[hash:8][ext]',
+        },
+      },
+    ],
+  },
+};