Enable Subresource Integrity on Web

.github/renovate.json

@@ -161,7 +161,8 @@
         "webpack",
         "webpack-cli",
         "webpack-dev-server",
-        "webpack-node-externals"
+        "webpack-node-externals",
+        "webpack-subresource-integrity"
       ],
       "description": "Platform owned dependencies",
       "commitMessagePrefix": "[deps] Platform:",

apps/web/webpack.config.js

@@ -7,6 +7,7 @@ const HtmlWebpackInjector = require("html-webpack-injector");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
+const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
 const webpack = require("webpack");
 
 const config = require("./config.js");
@@ -85,6 +86,13 @@ const moduleRules = [
 ];
 
 const plugins = [
+  new SubresourceIntegrityPlugin({
+    // Only enable SRI in production, otherwise it might break hot reloading.
+    // If for some reason you need to enable it in development, make sure to also set
+    // optimization.realContentHash to true in the webpack config.
+    enabled: NODE_ENV === "production",
+    hashFuncNames: ["sha512"],
+  }),
   new HtmlWebpackPlugin({
     template: "./src/index.html",
     filename: "index.html",
@@ -382,6 +390,7 @@ const webpackConfig = {
     filename: "[name].[contenthash].js",
     path: path.resolve(__dirname, "build"),
     clean: true,
+    crossOriginLoading: "anonymous",
   },
   module: {
     noParse: /argon2(-simd)?\.wasm$/,

package.json

@@ -203,6 +203,7 @@
     "tabbable": "6.2.0",
     "tldts": "6.1.74",
     "utf-8-validate": "6.0.5",
+    "webpack-subresource-integrity": "^5.1.0",
     "zone.js": "0.14.10",
     "zxcvbn": "4.4.2"
   },