0


前端代码混淆加密(使用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 [email protected]

** 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 对应 [email protected]
npm install --save-dev javascript-obfuscator [email protected]

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

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

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

单独使用WebpackObfuscator的话,打包时就会一直报错(sourceAndMap):

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

① 以函数形式配置configWebpack

 (注意Terser和WebpackObfuscator引入的方式不同,后者是放到plugins中)

② 设置在生产环境中才去使用混淆加密工具(开发环境会产生各种报错)

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

标签: 前端 工程化

本文转载自: https://blog.csdn.net/weixin_43607906/article/details/140807920
版权归原作者 @MADLING 所有, 如有侵权,请联系我们删除。

“前端代码混淆加密(使用Terser、WebpackObfuscator)”的评论:

还没有评论