fix: add nonce if __webpack_nonce__ has been defined

webpack-contrib · Feb 27, 2024 · c7f0aee · c7f0aee
1 parent 878822b
commit c7f0aee
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 0 deletions.
diff --git a/src/index.js b/src/index.js
@@ -899,6 +899,11 @@ class MiniCssExtractPlugin {
                       this.runtimeOptions.linkType
                     )};`
                   : "",
+                `if (${RuntimeGlobals.scriptNonce}) {`,
+                Template.indent(
+                  `linkTag.nonce = ${RuntimeGlobals.scriptNonce};`
+                ),
+                "}",
                 `var onLinkComplete = ${runtimeTemplate.basicFunction("event", [
                   "// avoid mem leaks.",
                   "linkTag.onerror = linkTag.onload = null;",

diff --git a/test/__snapshots__/nonce.test.js.snap b/test/__snapshots__/nonce.test.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`nonce should work when __webpack_nonce__ is defined: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" type=\\"text/css\\" nonce=\\"THE_NONCE\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" nonce=\\"THE_NONCE\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`nonce should work when __webpack_nonce__ is defined: errors 1`] = `Array []`;
+
+exports[`nonce should work when __webpack_nonce__ is defined: warnings 1`] = `Array []`;
+
+exports[`nonce should work when __webpack_nonce__ is not defined: DOM 1`] = `
+"<!DOCTYPE html><html><head>
+  <title>style-loader test</title>
+  <style id=\\"existing-style\\">.existing { color: yellow }</style>
+<link rel=\\"stylesheet\\" type=\\"text/css\\" href=\\"simple.css\\"><script charset=\\"utf-8\\" src=\\"simple.bundle.js\\"></script></head>
+<body>
+  <h1>Body</h1>
+  <div class=\\"target\\"></div>
+  <iframe class=\\"iframeTarget\\"></iframe>
+
+
+</body></html>"
+`;
+
+exports[`nonce should work when __webpack_nonce__ is not defined: errors 1`] = `Array []`;
+
+exports[`nonce should work when __webpack_nonce__ is not defined: warnings 1`] = `Array []`;
diff --git a/test/fixtures/no-nonce.js b/test/fixtures/no-nonce.js
@@ -0,0 +1,2 @@
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "simple" */ './simple.css');
diff --git a/test/fixtures/nonce.js b/test/fixtures/nonce.js
@@ -0,0 +1,4 @@
+__webpack_nonce__ = 'THE_NONCE';
+
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "simple" */ './simple.css');
diff --git a/test/nonce.test.js b/test/nonce.test.js
@@ -0,0 +1,70 @@
+/* eslint-env browser */
+import path from "path";
+
+import MiniCssExtractPlugin from "../src";
+
+import {
+  compile,
+  getCompiler,
+  getErrors,
+  getWarnings,
+  runInJsDom,
+} from "./helpers/index";
+
+describe("nonce", () => {
+  it(`should work when __webpack_nonce__ is not defined`, async () => {
+    const compiler = getCompiler(
+      "no-nonce.js",
+      {},
+      {
+        mode: "none",
+        output: {
+          publicPath: "",
+          path: path.resolve(__dirname, "../outputs"),
+          filename: "[name].bundle.js",
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: "[name].css",
+          }),
+        ],
+      }
+    );
+    const stats = await compile(compiler);
+
+    runInJsDom("main.bundle.js", compiler, stats, (dom) => {
+      expect(dom.serialize()).toMatchSnapshot("DOM");
+    });
+
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+
+  it(`should work when __webpack_nonce__ is defined`, async () => {
+    const compiler = getCompiler(
+      "nonce.js",
+      {},
+      {
+        mode: "none",
+        output: {
+          publicPath: "",
+          path: path.resolve(__dirname, "../outputs"),
+          filename: "[name].bundle.js",
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: "[name].css",
+          }),
+        ],
+      }
+    );
+    const stats = await compile(compiler);
+
+    runInJsDom("main.bundle.js", compiler, stats, (dom) => {
+      expect(dom.serialize()).toMatchSnapshot("DOM");
+    });
+
+    expect(getWarnings(stats)).toMatchSnapshot("warnings");
+    expect(getErrors(stats)).toMatchSnapshot("errors");
+  });
+});