标签：混淆 vue false 代码 js webpack obfuscate true

vue 项目代码混淆

一、概要

• 适用 vue-cli3/4 搭建的vue项目
• 配置完成后只需在文件名或者文件夹名加上 -obfuscate 后缀，打包的时候即可将该js文件或者文件夹下的所有js文件混淆处理
• 也可用于其他 webpack 构建的项目，步骤大差不差

二、混淆步骤

1. 引入混淆插件

 a. 使用 vue-cli3/4 新建的项目内置的 webpack 是 @4 版本的，所以这里只能使用 @2 版本的混淆插件
 b. webpack@5 可以使用最新的混淆插件
 c. node_modules/webpack/package.json 中可以查看当前项目的 webpack 版本

cnpm i javascript-obfuscator@2.6.0 webpack-obfuscator@2.6.0 -D

2. 添加混淆配置

 a. 因为混淆插件配置较多，所以这里将配置文件单独出来
 b. 在与 vue.config.js 同级下新建 obfuscator.config.js 文件
 c. 文件内容如下，具体配置可参考 https://www.cnblogs.com/dragonir/p/14445767.html

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

3. webpack 中添加混淆插件

1. 引入混淆插件和混淆配置

const JavaScriptObfuscator = require('webpack-obfuscator');
const obfuscateConfig = require('./obfuscator.config')

2. webpack中添加混淆插件

new JavaScriptObfuscator(
	obfuscateConfig,
	 // 这个参数是排除这些文件，我们是只混淆文件名包含-obfuscate的，所以用的非逻辑
	 '**/!(*-obfuscate).*.js'
)

3. 将需要混淆的文件添加 -obfuscate 后缀，并更改引入时的路径。(加密方法密钥偏移，api，路由文件等等)

    a. 混淆单独的js文件，如 api.js 改成 api-obfuscate.js
    b. 混淆整个文件夹下的js文件，如将 router 文件夹名改成 router-obfuscate
   

4. 将文件名或者文件的路径上带有 -obfuscate 的文件打包在一个 chunk-obfuscate.*.js 中

config.optimization.splitChunks({
  chunks: 'all',
  minSize: 10, // 单位byte chunk文件大小超过这个才会生成chunk  否则还会打包app.js
  cacheGroups: {
    obfuscate: {
      name: 'chunk-obfuscate', // 将需要打包的文件都打包在这个chunk里,打包后的文件名  chunk-obfuscate.xxx.js
      priority: -10, // 这个数字大于0不一定会生成chunk
      test(module) {
        // `module.resource` contains the absolute path of the file on disk.
        // Note the usage of `path.sep` instead of / or \, for cross-platform compatibility.
        // 路径上包含-obfuscate的打包在一块，打完包对该chunks代码混淆
        if (module.resource && module.resource.indexOf('-obfuscate') > -1 && module.resource.endsWith('.js')) {
          console.log('需要混淆的文件-----',module.resource);
          return true
        }
        return false
      },
      reuseExistingChunk: true
    }
  }
})
// 路由路径依然会有一部分在app.js里，这里使用runtimeChunk将其从app.js中分离出来，生成的文件名带上混淆标识
config.optimization.runtimeChunk({
  name: 'runtime-obfuscate', // 路由在这里面，需要混淆，所以文件名中加上-obfuscate
})

5. 完成后 build 项目，在 dist 文件中搜索代码中是否还会出现 敏感信息

以上！

标签：混淆,vue,false,代码,js,webpack,obfuscate,true
来源： https://www.cnblogs.com/blackbentel/p/16379415.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。