Subresource Integrity with Webpacker 6 / Shakapacker

[ryanfb]

With Webpacker 5, I had a working configuration for outputting integrity attributes with this monkeypatch & configuration change: rails/webpacker#323 (comment)

Previously, my config/webpack/environment.js looked like the following to output integrity values in the manifest:

const { environment } = require('@rails/webpacker')

// Webpacker uses this plugin to generate its manifest but
// at present it does not generate the integrity for each asset.
const manifestPlugin = environment.plugins.get('Manifest');
manifestPlugin.options.integrity = true;
manifestPlugin.options.integrityHashes = ['sha256'];

module.exports = environment

For Webpacker 6, it seems like the way to go is to use the webpack-subresource-integrity plugin to generate the values, and just pass integrity: true to the webpack-assets-manifest plugin which is used for manifest generation.

However, calling plugins.get against the new webpackConfig now results in e.g. TypeError: webpackConfig.plugins.get is not a function. If I try to inspect the config with e.g. console.log(JSON.stringify(webpackConfig, undefined, 2)), the entry where I would expect the WebpackAssetsManifest shows as {}, so I'm not sure how to inject the integrity: true option back into the base configuration.

I also tried adding a new WebpackAssetsManifest plugin in the config which gets merged with the base config, e.g.:

const customConfig = {
  output: {
    crossOriginLoading: 'anonymous'
  },
  plugins: [new SubresourceIntegrityPlugin(),
  new WebpackAssetsManifest({ entrypoints: true,
    integrity: true,
    writeToDisk: true,
    entrypointsUseAssets: true,
    publicPath: true,
    output: config.manifestPath })]
}

However, this just results in an error from both WebpackAssetsManifest plugins trying to write to the same output.

[tomdracz]

Hey @ryanfb the cleanest way I can think of is removing the plugin from the default set before appending yours. Something along the lines of:

const { webpackConfig, merge } = require('shakapacker');
const WebpackAssetsManifest = require('webpack-assets-manifest');

const customConfig = {
  // your custom config
};

const filteredPlugins = webpackConfig.plugins.filter((plugin) => !(plugin instanceof WebpackAssetsManifest))
webpackConfig.plugins = filteredPlugins;

module.exports = merge(webpackConfig, customConfig);

The above should discard WebpackAssetsManifest plugin from the default list and after merge, you should have your own one there instead.

Think there might be other ways using custom webpack-merge functions but the above is probably good enough.