前端代码混淆加密（使用Terser、WebpackObfuscator）

零、相关技术及版本号

"vue": "2.6.12",
"@vue/cli-service": "4.4.6",
"javascript-obfuscator": "^4.1.1",
"terser-webpack-plugin": "^4.2.3",
"vue-template-compiler": "2.6.12",
"webpack-obfuscator": "^2.6.0"

一、需求说明

为了对公司项目进行安全防护措施，前端需要进行代码混淆加密处理。
这里就有个三个需求点：

1. 压缩
2. 混淆
3. 加密

以此在网上查找到相应工具有：Terser、WebpackObfuscator

Terser：压缩代码、变量和函数名混淆、删除未使用代码

WebpackObfuscator：代码混淆、字符串加密、控制流扁平化

二、工具使用

npm install --save-dev terser-webpack-plugin@4
npm install --save-dev javascript-obfuscator webpack-obfuscator@2.6.0

  vue.config.js

const CompressionPlugin = require('compression-webpack-plugin'); // gzip压缩，无关可忽略const TerserPlugin = require('terser-webpack-plugin');
const WebpackObfuscator = require('webpack-obfuscator');const name = process.env.VUE_APP_TITLE || '*****' // 网页标题module.exports = {// ......configureWebpack: config => {const plugins = [// gzip压缩，无关可忽略new CompressionPlugin({cache: false,test: /\.(js|css|html)?$/i,filename: '[path].gz[query]',algorithm: 'gzip',minRatio: 0.8})];if (process.env.NODE_ENV === 'production') {// 使用 Terser 进行代码压缩和 source map 生成config.optimization = {minimizer: [new TerserPlugin({terserOptions: {compress: {warnings: false,drop_console: true, // 开启console.log压缩drop_debugger: true, // 移除debugger},sourceMap: true, // 启用 source map 生成},extractComments: false, // 是否将注释提取到单独的文件中}),],};// 在 Terser 之后使用 WebpackObfuscator 进行混淆plugins.push(new WebpackObfuscator({// 压缩代码compact: true, // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。disableConsoleOutput: true,// 通过固定和随机（在代码混淆时生成）的位置移动数组。rotateStringArray: true, // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)identifierNamesGenerator: 'hexadecimal',},[]));}return {name: name,devtool: 'source-map', // 确保 devtool 设置为 'source-map' 或类似选项plugins: plugins};},
}

三、注意事项

1、WebpackObfuscator需要和javascript-obfuscator一起安装（在此项目的版本下）

      VueCli4 对应 webpack-obfuscator@2.6.0

npm install --save-dev javascript-obfuscator webpack-obfuscator@2.6.0

2、WebpackObfuscator进行混淆加密，需要Terser进行提前处理

① 使用 Terser 进行代码压缩和 source map 生成，

② 在 Terser 之后使用 WebpackObfuscator 进行混淆。

单独使用WebpackObfuscator的话，打包时就会一直报错（sourceAndMap）：

3、配置configWebpack和开发环境设置

① 以函数形式配置configWebpack

     （注意Terser和WebpackObfuscator引入的方式不同，后者是放到plugins中）
② 设置在生产环境中才去使用混淆加密工具（开发环境会产生各种报错）

因版本问题导致花了很多时间研究并处理报错，版本对应很重要。