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",
     }),

client/index_template.html

@@ -52,10 +52,11 @@
     <div id="root"></div>
     {% for script in SCRIPTS %}
     <script type="text/javascript" src="{{script | safe}}"></script>
-    {% endfor %} {% for ils in INLINE_SCRIPTS %}
-    <script type="text/javascript">
-      {% include ils %}
-    </script>
+    {% endfor %}
+
+    {% for ils in INLINE_SCRIPTS %}
+    <!-- caution: do not change white space in this script element -->
+    <script type="text/javascript" no-csp-hash>{% include ils %}</script>
     {% endfor %}
   </body>
 </html>

client/package.json

@@ -68,6 +68,7 @@
     "babel-preset-modern-browsers": "^14.2.1",
     "chalk": "^4.0.0",
     "cheerio": "^1.0.0-rc.3",
+    "clean-css": "^4.2.3",
     "clean-webpack-plugin": "^3.0.0",
     "codecov": "^3.6.5",
     "connect-history-api-fallback": "^1.6.0",
@@ -92,11 +93,13 @@
     "jest-puppeteer": "^4.4.0",
     "json-loader": "^0.5.7",
     "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "puppeteer": "^2.1.1",
     "rimraf": "^3.0.2",
     "serve-favicon": "^2.5.0",
     "style-loader": "^1.1.3",
     "sw-precache-webpack-plugin": "^1.0.0",
+    "terser-webpack-plugin": "^2.3.6",
     "url-loader": "^4.0.0",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",