Merge pull request #46 from SteffenBlake/integrity-broken-by-complex-…

…root-public-path fix: error when used integrity with complex root publicPath, #45
webdiscus · Nov 1, 2023 · 62eac55 · 62eac55
2 parents f7e5e04 + 105fbad
commit 62eac55
Show file tree

Hide file tree

Showing 19 changed files with 138 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 2.15.2 (2023-10-31)
+
+- fix: error when used integrity with complex root publicPath, #45 ( @SteffenBlake )
+
 ## 2.15.1 (2023-10-28)
 
 - fix: error when used integrity with root publicPath, #42, #43

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "2.15.1",
+  "version": "2.15.2",
   "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
@@ -849,7 +849,7 @@ class Collection {
               if (Options.isAutoPublicPath()) {
                 pathname = path.join(entryDirname, pathname);
               } else if (Options.isRootPublicPath()) {
-                pathname = pathname.slice(1);
+                pathname = pathname.slice(Options.getPublicPath().length);
               }
 
               const assetContent = compilation.assets[pathname].source();

diff --git a/test/cases/integrity-publicPath-root-complex/expected/assets/css/style.bundle.css b/test/cases/integrity-publicPath-root-complex/expected/assets/css/style.bundle.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-root-complex/expected/assets/css/vendor.bundle.css b/test/cases/integrity-publicPath-root-complex/expected/assets/css/vendor.bundle.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/.../cases/integrity-publicPath-root-complex/expected/assets/img/image.697ef306.png b/.../cases/integrity-publicPath-root-complex/expected/assets/img/image.697ef306.png
diff --git a/test/cases/integrity-publicPath-root-complex/expected/assets/js/main.bundle.js b/test/cases/integrity-publicPath-root-complex/expected/assets/js/main.bundle.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/integrity-publicPath-root-complex/expected/assets/js/no-integrity.bundle.js b/test/cases/integrity-publicPath-root-complex/expected/assets/js/no-integrity.bundle.js
@@ -0,0 +1 @@
+console.log(">> ignore integrity");
diff --git a/test/cases/integrity-publicPath-root-complex/expected/assets/js/vendor.bundle.js b/test/cases/integrity-publicPath-root-complex/expected/assets/js/vendor.bundle.js
@@ -0,0 +1 @@
+console.log(">> vendor");
diff --git a/test/cases/integrity-publicPath-root-complex/expected/pages/index.html b/test/cases/integrity-publicPath-root-complex/expected/pages/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+
+  <!-- load source style -->
+  <link href="/test/assets/css/style.bundle.css" rel="stylesheet" integrity="sha384-gaDmgJjLpipN1Jmuc98geFnDjVqWn1fixlG0Ab90qFyUIJ4ARXlKBsMGumxTSu7E" crossorigin="use-credentials">
+
+  <!-- load source script -->
+  <script src="/test/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="/test/assets/css/vendor.bundle.css" rel="stylesheet" integrity="sha384-S5He9W/ycWxLrmqRI+6B4V1TOIe0rK0NKdUpD8M61yjawdrgmpxiC/EwmNGkUkcd" crossorigin="use-credentials">
+  <script src="/test/assets/js/vendor.bundle.js" defer="defer" integrity="sha384-KOHLjGo0rQ+C8SOiWbOw8KN2r6NlfN+E6Jlre5dqkZJLv2NCk3EzaQClYi7qJBtc" crossorigin="use-credentials"></script>
+
+  <!-- test: already exists integrity attribute -->
+  <script src="/test/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="/test/assets/img/image.697ef306.png">
+</body>
+</html>
diff --git a/test/cases/integrity-publicPath-root-complex/src/image.png b/test/cases/integrity-publicPath-root-complex/src/image.png
diff --git a/test/cases/integrity-publicPath-root-complex/src/index.html b/test/cases/integrity-publicPath-root-complex/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-complex/src/main.js b/test/cases/integrity-publicPath-root-complex/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/integrity-publicPath-root-complex/src/no-integrity.js b/test/cases/integrity-publicPath-root-complex/src/no-integrity.js
@@ -0,0 +1 @@
+console.log('>> ignore integrity');
diff --git a/test/cases/integrity-publicPath-root-complex/src/style.css b/test/cases/integrity-publicPath-root-complex/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/integrity-publicPath-root-complex/src/vendor.css b/test/cases/integrity-publicPath-root-complex/src/vendor.css
@@ -0,0 +1,3 @@
+h2 {
+  color: green;
+}
diff --git a/test/cases/integrity-publicPath-root-complex/src/vendor.js b/test/cases/integrity-publicPath-root-complex/src/vendor.js
@@ -0,0 +1 @@
+console.log('>> vendor');
diff --git a/test/cases/integrity-publicPath-root-complex/webpack.config.js b/test/cases/integrity-publicPath-root-complex/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/', // 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]',
+        },
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -310,6 +310,7 @@ describe('integrity', () => {
 
   test('script, link, publicPath=""', () => compareFiles('integrity-publicPath-empty'));
   test('script, link, publicPath="/"', () => compareFiles('integrity-publicPath-root'));
+  test('script, link, publicPath="/test/"', () => compareFiles('integrity-publicPath-root-complex'));
   test('script, link, publicPath="auto"', () => compareFiles('integrity-publicPath-auto'));
 
   test('split chunks', () => compareFiles('integrity-split-chunks'));