浅析前端代码混淆加密如何做(插件webpack-obfuscator、vite插件rollup-plugin-obfuscator)
1、应用背景
公司代码提供给第三方使用,为了不完全泄露源码,需要对给出的代码进行加密混淆,前端代码虽然无法做到完全加密混淆,但是使用 webpack-obfuscator 插件通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆,达到无法恢复源码甚至无法阅读的目的。
2、webpack 相关插件webpack-obfuscator
若只想在打包时加密混淆,本地运行时不混淆,可以进行以下的配置:
configureWebpack: (process.env.NODE_ENV === 'production') ? {
plugins: [
new JavaScriptObfuscator({
// ...
}, [])
]
} : {},
高度混淆 - 低性能:性能比没有模糊处理慢 50-100%
中等混淆 - 最佳性能:性能比没有模糊处理慢 30-35%
低混淆 - 高性能:性能稍微慢于没有混淆
各种配置信息可以查看这篇文章介绍:vue项目配置 webpack-obfuscator 进行代码加密混淆
3、vite 插件:rollup-plugin-obfuscator
rollup-plugin-obfuscator
是 Rollup 构建工具的一个插件,用于对 JavaScript 代码进行混淆和压缩。它的主要作用是增加 JavaScript 代码的安全性和减小生成文件的大小。
原理和工作方式:
(1)代码混淆:插件通过采用各种技巧来混淆 JavaScript 代码,使其变得难以理解和逆向工程。这些技巧包括变量名重命名、函数提取、字符串替换等。例如,它可以将原始代码中的变量名和函数名改为无意义的名称,从而增加代码的复杂性。
(2)代码压缩:除了混淆,插件还可以对代码进行压缩,删除不必要的空格、注释和缩短变量名,以减小生成文件的大小。这有助于加快网页加载速度。
(3)选项配置:插件通常提供了许多选项配置,允许开发者自定义混淆和压缩的程度。这些选项包括设置要保留的函数、排除特定文件或模块等。
各种配置信息可以查看这篇文章介绍:Vue项目中Vite以及Webpack代码混淆处理