Migrate to official SRI support from shakapacker

Since version 8.4.0, Shakapacker has gained support for Subresource Integrity. Now, we switch to their implementation and drop ours, further improving maintainability.

As part of this effort, we also align the shakapacker.yml with the latest updates and defaults.

Author: MrSerth

config/shakapacker.yml

@@ -5,6 +5,7 @@ default: &default
 
   # You can have a subdirectory of the source_path, like 'packs' (recommended).
   # Alternatively, you can use '/' to use the whole source_path directory.
+  # Notice that this is a relative path to source_path
   source_entry_path: /
 
   # If nested_entries is true, then we'll pick up subdirectories within the source_entry_path.
@@ -37,12 +38,32 @@ default: &default
   # Select loader to use, available options are 'babel' (default), 'swc' or 'esbuild'
   webpack_loader: 'babel'
 
-  # Set to true to enable check for matching versions of shakapacker gem and NPM package - will raise an error if there is a mismatch or wildcard versioning is used
+  # Raises an error if there is a mismatch in the shakapacker gem and npm package being used
   ensure_consistent_versioning: false
 
-  # Select whether the compiler will use SHA digest ('digest' option) or most most recent modified timestamp ('mtime') to determine freshness
+  # Select whether the compiler will use SHA digest ('digest' option) or most recent modified timestamp ('mtime') to determine freshness
   compiler_strategy: digest
 
+  # Select whether the compiler will always use a content hash and not just in production
+  # Don't use contentHash except for production for performance
+  # https://webpack.js.org/guides/build-performance/#avoid-production-specific-tooling
+  useContentHash: false
+
+  # Setting the asset host here will override Rails.application.config.asset_host.
+  # Here, you can set different asset_host per environment. Note that
+  # SHAKAPACKER_ASSET_HOST will override both configurations.
+  # asset_host: custom-path
+
+  # Utilizing webpack-subresource-integrity plugin, will generate integrity hashes for all entries in manifest.json
+  # https://github.com/waysact/webpack-subresource-integrity/tree/main/webpack-subresource-integrity
+  integrity:
+    enabled: true
+    # Which cryptographic function(s) to use, for generating the integrity hash(es). Default sha-384. Other possible values sha256, sha512
+    hash_functions: ["sha256", "sha384", "sha512"]
+    # Default "anonymous". Other possible value "use-credentials"
+    # https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity#cross-origin_resource_sharing_and_subresource_integrity
+    cross_origin: "anonymous"
+
 development:
   <<: *default
   compile: true
@@ -51,13 +72,14 @@ development:
   # Reference: https://webpack.js.org/configuration/dev-server/
   # Keys not described there are documented inline and in https://github.com/shakacode/shakapacker/
   dev_server:
+    # For running dev server with https, set `server: https`.
     server: http
     host: localhost
     port: 3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     # Used instead of the `hot` key in https://webpack.js.org/configuration/dev-server/#devserverhot
     hmr: false
-    # If HMR is on, CSS will by inlined by delivering it as part of the script payload via style-loader. Be sure
+    # If HMR is on, CSS will be inlined by delivering it as part of the script payload via style-loader. Be sure
     # that you add style-loader to your project dependencies.
     #
     # If you want to instead deliver CSS via <link> with the mini-css-extract-plugin, set inline_css to false.
@@ -69,7 +91,10 @@ development:
     # live_reload: true
     client:
       # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
-      overlay: true
+      overlay:
+        errors: true
+        warnings: false
+        runtimeErrors: true
       # May also be a string
       # webSocketURL:
       #  hostname: '0.0.0.0'
@@ -101,5 +126,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Use content hash for naming assets. Cannot be overridden in production.
+  useContentHash: true
+
   # Cache manifest.json for performance
   cache_manifest: true

config/webpack/webpack.config.js

@@ -1,14 +1,12 @@
 // See the shakacode/shakapacker README and docs directory for advice on customizing your webpackConfig.
 
-const { generateWebpackConfig, config, merge } = require('shakapacker')
+const { generateWebpackConfig, merge } = require('shakapacker')
 const webpackConfig = generateWebpackConfig()
 
 const CompressionPlugin = require("compression-webpack-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
-const { WebpackAssetsManifest } = require('webpack-assets-manifest');
-const { SubresourceIntegrityPlugin } = require("webpack-subresource-integrity");
 
 // This setting will change the absolute path used to refer
 // external files (images, fonts, ...) in the generated assets
@@ -53,8 +51,6 @@ const envConfig = module.exports = {
     },
     output: {
         publicPath: relative_url_root + public_output_path,
-        // the following setting is required for SRI to work:
-        crossOriginLoading: 'anonymous',
     },
     performance: {
         // Turn off size warnings for large assets
@@ -65,15 +61,6 @@ const envConfig = module.exports = {
         new MiniCssExtractPlugin({
             filename: '[name]-[contenthash].css',
         }),
-        new SubresourceIntegrityPlugin(),
-        new WebpackAssetsManifest({
-            entrypoints: true,
-            integrity: true,
-            writeToDisk: true,
-            entrypointsUseAssets: true,
-            publicPath: true,
-            output: config.manifestPath,
-        })
     ],
     resolve: {
         extensions: ['.css', '.ts', '.tsx'],
@@ -97,13 +84,5 @@ webpackConfig.module.rules
   .filter(loaderConfig => loaderConfig.options?.sassOptions)
   .forEach(loaderConfig => loaderConfig.options.sassOptions.sourceMapIncludeSources = true);
 
-// Use the following lines below to remove original plugins and replace them with our custom config.
-// This is especially needed for the `WebpackAssetsManifest` plugin, which would otherwise run twice.
-const customPlugins = envConfig.plugins.map((plugin) => plugin.constructor.name);
-const filteredDefaultPlugins = webpackConfig.plugins.filter((plugin) => {
-    return !customPlugins.includes(plugin.constructor.name);
-});
-webpackConfig.plugins = filteredDefaultPlugins;
-
 // Create the resulting config by merging the (modified) default config and our custom setup
 module.exports = merge(webpackConfig, envConfig)