Dependency Extraction Webpack Plugin fails on Node v17

[steakpinball]

Description

Running wp-scripts build to build a block results in this error:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at createHash (node:crypto:130:10)
    at DependencyExtractionWebpackPlugin.addAssets (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\@wordpress\dependency-extraction-webpack-plugin\lib\index.js:200:19)
    at C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\@wordpress\dependency-extraction-webpack-plugin\lib\index.js:129:18        
    at fn (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\webpack\lib\Compilation.js:476:10)
    at Hook.eval [as callAsync] (eval at create (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:38:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\tapable\lib\Hook.js:18:14)       
    at cont (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\webpack\lib\Compilation.js:3052:34)
    at C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\webpack\lib\Compilation.js:3100:10
    at symbolIterator (C:\Users\FramePush\Projects\Website\websitedev\generic-grid-layouts\node_modules\neo-async\async.js:3485:9)

The culprit is trying to use md4 hash:

gutenberg/packages/dependency-extraction-webpack-plugin/lib/index.js

Line 200 in c695c3b

contentHash: createHash( 'md4' )

Node v17 upgrades OpenSSL to 3.0, which moved md4 hash to the legacy provider. i.e. md4 is disabled by default.

webpack solved their issue by proving an md4 implementation. See webpack/webpack#14532. But the fix here could be as simple as switching to one of the hashes in the default provider, like md5. See https://wiki.openssl.org/index.php/OpenSSL_3.0#Provider_implemented_digests What is the significance of using md4?

A workaround with security implications as discussed in the webpack issue is to export NODE_OPTIONS=--openssl-legacy-provider before invoking node

Step-by-step reproduction instructions

Install Node version 17
Invoke wp-scripts build on a block plugin

Screenshots, screen recording, code snippet

No response

Environment info

Node 17.1.0
@wordpress/scripts 19.1.0

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[gziolo]

It looks like Webpack exposes its own hashing util:
https://webpack.js.org/api/compilation-object/#createhash

It's very likely that we could use it as follows:

diff --git a/packages/dependency-extraction-webpack-plugin/lib/index.js b/packages/dependency-extraction-webpack-plugin/lib/index.js
index 0d9fc04bd5..40da8b9a73 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { createHash } = require( 'crypto' );
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 // In webpack 5 there is a `webpack.sources` field but for webpack 4 we have to fallback to the `webpack-sources` package.
@@ -219,7 +218,8 @@ class DependencyExtractionWebpackPlugin {
 					filename,
 					query,
 					basename: basename( filename ),
-					contentHash: createHash( 'md4' )
+					contentHash: compilation
+						.createHash( 'md4' )
 						.update( assetString )
 						.digest( 'hex' ),
 				}

At least this is what I read from webpack/webpack#14584 where webpack added their own md4 implementation in Wasm.

[bliebek]

I'm going to work on this one.

[karmatosed]

That's awesome @bliebek - I just assigned this to you as you dive in. Excited to see what you create ✨

[bliebek]

@gziolo what's the point of sticking to md4 here? Maybe the solution can be as simple as adding hashFunction as a plugin parameter and providing md5 as fallback:

index 0d9fc04bd5..a411b8a2fb 100644
--- a/packages/dependency-extraction-webpack-plugin/lib/index.js
+++ b/packages/dependency-extraction-webpack-plugin/lib/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-const { createHash } = require( 'crypto' );
 const path = require( 'path' );
 const webpack = require( 'webpack' );
 // In webpack 5 there is a `webpack.sources` field but for webpack 4 we have to fallback to the `webpack-sources` package.
@@ -30,6 +29,7 @@ class DependencyExtractionWebpackPlugin {
                                outputFormat: 'php',
                                outputFilename: null,
                                useDefaults: true,
+                               hashFunction: 'md5',
                        },
                        options
                );
@@ -145,6 +146,7 @@ class DependencyExtractionWebpackPlugin {
                        injectPolyfill,
                        outputFormat,
                        outputFilename,
+                       hashFunction,
                } = this.options;
 
@@ -219,7 +221,7 @@ class DependencyExtractionWebpackPlugin {
                                        filename,
                                        query,
                                        basename: basename( filename ),
-                                       contentHash: createHash( 'md4' )
+                                       contentHash: createHash( hashFunction )
                                                .update( assetString )
                                                .digest( 'hex' ),
                                }
@@ -238,7 +240,7 @@ class DependencyExtractionWebpackPlugin {
                                        filename,
                                        query,
                                        basename: basename( filename ),
-                                       contentHash: createHash( 'md4' )
+                                       contentHash: createHash( hashFunction )

[gziolo]

@gziolo what's the point of sticking to md4 here? Maybe the solution can be as simple as adding hashFunction as a plugin parameter and providing md5 as fallback:

We still support Node v12 and webpack v4, if md5 works with both, then we can simply switch the algorithm. I don't think we need to expose it as an option.

[bliebek]

I think it's neither the matter of node nor webpack version, but it's determined by OpenSSL version installed, see:
https://nodejs.org/docs/latest-v12.x/api/crypto.html#crypto_crypto_createhash_algorithm_options
https://nodejs.org/dist/latest-v17.x/docs/api/crypto.html#cryptocreatehashalgorithm-options

The algorithm is dependent on the available algorithms supported by the version of OpenSSL on the platform. Examples are 'sha256', 'sha512', etc. On recent releases of OpenSSL, openssl list -digest-algorithms (openssl list-message-digest-algorithms for older versions of OpenSSL) will display the available digest algorithms.

[gziolo]

Feel free to open patch and we will take it from there 👍🏻

[cbratschi]

I ran into this issue after upgrading from Node 16.x to 18. OpenSSL was not updated. How can we solve this issue?

[cbratschi]

Workaround (for now):

export NODE_OPTIONS=--openssl-legacy-provider