vue项目配置 webpack-obfuscator 进行代码加密混淆的实现

下面我来详细讲解“vue项目配置 webpack-obfuscator 进行代码加密混淆的实现”的完整攻略。

1. 什么是 webpack-obfuscator ？

Webpack-obfuscator 是一个 Webpack 插件，用于将 JavaScript 代码进行混淆和压缩，在一定程度上保护您的源代码。

2. 配置步骤

下面，我将介绍如何在 Vue CLI 3.x 下使用webpack-obfuscator 进行代码加密混淆的实现。

2.1 安装 webpack-obfuscator

npm install --save-dev webpack-obfuscator

2.2 在 vue.config.js 中配置

将以下代码添加到 vue.config.js 文件中：

const WebpackObfuscator = require('webpack-obfuscator');

module.exports = {
  configureWebpack: {
    plugins: [
      new WebpackObfuscator(
        {
          rotateStringArray: true,
          controlFlowFlattening: true,
          controlFlowFlatteningThreshold: 0.75,
          numbersToExpressions: true,
          simplify: true,
          shuffleStringArray: true,
          splitStrings: true,
          splitStringsChunkLength: 5,
          stringArray: true,
          stringArrayEncoding: true,
          stringArrayThreshold: 0.75,
          debugProtection: true,
          debugProtectionInterval: true,
          disableConsoleOutput: true
        },
        ['excluded_bundle_name.js']
      )
    ]
  }
};

这里用到了 WebpackObfuscator 选项中的一些参数，这些参数会控制代码混淆和压缩的方式，具体的意义可以参考 webpack-obfuscator 的文档。

2.3 运行打包命令

在终端中运行打包命令：

npm run build

然后会生成一个 dist 目录，里面就是混淆/压缩后的代码。

3. 示例说明

3.1 配置参数说明

new WebpackObfuscator(
  {
    rotateStringArray: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 0.75,
    numbersToExpressions: true,
    simplify: true,
    shuffleStringArray: true,
    splitStrings: true,
    splitStringsChunkLength: 5,
    stringArray: true,
    stringArrayEncoding: true,
    stringArrayThreshold: 0.75,
    debugProtection: true,
    debugProtectionInterval: true,
    disableConsoleOutput: true
  },
  ['excluded_bundle_name.js']
)

这里是我们使用的参数列表，需要注意的是：这里仅给出了示例列出的参数。

• rotateStringArray：是否启用字符串混淆；
• controlFlowFlattening：是否启用控制流扁平化；
• controlFlowFlatteningThreshold：控制流扁平化的阈值，默认为 0.75；
• numbersToExpressions：是否启用数字转换为表达式；
• simplify：是否启用代码简化；
• shuffleStringArray：是否启用洗牌字符串数组；
• splitStrings：是否启用字符串分割；
• splitStringsChunkLength：字符串分割字符长度，设置越长混淆效果越好，但代码也会变得更大，默认为 5；
• stringArray：是否启用字符串数组；
• stringArrayEncoding：是否启用字符串数组编码；
• stringArrayThreshold：字符串数组的阈值，默认为 0.75；
• debugProtection：是否启用调试器保护；
• debugProtectionInterval：调试器保护间隔；
• disableConsoleOutput：是否禁用控制台输出。

3.2 配置示例

这里是一个示例，配置了字符串混淆、控制流扁平化、数字转换为表达式、代码简化、字符串数组、调试器保护：

new WebpackObfuscator(
  {
    rotateStringArray: true,
    controlFlowFlattening: true,
    numbersToExpressions: true,
    simplify: true,
    stringArray: true,
    stringArrayEncoding: true,
    debugProtection: true
  },
  ['excluded_bundle_name.js']
)

这里的 excluded_bundle_name.js 表示排除不需要混淆和压缩的文件，这样可以保证不会影响到该文件中的功能。

另外一个示例，在基础上再加一些其他的参数配置：

new WebpackObfuscator(
  {
    rotateStringArray: true,
    controlFlowFlattening: true,
    controlFlowFlatteningThreshold: 0.75,
    numbersToExpressions: true,
    simplify: true,
    shuffleStringArray: true,
    splitStrings: true,
    splitStringsChunkLength: 10,
    stringArray: true,
    stringArrayEncoding: true,
    stringArrayThreshold: 0.8,
    debugProtection: true,
    debugProtectionInterval: true,
    disableConsoleOutput: true
  },
  ['excluded_bundle_name.js']
)

这里加入了字符串数组编码和字符串分割字符长度的配置，同时调整了阈值参数，这样可以通过使用更多不同的参数值组合来得到更加理想的代码混淆效果。

总之，通过合理的参数配置和运用 WebpackObfuscator 所提供的各种混淆和压缩方式，可以保护您的源代码，提高安全性。