Refactor build and CSP headers for Safari compat (#1442)

* add unsafe-inline directive to style-src

* debugging - turn on csp reporting

* revert reporting only csp

* do not inline JS and CSS in build

* enable HTTPs only when in production mode

* remove debug printf

* fix clean target

* revert force_https removal

client/configuration/webpack/cspHashPlugin.js

@@ -14,13 +14,14 @@ class CspHashPlugin {
         (data, cb) => {
           const { filename } = this.opts;
 
+          const $ = cheerio.load(data.html, { decodeEntities: false });
+
           if (filename) {
-            const $ = cheerio.load(data.html, { decodeEntities: false });
             const results = {};
-            results["script-hashes"] = $("script:not([src])")
+            results["script-hashes"] = $("script:not([src]):not([no-csp-hash])")
               .map((i, elmt) => this.digest($(elmt).html()))
               .get();
-            results["style-hashes"] = $("style:not([href])")
+            results["style-hashes"] = $("style:not([href]):not([no-csp-hash])")
               .map((i, elmt) => this.digest($(elmt).html()))
               .get();
 
@@ -31,6 +32,18 @@ class CspHashPlugin {
             };
           }
 
+          // remove no-csp-hash attributes
+          let foundOne = false;
+          $("script[no-csp-hash]").each((i, elmt) => {
+            $(elmt).removeAttr("no-csp-hash");
+            foundOne = true;
+          });
+          $("style[no-csp-hash]").each((i, elmt) => {
+            $(elmt).removeAttr("no-csp-hash");
+            foundOne = true;
+          });
+          if (foundOne) data.html = $.html();
+
           // Tell webpack to move on
           cb(null, data);
         }

client/configuration/webpack/webpack.config.prod.js

@@ -5,6 +5,10 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
 const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const TerserJSPlugin = require("terser-webpack-plugin");
+const CleanCss = require("clean-css");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+
 const CspHashPlugin = require("./cspHashPlugin");
 
 const src = path.resolve("src");
@@ -21,9 +25,19 @@ module.exports = {
   cache: false,
   entry: ["./src/index.js"],
   output: {
+    filename: "static/[name]-[contenthash].js",
     path: path.resolve("build"),
     publicPath,
   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserJSPlugin({}),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessor: CleanCss,
+      }),
+    ],
+  },
   module: {
     rules: [
       {
@@ -52,15 +66,7 @@ module.exports = {
       {
         test: /index\.css$/,
         include: [path.resolve(src, "index.css")],
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: "css-loader",
-            options: {
-              importLoaders: 1,
-            },
-          },
-        ],
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
       },
       {
         test: /\.json$/,
@@ -78,10 +84,9 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({
-      inject: "body",
       filename: "index.html",
       template: path.resolve("index_template.html"),
-      inlineSource: ".(js|css)$",
+      decodeEntities: false,
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -115,8 +120,9 @@ module.exports = {
         },
       },
     }),
-    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
-    new MiniCssExtractPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "static/[name]-[contenthash].css",
+    }),
     new CspHashPlugin({
       filename: "csp-hashes.json",
     }),