skip hashing if unsafe-inline is present

Author: Ashwin Bhat

plugin.js

@@ -26,6 +26,7 @@ class CspHtmlWebpackPlugin {
  constructor(policy = {}, additionalOpts = {}) {
  // the policy we want to use
  this.policy = Object.assign({}, defaultPolicy, policy);
+ this.userPolicy = policy;
 
  // the additional options that this plugin allows
  this.opts = Object.assign({}, defaultAdditionalOpts, additionalOpts);
@@ -114,20 +115,25 @@ class CspHtmlWebpackPlugin {
  }
 
  const policyObj = JSON.parse(JSON.stringify(this.policy));
-
- const inlineSrc = $('script:not([src])')
- .map((i, element) => this.hash($(element).html()))
- .get();
- const inlineStyle = $('style:not([href])')
- .map((i, element) => this.hash($(element).html()))
- .get();
-
- // Wrapped in flatten([]) to handle both when policy is a string and an array
- policyObj['script-src'] = flatten([policyObj['script-src']]).concat(
- inlineSrc
+ const parsedUserPolicy = JSON.parse(JSON.stringify(this.userPolicy));
+
+ // If the user policy contains 'unsafe-inline' for either script-src or style-src, we need to
+ // avoid hashing the existing script tags, so as to avoid implicitly disabling the
+ // 'unsafe-inline' preference.
+
+ policyObj['script-src'] = this.createPolicyObj(
+ $,
+ 'script-src',
+ 'script:not([src])',
+ policyObj,
+ parsedUserPolicy
  );
- policyObj['style-src'] = flatten([policyObj['style-src']]).concat(
- inlineStyle
+ policyObj['style-src'] = this.createPolicyObj(
+ $,
+ 'style-src',
+ 'style:not([href])',
+ policyObj,
+ parsedUserPolicy
  );
 
  metaTag.attr('content', this.buildPolicy(policyObj));
@@ -138,6 +144,28 @@ 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

spec/plugin.spec.js

@@ -177,6 +177,94 @@ describe('CspHtmlWebpackPlugin', () => {
  );
  });
 
+ describe("when the user-specified script-src policy contains 'unsafe-inline'", () => {
+ it('skips the hashing of the scripts it finds', 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'"]
+ })
+ ]
+ };
+
+ testCspHtmlWebpackPlugin(
+ webpackConfig,
+ 'index.html',
+ (cspPolicy, _, doneFn) => {
+ const expected =
+ "base-uri 'self' https://slack.com;" +
+ " object-src 'none';" +
+ " script-src 'self' 'unsafe-inline';" +
+ " style-src 'self';" +
+ " font-src 'self' 'https://a-slack-edge.com'";
+
+ expect(cspPolicy).toEqual(expected);
+
+ doneFn();
+ },
+ done
+ );
+ });
+ });
+
+ describe("when the user-specified style-src policy contains 'unsafe-inline'", () => {
+ it('skips the hashing of the styles it finds', 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'"]
+ })
+ ]
+ };
+
+ 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';" +
+ " 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 => {
  const webpackConfig = {
  entry: path.join(__dirname, 'fixtures/index.js'),