Merge pull request #155 from waysact/chunk-multiple-files

Fix handling of chunks with multiple files

Author: jscheid

examples/issue-154/index.js

@@ -0,0 +1,10 @@
+import "./style.css";
+
+window.addEventListener("load", () => {
+  const { integrity } = document.querySelector("link");
+  const loaded = getComputedStyle(document.body).background.match(
+    /rgb\(255, 0, 0\)/
+  );
+
+  console.log(integrity && loaded ? "ok" : "error");
+});

examples/issue-154/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "issue-154",
+  "description": "Test case for https://github.com/waysact/webpack-subresource-integrity/issues/154",
+  "version": "1.0.0",
+  "license": "MIT",
+  "private": true,
+  "devDependencies": {
+    "css-loader": "^5.1.0",
+    "expect": "^26.6.2",
+    "html-webpack-plugin": "^5.2.0",
+    "mini-css-extract-plugin": "^1.3.8",
+    "nyc": "*",
+    "webpack": "^5.24.0",
+    "webpack-cli": "4",
+    "webpack-subresource-integrity": "*",
+    "wsi-test-helper": "*"
+  }
+}

examples/issue-154/style.css

@@ -0,0 +1,3 @@
+body {
+    background: red;
+}

examples/issue-154/webpack.config.js

@@ -0,0 +1,54 @@
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const expect = require("expect");
+const { RunInPuppeteerPlugin } = require("wsi-test-helper");
+
+module.exports = {
+  // mode: "development",
+  devtool: "cheap-module-source-map",
+  entry: "./index.js",
+  output: {
+    filename: "[contenthash].js",
+    chunkFilename: "[contenthash].chunk.js",
+    crossOriginLoading: "anonymous",
+  },
+  optimization: {
+    moduleIds: "deterministic",
+    realContentHash: true,
+    chunkIds: "deterministic",
+    runtimeChunk: "single",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+    ],
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: `[contenthash].css`,
+      chunkFilename: `[contenthash].chunk.css`,
+    }),
+    new SubresourceIntegrityPlugin({ enabled: true }),
+    new HtmlWebpackPlugin(),
+    {
+      apply: (compiler) => {
+        compiler.hooks.done.tap("wsi-test", (stats) => {
+          const cssAsset = stats
+            .toJson()
+            .assets.find((asset) => asset.name.match(/\.css$/));
+
+          expect(cssAsset.info.contenthash).toBeDefined();
+          expect(
+            cssAsset.info.contenthash.find((hash) => hash.match(/^sha/))
+          ).toBeDefined();
+          expect(cssAsset.integrity).toBeDefined();
+        });
+      },
+    },
+    new RunInPuppeteerPlugin(),
+  ],
+};

webpack-subresource-integrity/index.ts

@@ -298,49 +298,50 @@ export class SubresourceIntegrityPlugin {
       .forEach((childChunk: Chunk) => {
         const files = Array.from(childChunk.files);
 
-        let sourcePath = files[files.length - 1];
-        if (!sourcePath) {
-          return;
-        }
+        files.forEach((sourcePath) => {
+          if (!sourcePath) {
+            return;
+          }
 
-        if (assets[sourcePath]) {
-          this.warnIfHotUpdate(compilation, assets[sourcePath].source());
-          const newAsset = this.replaceAsset(
-            compilation.compiler,
-            assets,
-            hashByChunkId,
-            sourcePath
-          );
-          const integrity = computeIntegrity(
-            this.options.hashFuncNames,
-            newAsset.source()
-          );
-
-          if (childChunk.id !== null) {
-            hashByChunkId.set(childChunk.id, integrity);
+          if (assets[sourcePath]) {
+            this.warnIfHotUpdate(compilation, assets[sourcePath].source());
+            const newAsset = this.replaceAsset(
+              compilation.compiler,
+              assets,
+              hashByChunkId,
+              sourcePath
+            );
+            const integrity = computeIntegrity(
+              this.options.hashFuncNames,
+              newAsset.source()
+            );
+
+            if (childChunk.id !== null) {
+              hashByChunkId.set(childChunk.id, integrity);
+            }
+            this.updateAssetIntegrity(sourcePath, integrity);
+            compilation.updateAsset(
+              sourcePath,
+              (x) => x,
+              (assetInfo) =>
+                assetInfo && {
+                  ...assetInfo,
+                  contenthash: Array.isArray(assetInfo.contenthash)
+                    ? [...new Set([...assetInfo.contenthash, integrity])]
+                    : assetInfo.contenthash
+                    ? [assetInfo.contenthash, integrity]
+                    : integrity,
+                }
+            );
+          } else {
+            this.warnOnce(
+              compilation,
+              `No asset found for source path '${sourcePath}', options are ${Object.keys(
+                assets
+              ).join(", ")}`
+            );
           }
-          this.updateAssetIntegrity(sourcePath, integrity);
-          compilation.updateAsset(
-            sourcePath,
-            (x) => x,
-            (assetInfo) =>
-              assetInfo && {
-                ...assetInfo,
-                contenthash: Array.isArray(assetInfo.contenthash)
-                  ? [...new Set([...assetInfo.contenthash, integrity])]
-                  : assetInfo.contenthash
-                  ? [assetInfo.contenthash, integrity]
-                  : integrity,
-              }
-          );
-        } else {
-          this.warnOnce(
-            compilation,
-            `No asset found for source path '${sourcePath}', options are ${Object.keys(
-              assets
-            ).join(", ")}`
-          );
-        }
+        });
       });
   };
 
@@ -746,16 +747,21 @@ export class SubresourceIntegrityPlugin {
       );
 
       compiler.hooks.compilation.tap(
-        "DefaultStatsFactoryPlugin",
+        thisPluginName,
         (compilation: Compilation) => {
           compilation.hooks.statsFactory.tap(thisPluginName, (statsFactory) => {
             statsFactory.hooks.extract
               .for("asset")
               .tap(thisPluginName, (object, asset) => {
-                if (this.assetIntegrity.has(asset.name)) {
-                  (object as any).integrity = String(
-                    this.assetIntegrity.get(asset.name)
-                  );
+                const contenthash = asset.info?.contenthash;
+                if (contenthash) {
+                  const shaHashes = (Array.isArray(contenthash)
+                    ? contenthash
+                    : [contenthash]
+                  ).filter((hash: any) => String(hash).match(/^sha[0-9]+-/));
+                  if (shaHashes.length > 0) {
+                    (object as any).integrity = shaHashes.join(" ");
+                  }
                 }
               });
           });