使用webpack打包React项目时在浏览器端引入NodeJS Crypto模块的问题

核心结论 #

你无法直接把Node.js原生的crypto模块打包进浏览器产物中，原因在于：

• Node.js内置的crypto模块核心逻辑是基于OpenSSL的C/C++原生代码实现，仅对外暴露JS调用接口，不存在完整可独立运行的纯JS版本，天然不支持在浏览器环境下执行。
• webpack默认通过NodeSourcePlugin和node-libs-browser将crypto替换为crypto-browserify，属于针对浏览器环境的适配逻辑，并不是webpack的强制限制，本质是因为原生crypto本身无法在浏览器中运行。

现有尝试失败的原因 #

• 禁用Node polyfill后webpack报错无法解析crypto模块，是因为原生crypto属于Node.js内置绑定模块，不存在对应可被webpack解析的npm包源码，自然无法被打包进前端产物。
• 使用webpack.ProvidePlugin注入也无效，该插件仅能注入可被webpack解析的模块源码，无法处理Node.js原生绑定的模块。

可行替代方案 #

如果你的REPL需要兼容Node.js crypto的API调用，可以选择以下方案：

1. 继续使用默认的crypto-browserify polyfill，绝大多数常用的crypto API（哈希、对称加密、非对称加密基础能力）都已经对齐实现，能覆盖大部分使用场景。
2. 如果需要更高性能的加密能力，可以基于浏览器原生的Web Crypto API做一层适配，对齐Node.js crypto的调用接口，性能会比纯JS实现的crypto-browserify更好。
3. 如果必须100%对齐Node.js原生crypto的所有特性，只能考虑将加密逻辑放到后端Node.js服务实现，前端REPL用户输入的加密代码通过接口转发到服务端执行后返回结果，该方案需要额外处理代码执行的安全隔离问题。

内容的提问来源于stack exchange，提问作者gilsho