Allow different policies on individual HtmlWebpackPlugin instances (#26)

AnujRNair · web-flow · commit 6b751216adf5 · 2018-12-20T16:09:41.000-08:00
* renaming disableCspPlugin to cspPlugin.enabled to be more inline with the main enabled setting

* Adding the option to allow individual policies on a specific html webpack plugin instance

* Updating README to reflect the new changes
diff --git a/README.md b/README.md
@@ -40,10 +40,24 @@ This `CspHtmlWebpackPlugin` accepts 2 params with the following structure:
 * `{object}` Policy (optional) - a flat object which defines your CSP policy. Valid keys and values can be found on the [MDN CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) page. Values can either be a string or an array of strings.
 * `{object}` Additional Options (optional) - a flat object with the optional configuration options:
   * `{boolean}` devAllowUnsafe - if you as the developer want to allow `unsafe-inline`/`unsafe-eval` and _not_ include hashes for inline scripts. If any hashes are included in the policy, modern browsers ignore the `unsafe-inline` rule.
-  * `{boolean|Function}` enabled - if false, or the function returns false, the empty CSP tag will be stripped from the html output. The `htmlPluginData` is passed into the function as it's first param.
+  * `{boolean|Function}` enabled - if false, or the function returns false, the empty CSP tag will be stripped from the html output. 
+    * The `htmlPluginData` is passed into the function as it's first param.
+    * If `enabled` is set the false, it will disable generating a CSP for all instances of `HtmlWebpackPlugin` in your webpack config.
   * `{string}` hashingMethod - accepts 'sha256', 'sha384', 'sha512' - your node version must also accept this hashing method.
 
-_Note: CSP runs on all files created by HTMLWebpackPlugin. You can disable it for a particular instance by setting `disableCspPlugin` to `true` in the HTMLWebpackPlugin options
+The plugin also adds a new config option onto each `HtmlWebpackPlugin` instance:
+* `{object}` cspPlugin - an object containing the following properties:
+  * `{boolean}` enabled - if false, the CSP tag will be removed from the HTML which this HtmlWebpackPlugin instance is generating.
+  * `{object}` policy - A custom policy which should be applied only to this instance of the HtmlWebpackPlugin
+
+Note that policies are merged in the following order:
+```
+> HtmlWebpackPlugin cspPlugin.policy
+> CspHtmlWebpackPlugin policy
+> CspHtmlWebpackPlugin defaultPolicy
+```
+
+If 2 policies have the same key/policy rule, the former policy will override the latter policy. Entries in a specific rule will not be merged; they will be replaced.
 
 #### Default Policy:
 
@@ -68,6 +82,18 @@ _Note: CSP runs on all files created by HTMLWebpackPlugin. You can disable it fo
 
 #### Full Configuration with all options:
 ```
+new HtmlWebpackPlugin({
+  cspPlugin: {
+    enabled: true,
+    policy: {
+      'base-uri': "'self'",
+      'object-src': "'none'",
+      'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
+      'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
+    }
+  }
+});
+
 new CspHtmlWebpackPlugin({
   'base-uri': "'self'",
   'object-src': "'none'",
diff --git a/plugin.jest.js b/plugin.jest.js
@@ -112,6 +112,131 @@ describe('CspHtmlWebpackPlugin', () => {
       });
     });
 
+    describe('HtmlWebpackPlugin defined policy', () => {
+      it('inserts a custom policy from a specific HtmlWebpackPlugin instance, if one is defined', done => {
+        const config = createWebpackConfig([
+          new HtmlWebpackPlugin({
+            filename: path.join(WEBPACK_OUTPUT_DIR, 'index.html'),
+            template: path.join(
+              __dirname,
+              'test-utils',
+              'fixtures',
+              'with-nothing.html'
+            ),
+            cspPlugin: {
+              policy: {
+                'base-uri': ["'self'", 'https://slack.com'],
+                'font-src': ["'self'", "'https://a-slack-edge.com'"],
+                'script-src': ["'self'"],
+                'style-src': ["'self'"],
+                'connect-src': ["'self'"]
+              }
+            }
+          }),
+          new CspHtmlWebpackPlugin()
+        ]);
+
+        webpackCompile(config, csps => {
+          const expected =
+            "base-uri 'self' https://slack.com;" +
+            " object-src 'none';" +
+            " script-src 'self';" +
+            " style-src 'self';" +
+            " font-src 'self' 'https://a-slack-edge.com';" +
+            " connect-src 'self'";
+
+          expect(csps['index.html']).toEqual(expected);
+          done();
+        });
+      });
+
+      it('merges and overwrites policies, with a html webpack plugin instance policy taking precedence, followed by the csp instance, and then the default policy', done => {
+        const config = createWebpackConfig([
+          new HtmlWebpackPlugin({
+            filename: path.join(WEBPACK_OUTPUT_DIR, 'index.html'),
+            template: path.join(
+              __dirname,
+              'test-utils',
+              'fixtures',
+              'with-nothing.html'
+            ),
+            cspPlugin: {
+              policy: {
+                'font-src': [
+                  "'https://a-slack-edge.com'",
+                  "'https://b-slack-edge.com'"
+                ]
+              }
+            }
+          }),
+          new CspHtmlWebpackPlugin({
+            'base-uri': ["'self'", 'https://slack.com'],
+            'font-src': ["'self'"]
+          })
+        ]);
+
+        webpackCompile(config, csps => {
+          const expected =
+            "base-uri 'self' https://slack.com;" + // this should be included as it's not defined in the HtmlWebpackPlugin instance
+            " object-src 'none';" + // this comes from the default policy
+            " script-src 'unsafe-inline' 'self' 'unsafe-eval';" + // this comes from the default policy
+            " style-src 'unsafe-inline' 'self' 'unsafe-eval';" + // this comes from the default policy
+            " font-src 'https://a-slack-edge.com' 'https://b-slack-edge.com'"; // this should only include the HtmlWebpackPlugin instance policy
+
+          expect(csps['index.html']).toEqual(expected);
+          done();
+        });
+      });
+
+      it('only adds a custom policy to the html file which has a policy defined; uses the default policy for any others', done => {
+        const config = createWebpackConfig([
+          new HtmlWebpackPlugin({
+            filename: path.join(WEBPACK_OUTPUT_DIR, 'index-csp.html'),
+            template: path.join(
+              __dirname,
+              'test-utils',
+              'fixtures',
+              'with-nothing.html'
+            ),
+            cspPlugin: {
+              policy: {
+                'script-src': ["'https://a-slack-edge.com'"],
+                'style-src': ["'https://b-slack-edge.com'"]
+              }
+            }
+          }),
+          new HtmlWebpackPlugin({
+            filename: path.join(WEBPACK_OUTPUT_DIR, 'index-no-csp.html'),
+            template: path.join(
+              __dirname,
+              'test-utils',
+              'fixtures',
+              'with-nothing.html'
+            )
+          }),
+          new CspHtmlWebpackPlugin()
+        ]);
+
+        webpackCompile(config, csps => {
+          const expectedCustom =
+            "base-uri 'self';" +
+            " object-src 'none';" +
+            " script-src 'https://a-slack-edge.com';" +
+            " style-src 'https://b-slack-edge.com'";
+
+          const expectedDefault =
+            "base-uri 'self';" +
+            " object-src 'none';" +
+            " script-src 'unsafe-inline' 'self' 'unsafe-eval';" +
+            " style-src 'unsafe-inline' 'self' 'unsafe-eval'";
+
+          expect(csps['index-csp.html']).toEqual(expectedCustom);
+          expect(csps['index-no-csp.html']).toEqual(expectedDefault);
+          done();
+        });
+      });
+    });
+
     describe('unsafe-inline / unsafe-eval', () => {
       it('skips the hashing of the scripts and styles it finds if devAllowUnsafe is true', done => {
         const config = createWebpackConfig([
@@ -189,7 +314,7 @@ describe('CspHtmlWebpackPlugin', () => {
     });
   });
 
-  describe('Meta tag', () => {
+  describe('Enabled check', () => {
     it('removes the empty Content Security Policy meta tag if enabled is the bool false', done => {
       const config = createWebpackConfig([
         new HtmlWebpackPlugin({
@@ -216,7 +341,7 @@ describe('CspHtmlWebpackPlugin', () => {
       });
     });
 
-    it('removes the empty Content Security Policy meta tag if the `disableCspPlugin` option in HtmlWebpack Plugin is true', done => {
+    it('removes the empty Content Security Policy meta tag if the `cspPlugin.disabled` option in HtmlWebpack Plugin is true', done => {
       const config = createWebpackConfig([
         new HtmlWebpackPlugin({
           filename: path.join(WEBPACK_OUTPUT_DIR, 'index.html'),
@@ -226,7 +351,9 @@ describe('CspHtmlWebpackPlugin', () => {
             'fixtures',
             'with-nothing.html'
           ),
-          disableCspPlugin: true
+          cspPlugin: {
+            enabled: false
+          }
         }),
         new CspHtmlWebpackPlugin()
       ]);
@@ -264,6 +391,43 @@ describe('CspHtmlWebpackPlugin', () => {
       });
     });
 
+    it('only removes the Content Security Policy meta tag from the HtmlWebpackPlugin instance which has been disabled', done => {
+      const config = createWebpackConfig([
+        new HtmlWebpackPlugin({
+          filename: path.join(WEBPACK_OUTPUT_DIR, 'index-enabled.html'),
+          template: path.join(
+            __dirname,
+            'test-utils',
+            'fixtures',
+            'with-nothing.html'
+          )
+        }),
+        new HtmlWebpackPlugin({
+          filename: path.join(WEBPACK_OUTPUT_DIR, 'index-disabled.html'),
+          template: path.join(
+            __dirname,
+            'test-utils',
+            'fixtures',
+            'with-nothing.html'
+          ),
+          cspPlugin: {
+            enabled: false
+          }
+        }),
+        new CspHtmlWebpackPlugin()
+      ]);
+
+      webpackCompile(config, (csps, selectors) => {
+        expect(csps['index-enabled.html']).toBeDefined();
+        expect(csps['index-disabled.html']).toBeUndefined();
+        expect(selectors['index-enabled.html']('meta').length).toEqual(2);
+        expect(selectors['index-disabled.html']('meta').length).toEqual(1);
+        done();
+      });
+    });
+  });
+
+  describe('Meta tag', () => {
     it('still adds the CSP policy into the CSP meta tag even if the content attribute is missing', done => {
       const config = createWebpackConfig([
         new HtmlWebpackPlugin({
diff --git a/plugin.js b/plugin.js
@@ -38,9 +38,8 @@ class CspHtmlWebpackPlugin {
    * @param {object} additionalOpts - additional config options - see defaultAdditionalOpts above for options available
    */
   constructor(policy = {}, additionalOpts = {}) {
-    // the policy we want to use
-    this.policy = Object.freeze(Object.assign({}, defaultPolicy, policy));
-    this.userPolicy = Object.freeze(policy);
+    // the policy passed in from the CspHtmlWebpackPlugin instance
+    this.cspPluginPolicy = Object.freeze(policy);
 
     // the additional options that this plugin allows
     this.opts = Object.assign({}, defaultAdditionalOpts, additionalOpts);
@@ -53,17 +52,44 @@ class CspHtmlWebpackPlugin {
     }
   }
 
+  /**
+   * Build the eventual policy we want to use, combining default, csp instance and html webpack instance policies defined
+   * Latter policy rules always override former
+   * @param htmlPluginData
+   * @param compileCb
+   */
+  mergePolicy(htmlPluginData, compileCb) {
+    // the policy passed in from the HtmlWebpackPlugin instance
+    this.htmlPluginPolicy = get(
+      htmlPluginData,
+      'plugin.options.cspPlugin.policy',
+      {}
+    );
+
+    // CspHtmlWebpackPlugin and HtmlWebpackPlugin policies merged
+    this.userPolicy = Object.freeze(
+      Object.assign({}, this.cspPluginPolicy, this.htmlPluginPolicy)
+    );
+
+    // defaultPolicy and userPolicy merged
+    this.policy = Object.freeze(
+      Object.assign({}, defaultPolicy, this.userPolicy)
+    );
+
+    return compileCb(null, htmlPluginData);
+  }
+
   /**
    * Checks to see whether the plugin is enabled. this.opts.enabled can be a function or bool here
    * @param htmlPluginData - the htmlPluginData from compilation
    * @return {boolean} - whether the plugin is enabled or not
    */
   isEnabled(htmlPluginData) {
-    const disableCspPlugin = get(
+    const cspPluginEnabled = get(
       htmlPluginData,
-      'plugin.options.disableCspPlugin'
+      'plugin.options.cspPlugin.enabled'
     );
-    if (disableCspPlugin && disableCspPlugin === true) {
+    if (cspPluginEnabled === false) {
       // the HtmlWebpackPlugin instance has disabled the plugin
       return false;
     }
@@ -198,12 +224,22 @@ class CspHtmlWebpackPlugin {
       compiler.hooks.compilation.tap('CspHtmlWebpackPlugin', compilation => {
         if (HtmlWebpackPlugin && HtmlWebpackPlugin.getHooks) {
           // HTMLWebpackPlugin@4
+          HtmlWebpackPlugin.getHooks(
+            compilation
+          ).beforeAssetTagGeneration.tapAsync(
+            'CspHtmlWebpackPlugin',
+            this.mergePolicy.bind(this)
+          );
           HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
             'CspHtmlWebpackPlugin',
             this.processCsp.bind(this)
           );
         } else {
           // HTMLWebpackPlugin@3
+          compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tapAsync(
+            'CspHtmlWebpackPlugin',
+            this.mergePolicy.bind(this)
+          );
           compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tapAsync(
             'CspHtmlWebpackPlugin',
             this.processCsp.bind(this)
@@ -212,6 +248,10 @@ class CspHtmlWebpackPlugin {
       });
     } else {
       compiler.plugin('compilation', compilation => {
+        compilation.plugin(
+          'html-webpack-plugin-before-html-generation',
+          this.mergePolicy.bind(this)
+        );
         compilation.plugin(
           'html-webpack-plugin-after-html-processing',
           this.processCsp.bind(this)
