support the __webpack_nonce__ parameter

client/coral-framework/helpers/webpackGlobals.js

@@ -1,9 +1,9 @@
-/* global __webpack_public_path__ */ // eslint-disable-line no-unused-vars
+/* global __webpack_public_path__, __webpack_nonce__ */ // eslint-disable-line no-unused-vars
 
 import { getStaticConfiguration } from 'coral-framework/services/staticConfiguration';
 
 // Load the static url from the static configuration.
-const { STATIC_URL } = getStaticConfiguration();
+const { STATIC_URL, SCRIPT_NONCE } = getStaticConfiguration();
 
 // Update the static url for the imported public path so dynamically imported
 // chunks will use the correct path as defined by the process.env.STATIC_URL
@@ -14,3 +14,13 @@ const { STATIC_URL } = getStaticConfiguration();
 // https://webpack.js.org/configuration/output/#output-publicpath
 //
 __webpack_public_path__ = STATIC_URL + 'static/';
+
+// All dynamically included scripts that support nonce's will add this to their
+// script tags.
+//
+// The __webpack_nonce__ can be referenced: https://webpack.js.org/guides/csp/
+//
+// Pending issues:
+// - https://github.com/webpack-contrib/style-loader/pull/319
+//
+__webpack_nonce__ = SCRIPT_NONCE;

middleware/nonce.js

@@ -1,9 +1,16 @@
+const { get, merge } = require('lodash');
 const uuid = require('uuid/v4');
 
 // nonce is designed to create a random value that can be used in conjunction
 // with the csp middleware.
 module.exports = (req, res, next) => {
-  res.locals.nonce = uuid();
+  const nonce = uuid();
+
+  // Attach the nonce to the locals.
+  res.locals.nonce = nonce;
+  res.locals.data = merge({}, get(res.locals, 'data', {}), {
+    SCRIPT_NONCE: nonce,
+  });
 
   next();
 };

middleware/staticTemplate.js

@@ -48,7 +48,7 @@ const attachStaticLocals = locals => {
   for (const key in TEMPLATE_LOCALS) {
     const value = TEMPLATE_LOCALS[key];
 
-    locals[key] = value;
+    merge(locals, { [key]: value });
   }
 };
 

webpack.config.js

@@ -74,7 +74,7 @@ const config = {
   target: 'web',
   output: {
     path: path.join(__dirname, 'dist'),
-    publicPath: '',
+    webpackGlobals: '',
     filename: '[name].[chunkhash].js',
     chunkFilename: '[name].[chunkhash].chunk.js',
   },
@@ -309,7 +309,10 @@ const applyConfig = (entries, root = {}) =>
       entry: entries.reduce(
         (entry, { name, path: modulePath, disablePolyfill = false }) => {
           const entries = [
-            path.join(__dirname, 'client/coral-framework/helpers/publicPath'),
+            path.join(
+              __dirname,
+              'client/coral-framework/helpers/webpackGlobals'
+            ),
           ];
           if (disablePolyfill) {
             entries.push(modulePath);