Add better support for preloaded scripts by using data-csp="script-src"

jukben · jukben · commit fb0f1d5d507a · 2021-09-17T10:48:16.000+02:00
diff --git a/plugin.jest.js b/plugin.jest.js
@@ -144,6 +144,33 @@ describe('CspHtmlWebpackPlugin', () => {
       });
     });
 
+    it('inserts the default policy, including sha-256 hashes of other inline scripts and styles found, and nonce hashes of external scripts found using data-csp="script-src" directive', (done) => {
+      const config = createWebpackConfig([
+        new HtmlWebpackPlugin({
+          filename: path.join(WEBPACK_OUTPUT_DIR, 'index.html'),
+          template: path.join(
+            __dirname,
+            'test-utils',
+            'fixtures',
+            'with-preload-script-and-style.html'
+          ),
+        }),
+        new CspHtmlWebpackPlugin(),
+      ]);
+
+      webpackCompile(config, (csps) => {
+        const expected =
+          "base-uri 'self';" +
+          " object-src 'none';" +
+          " script-src 'unsafe-inline' 'self' 'unsafe-eval' 'nonce-mockedbase64string-1' 'nonce-mockedbase64string-2';" +
+          " style-src 'unsafe-inline' 'self' 'unsafe-eval'";
+
+        expect(csps['index.html']).toEqual(expected);
+
+        done();
+      });
+    });
+
     it('inserts a custom policy if one is defined', (done) => {
       const config = createWebpackConfig([
         new HtmlWebpackPlugin({
diff --git a/plugin.js b/plugin.js
@@ -327,7 +327,7 @@ class CspHtmlWebpackPlugin {
     const scriptNonce = this.setNonce(
       $,
       'script-src',
-      'script[src], link[rel="preload"][as="script"]'
+      'script[src], [data-csp="script-src"]'
     );
     const styleNonce = this.setNonce($, 'style-src', 'link[rel="stylesheet"]');
 
diff --git a/test-utils/fixtures/with-preload-script-and-style.html b/test-utils/fixtures/with-preload-script-and-style.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en-US">
+<head>
+    <meta name="author" content="Slack">
+    <title>Slack CSP HTML Webpack Plugin Tests</title>
+    <link rel="preload" href="https://example.com/preload-example.js" as="script" data-csp="script-src">
+</head>
+<body>
+Body
+</body>
+</html>
