Fix CSP for disco and amo locally (#6029)

config/development.js

@@ -34,18 +34,26 @@ module.exports = {
         sentryHost,
         webpackHost,
       ],
+      fontSrc: [
+        webpackHost,
+      ],
       imgSrc: [
         "'self'",
+        'data:',
+        amoDevCDN,
         webpackHost,
       ],
       scriptSrc: [
         "'self'",
+        // webpack injects inline JS
+        "'unsafe-inline'",
         amoDevCDN,
         webpackHost,
       ],
       styleSrc: [
         "'self'",
-        'blob:',
+        // webpack injects inline CSS
+        "'unsafe-inline'",
       ],
     },
     reportOnly: true,

package.json

@@ -63,8 +63,6 @@
       "env": {
         "AMO_CDN": "https://addons-dev-cdn.allizom.org",
         "PROXY_API_HOST": "https://addons-dev.allizom.org",
-        "FXA_CONFIG": "local",
-        "CSP": false,
         "NODE_APP_INSTANCE": "amo"
       }
     },

src/core/middleware/security.js

@@ -2,6 +2,7 @@ import crypto from 'crypto';
 import fs from 'fs';
 import path from 'path';
 
+import { oneLine } from 'common-tags';
 import helmet from 'helmet';
 import config from 'config';
 import deepcopy from 'deepcopy';
@@ -38,17 +39,22 @@ export function csp({ _config = config, noScriptStyles, _log = log } = {}) {
 
   if (cspConfig) {
     if (noScriptStyles) {
-      const hash = crypto
-        .createHash('sha256')
-        .update(noScriptStyles)
-        .digest('base64');
+      if (!_config.get('isDevelopment')) {
+        const hash = crypto
+          .createHash('sha256')
+          .update(noScriptStyles)
+          .digest('base64');
 
-      const cspValue = `'sha256-${hash}'`;
-      if (
-        cspConfig.directives &&
-        !cspConfig.directives.styleSrc.includes(cspValue)
-      ) {
-        cspConfig.directives.styleSrc.push(cspValue);
+        const cspValue = `'sha256-${hash}'`;
+        if (
+          cspConfig.directives &&
+          !cspConfig.directives.styleSrc.includes(cspValue)
+        ) {
+          cspConfig.directives.styleSrc.push(cspValue);
+        }
+      } else {
+        _log.debug(oneLine`CSP style-src hash has been omitted to allow
+          "unsafe-inline" in development`);
       }
     }
 

tests/unit/core/middleware/test_cspMiddleware.js

@@ -6,6 +6,7 @@ import parse from 'content-security-policy-parser';
 
 import log from 'core/logger';
 import { csp, getNoScriptStyles } from 'core/middleware';
+import { getFakeConfig } from 'tests/unit/helpers';
 
 describe(__filename, () => {
   describe('CSP Middleware', () => {
@@ -192,6 +193,27 @@ describe(__filename, () => {
     it('does not blow up if optional args missing', () => {
       csp();
     });
+
+    it('disables the hash-source in development to allow "unsafe-inline"', () => {
+      const _config = getFakeConfig({ isDevelopment: true });
+      const _log = { debug: sinon.spy() };
+
+      const req = new MockExpressRequest();
+      const res = new MockExpressResponse();
+
+      csp({
+        _config,
+        _log,
+        noScriptStyles: getNoScriptStyles('amo'),
+      })(req, res, sinon.stub());
+
+      const cspHeader = res.get('content-security-policy');
+      const policy = parse(cspHeader);
+
+      expect(policy['style-src']).toEqual(['https://addons.cdn.mozilla.net']);
+
+      sinon.assert.calledOnce(_log.debug);
+    });
   });
 
   describe('noScriptStyles', () => {

webpack.dev.config.babel.js

@@ -44,7 +44,7 @@ for (const app of appsBuildList) {
 }
 
 export default Object.assign({}, webpackConfig, {
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'cheap-module-source-map',
   context: path.resolve(__dirname),
   entry: entryPoints,
   output: Object.assign({}, webpackConfig.output, {