An option for disabling unsafe inline (#22)

AnujRNair · web-flow · commit 1cedba72be09 · 2018-12-19T11:47:55.000-08:00
* Adding option for the dev to choose whether to allow unsafe eval/inline in their csp policy or not. Defaults to false for backwards compatibility

* Updating README to reflect the new devAllowUnsafe option
diff --git a/README.md b/README.md
@@ -39,10 +39,11 @@ Finally, add the following tag to your HTML template where you would like to add
 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:
-  * `{string}` hashingMethod - accepts 'sha256', 'sha384', 'sha512' - your node version must also accept this hashing method.
+  * `{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.
+  * `{string}` hashingMethod - accepts 'sha256', 'sha384', 'sha512' - your node version must also accept this hashing method.
 
-_Note: CSP usually runs on all files processed from HTML Webpack plugin, to disable it for a particular instance, set `disableCspPlugin` to `true(boolean)` in [HTML Webpack Plugins Options](https://github.com/jantimon/html-webpack-plugin#options)_
+_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
 
 #### Default Policy:
 
@@ -59,8 +60,9 @@ _Note: CSP usually runs on all files processed from HTML Webpack plugin, to disa
 
 ```
 {
-  hashingMethod: 'sha256',
+  devAllowUnsafe: false,
   enabled: true
+  hashingMethod: 'sha256',
 }
 ```
 
@@ -72,8 +74,9 @@ new CspHtmlWebpackPlugin({
   'script-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"],
   'style-src': ["'unsafe-inline'", "'self'", "'unsafe-eval'"]
 }, {
-  hashingMethod: 'sha256',
+  devAllowUnsafe: false,
   enabled: true
+  hashingMethod: 'sha256',
 })
 ```
 
diff --git a/plugin.js b/plugin.js
@@ -14,6 +14,7 @@ const defaultPolicy = {
 };
 
 const defaultAdditionalOpts = {
+  devAllowUnsafe: false,
   enabled: true,
   hashingMethod: 'sha256'
 };
@@ -76,6 +77,32 @@ class CspHtmlWebpackPlugin {
     return `'${this.opts.hashingMethod}-${hashed}'`;
   }
 
+  /**
+   * Helper function to return the correct policy depending on whether the dev has allowed unsafe eval/inline or not
+   * @param {object} $ - the Cheerio instance
+   * @param {string} policyName - one of 'script-src' and 'style-src'
+   * @param {string} selector - a Cheerio selector string for getting the hashable elements for this policy
+   * @param {object} policyObj - the working CSP policy object
+   * @param {object} userPolicyObj - the sanitized CSP policy object provided by the user
+   * @return {object} the new policy for `policyName`
+   */
+  createPolicyObj($, policyName, selector, policyObj, userPolicyObj) {
+    // Wrapped in flatten([]) to handle both when policy is a string and an array
+    const flattenedUserPolicy = flatten(userPolicyObj[policyName]);
+    if (
+      this.opts.devAllowUnsafe === true &&
+      (flattenedUserPolicy.includes("'unsafe-inline'") ||
+        flattenedUserPolicy.includes("'unsafe-eval'"))
+    ) {
+      return userPolicyObj[policyName];
+    }
+
+    const hashes = $(selector)
+      .map((i, element) => this.hash($(element).html()))
+      .get();
+    return flatten([policyObj[policyName]]).concat(hashes);
+  }
+
   /**
    * Builds the CSP policy by flattening arrays into strings and appending all policies into a single string
    * @param policyObj
@@ -154,28 +181,6 @@ class CspHtmlWebpackPlugin {
     return compileCb(null, htmlPluginData);
   }
 
-  /**
-   * Helper function for transforming script-src and style-src policies.
-   * @param {object} $ - the Cheerio instance
-   * @param {string} policyName - one of 'script-src' and 'style-src'
-   * @param {string} selector - a Cheerio selector string for getting the hashable elements for this policy
-   * @param {object} policyObj - the working CSP policy object
-   * @param {object} userPolicyObj - the sanitized CSP policy object provided by the user
-   * @return {object} the new policy for `policyName`
-   */
-  createPolicyObj($, policyName, selector, policyObj, userPolicyObj) {
-    // Wrapped in flatten([]) to handle both when policy is a string and an array
-    const flattenedUserPolicy = flatten(userPolicyObj[policyName]);
-    if (flattenedUserPolicy.includes("'unsafe-inline'")) {
-      return userPolicyObj[policyName];
-    }
-
-    const hashes = $(selector)
-      .map((i, element) => this.hash($(element).html()))
-      .get();
-    return flatten([policyObj[policyName]]).concat(hashes);
-  }
-
   /**
    * Hooks into webpack to collect assets and hash them, build the policy, and add it into our HTML template
    * @param compiler
diff --git a/spec/plugin.spec.js b/spec/plugin.spec.js
@@ -177,8 +177,8 @@ describe('CspHtmlWebpackPlugin', () => {
     );
   });
 
-  describe("when the user-specified script-src policy contains 'unsafe-inline'", () => {
-    it('skips the hashing of the scripts it finds', done => {
+  describe("when the user-specified policy contains 'unsafe-inline' or 'unsafe-eval'", () => {
+    it('skips the hashing of the scripts it finds if devAllowUnsafe is true', done => {
       const webpackConfig = {
         entry: path.join(__dirname, 'fixtures/index.js'),
         output: {
@@ -192,12 +192,17 @@ describe('CspHtmlWebpackPlugin', () => {
             template: path.join(__dirname, 'fixtures', 'with-js.html'),
             inject: 'body'
           }),
-          new CspHtmlWebpackPlugin({
-            'base-uri': ["'self'", 'https://slack.com'],
-            'font-src': ["'self'", "'https://a-slack-edge.com'"],
-            'script-src': ["'self'", "'unsafe-inline'"],
-            'style-src': ["'self'"]
-          })
+          new CspHtmlWebpackPlugin(
+            {
+              'base-uri': ["'self'", 'https://slack.com'],
+              'font-src': ["'self'", "'https://a-slack-edge.com'"],
+              'script-src': ["'self'", "'unsafe-inline'"],
+              'style-src': ["'self'"]
+            },
+            {
+              devAllowUnsafe: true
+            }
+          )
         ]
       };
 
@@ -219,10 +224,55 @@ describe('CspHtmlWebpackPlugin', () => {
         done
       );
     });
-  });
 
-  describe("when the user-specified style-src policy contains 'unsafe-inline'", () => {
-    it('skips the hashing of the styles it finds', done => {
+    it('continues hashing scripts if unsafe-inline/unsafe-eval is included, but devAllowUnsafe is false', done => {
+      const webpackConfig = {
+        entry: path.join(__dirname, 'fixtures/index.js'),
+        output: {
+          path: OUTPUT_DIR,
+          filename: 'index.bundle.js'
+        },
+        mode: 'none',
+        plugins: [
+          new HtmlWebpackPlugin({
+            filename: path.join(OUTPUT_DIR, 'index.html'),
+            template: path.join(__dirname, 'fixtures', 'with-js.html'),
+            inject: 'body'
+          }),
+          new CspHtmlWebpackPlugin(
+            {
+              'base-uri': ["'self'", 'https://slack.com'],
+              'font-src': ["'self'", "'https://a-slack-edge.com'"],
+              'script-src': ["'self'", "'unsafe-inline'"],
+              'style-src': ["'self'"]
+            },
+            {
+              devAllowUnsafe: false
+            }
+          )
+        ]
+      };
+
+      testCspHtmlWebpackPlugin(
+        webpackConfig,
+        'index.html',
+        (cspPolicy, _, doneFn) => {
+          const expected =
+            "base-uri 'self' https://slack.com;" +
+            " object-src 'none';" +
+            " script-src 'self' 'unsafe-inline' 'sha256-9nPWXYBnlIeJ9HmieIATDv9Ab5plt35XZiT48TfEkJI=';" +
+            " style-src 'self';" +
+            " font-src 'self' 'https://a-slack-edge.com'";
+
+          expect(cspPolicy).toEqual(expected);
+
+          doneFn();
+        },
+        done
+      );
+    });
+
+    it('skips the hashing of the styles it finds if devAllowUnsafe is true', done => {
       const webpackConfig = {
         entry: path.join(__dirname, 'fixtures/index.js'),
         output: {
@@ -236,12 +286,17 @@ describe('CspHtmlWebpackPlugin', () => {
             template: path.join(__dirname, 'fixtures', 'with-css.html'),
             inject: 'body'
           }),
-          new CspHtmlWebpackPlugin({
-            'base-uri': ["'self'", 'https://slack.com'],
-            'font-src': ["'self'", "'https://a-slack-edge.com'"],
-            'script-src': ["'self'"],
-            'style-src': ["'self'", "'unsafe-inline'"]
-          })
+          new CspHtmlWebpackPlugin(
+            {
+              'base-uri': ["'self'", 'https://slack.com'],
+              'font-src': ["'self'", "'https://a-slack-edge.com'"],
+              'script-src': ["'self'"],
+              'style-src': ["'self'", "'unsafe-inline'"]
+            },
+            {
+              devAllowUnsafe: true
+            }
+          )
         ]
       };
 
@@ -263,6 +318,53 @@ describe('CspHtmlWebpackPlugin', () => {
         done
       );
     });
+
+    it('continues hashing scripts if unsafe-inline/unsafe-eval is included, but devAllowUnsafe is false', done => {
+      const webpackConfig = {
+        entry: path.join(__dirname, 'fixtures/index.js'),
+        output: {
+          path: OUTPUT_DIR,
+          filename: 'index.bundle.js'
+        },
+        mode: 'none',
+        plugins: [
+          new HtmlWebpackPlugin({
+            filename: path.join(OUTPUT_DIR, 'index.html'),
+            template: path.join(__dirname, 'fixtures', 'with-css.html'),
+            inject: 'body'
+          }),
+          new CspHtmlWebpackPlugin(
+            {
+              'base-uri': ["'self'", 'https://slack.com'],
+              'font-src': ["'self'", "'https://a-slack-edge.com'"],
+              'script-src': ["'self'"],
+              'style-src': ["'self'", "'unsafe-inline'"]
+            },
+            {
+              devAllowUnsafe: false
+            }
+          )
+        ]
+      };
+
+      testCspHtmlWebpackPlugin(
+        webpackConfig,
+        'index.html',
+        (cspPolicy, _, doneFn) => {
+          const expected =
+            "base-uri 'self' https://slack.com;" +
+            " object-src 'none';" +
+            " script-src 'self';" +
+            " style-src 'self' 'unsafe-inline' 'sha256-MqG77yUiqBo4MMVZAl09WSafnQY4Uu3cSdZPKxaf9sQ=';" +
+            " font-src 'self' 'https://a-slack-edge.com'";
+
+          expect(cspPolicy).toEqual(expected);
+
+          doneFn();
+        },
+        done
+      );
+    });
   });
 
   it('removes the empty Content Security Policy meta tag if enabled is the bool false', done => {
