Add 'unsafe-inline' to style-src in CSP to enable server-rendered inl…

…ine React styles

- Also inject content-security-policy header in the local dev server

- See also: facebook/react#5878 (comment)

Issue #2434.
Fixes #2432.

bin/deploy.sh

@@ -37,7 +37,9 @@ TEN_MINUTES="600"
 ONE_YEAR="31536000"
 
 HPKP="\"Public-Key-Pins\": \"max-age=300;pin-sha256=\\\"WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18=\\\";pin-sha256=\\\"r/mIkG3eEpVdm+u/ko/cwxzOMo1bk4TyHIlByibiA5E=\\\";pin-sha256=\\\"YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg=\\\";pin-sha256=\\\"sRHdihwgkaib1P1gxX8HFszlD+7/gTfNvuAybgLPNis=\\\";\""
-CSP="\"content-security-policy\": \"default-src 'self'; connect-src 'self' https://sentry.prod.mozaws.net https://www.google-analytics.com https://ssl.google-analytics.com https://basket.mozilla.org https://analysis-output.telemetry.mozilla.org; font-src 'self' code.cdn.mozilla.net; form-action 'none'; frame-ancestors 'self'; img-src 'self' https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://ssl.google-analytics.com; style-src 'self' code.cdn.mozilla.net; report-uri /__cspreport__;\""
+
+# HACK: If this is changed, be sure to update the CSP constant in frontend/tasks/server.js
+CSP="\"content-security-policy\": \"default-src 'self'; connect-src 'self' https://sentry.prod.mozaws.net https://www.google-analytics.com https://ssl.google-analytics.com https://basket.mozilla.org https://analysis-output.telemetry.mozilla.org; font-src 'self' code.cdn.mozilla.net; form-action 'none'; frame-ancestors 'self'; img-src 'self' https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://ssl.google-analytics.com; style-src 'unsafe-inline' 'self' code.cdn.mozilla.net; report-uri /__cspreport__;\""
 HSTS="\"strict-transport-security\": \"max-age=${ONE_YEAR}; includeSubDomains; preload\""
 TYPE="\"x-content-type-options\": \"nosniff\""
 XSS="\"x-xss-protection\": \"1; mode=block\""
@@ -47,7 +49,9 @@ XSS="\"x-xss-protection\": \"1; mode=block\""
 if [ "$DEST" = "dev" ]; then
     TEN_MINUTES="15"
     ONE_YEAR="15"
-    CSP="\"content-security-policy\": \"default-src 'self'; connect-src 'self' https://sentry.prod.mozaws.net https://www.google-analytics.com https://ssl.google-analytics.com https://basket.mozilla.org https://analysis-output.telemetry.mozilla.org; font-src 'self' code.cdn.mozilla.net; form-action 'none'; frame-ancestors 'self' https://pontoon.mozilla.org; img-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com; style-src 'self' https://pontoon.mozilla.org code.cdn.mozilla.net; report-uri /__cspreport__;\""
+
+    # HACK: If this is changed, be sure to update the CSP constant in frontend/tasks/server.js
+    CSP="\"content-security-policy\": \"default-src 'self'; connect-src 'self' https://sentry.prod.mozaws.net https://www.google-analytics.com https://ssl.google-analytics.com https://basket.mozilla.org https://analysis-output.telemetry.mozilla.org; font-src 'self' code.cdn.mozilla.net; form-action 'none'; frame-ancestors 'self' https://pontoon.mozilla.org; img-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com; style-src 'unsafe-inline' 'self' https://pontoon.mozilla.org code.cdn.mozilla.net; report-uri /__cspreport__;\""
 fi
 
 # build version.json if it isn't provided

frontend/tasks/server.js

@@ -10,6 +10,9 @@ const pkey = fs.readFileSync('./frontend/certs/server/my-server.key.pem');
 const pcert = fs.readFileSync('./frontend/certs/server/my-server.crt.pem');
 const pca = fs.readFileSync('./frontend/certs/server/my-private-root-ca.crt.pem');
 
+// HACK: CSP copied from bin/deploy.sh
+const CSP = `default-src 'self'; connect-src 'self' https://sentry.prod.mozaws.net https://www.google-analytics.com https://ssl.google-analytics.com https://basket.mozilla.org https://analysis-output.telemetry.mozilla.org; font-src 'self' code.cdn.mozilla.net; form-action 'none'; frame-ancestors 'self' https://pontoon.mozilla.org; img-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com https://www.google-analytics.com; object-src 'none'; script-src 'self' https://pontoon.mozilla.org https://ssl.google-analytics.com; style-src 'unsafe-inline' 'self' https://pontoon.mozilla.org code.cdn.mozilla.net; report-uri /__cspreport__;`;
+
 const serverOptions = {
   root: config.DEST_PATH,
   livereload: false,
@@ -31,6 +34,7 @@ const serverOptions = {
         parsed.pathname = '/static/addon/addon.xpi';
         req.url = url.format(parsed);
       }
+      res.setHeader('content-security-policy', CSP);
       next();
     }
   ]