解决webpack-obfuscator混淆报错 Cannot read property ‘sourceAndMap‘ of undefined

背景

公司检出出前端代码有敏感信息泄露漏洞,为了避免泄露源码,使用 webpack-obfuscator 插件 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆,从而达到无法恢复源码的目的

项目现况：

“webpack”: “^4.47.0”,

“webpack-obfuscator”: “2.6.0”,

“javascript-obfuscator”: “^3.2.7”

node: v12.22.12

安装

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

配置vue.config.js文件

const path = require("path");

const TerserPlugin = require("terser-webpack-plugin");

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

module.exports = {
	configureWebpack: (process.env.NODE_ENV === 'production') ? {
    plugins: [
      new WebpackObfuscator({
        controlFlowFlattening: false,
        deadCodeInjection: false,
        ignoreImports: true, // 这里设置为true
        stringArrayThreshold: 0.3,
        //  压缩代码
        compact: true,
        // 是否启用控制流扁平化(降低1.5倍的运行速度)
        controlFlowFlattening: false,
        // 随机的死代码块(增加了混淆代码的大小)
        deadCodeInjection: false,
        // 此选项几乎不可能使用开发者工具的控制台选项卡
        debugProtection: false,
        // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
        debugProtectionInterval: false,
        // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
        disableConsoleOutput: true,
        // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
        identifierNamesGenerator: 'hexadecimal',
        log: false,
        // 是否启用全局变量和函数名称的混淆
        renameGlobals: false,
        // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
        rotateStringArray: true,
        // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
        selfDefending: true,
        // 删除字符串文字并将它们放在一个特殊的数组中
        stringArray: true,
        rotateUnicodeArray: true,
        //  stringArrayEncoding: 'base64',
        stringArrayEncoding: ['base64'],
        stringArrayThreshold: 0.75,
        // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
        unicodeEscapeSequence: false,
        // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
        transformObjectKeys: true,
      }, []),
    ],
    devtool: process.env.NODE_ENV === "production" ? "false" : "source-map",
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    // 打包生产环境时过滤console.log打印日志
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    },
  } : {},
}

但是运行npm run build 打包时出现错误 TypeError: Cannot read property ‘sourceAndMap’ of undefined,

根据报错文件位置发现是webpack-obfuscator底层代码报错
npm官网文档也写到了 Warning: right now plugin does not support sourceMap and sourceMapMode options!

解决方法:

修改 configureWebpack 配置, 将configureWebpack的对象模式改成函数形式

module.exports = {
  configureWebpack: (config) => {
      config.resolve = {
        ...config.resolve,
        alias: {
          "@": resolve("src"),
        }
      },
      config.optimization = {
        ...config.minimizer,
        minimizer: [
          new TerserPlugin({
            terserOptions: {
              compress: {
                drop_console: true,
              },
            },
          }),
        ]
      }

    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new WebpackObfuscator({
          // 压缩代码
          compact: true,
          // 是否启用控制流扁平化(降低1.5倍的运行速度)
          controlFlowFlattening: false,
          // 随机的死代码块(增加了混淆代码的大小)
          deadCodeInjection: false,
          // 此选项几乎不可能使用开发者工具的控制台选项卡
          debugProtection: false,
          // 如果选中，则会在“控制台”选项卡上使用间隔强制调试模式，从而更难使用“开发人员工具”的其他功能。
          debugProtectionInterval: false,
          // 通过用空函数替换它们来禁用console.log，console.info，console.error和console.warn。这使得调试器的使用更加困难。
          disableConsoleOutput: true,
          // 标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
          identifierNamesGenerator: 'hexadecimal',
          log: false,
          // 是否启用全局变量和函数名称的混淆
          renameGlobals: false,
          // 通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
          rotateStringArray: true,
          // 混淆后的代码,不能使用代码美化,同时需要配置 cpmpat:true;
          selfDefending: true,
          // 删除字符串文字并将它们放在一个特殊的数组中
          stringArray: true,
          rotateUnicodeArray: true,
          //  stringArrayEncoding: 'base64',
          stringArrayEncoding: ['base64'],
          stringArrayThreshold: 0.75,
          // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
          unicodeEscapeSequence: false,
          // 允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
          transformObjectKeys: true,
        })
      )
    }
  },
}

总结

将vue.config.js里的 configureWebpack 配置,对象类型改成函数类型