vue 项目代码混淆
vue 项目代码混淆
一、概要
- 本文章适用 vue-cli3/webpack4 搭建的vue项目，vue-cli2或者 webpack@2@3版本混淆查看这篇webpack2 webpack 3 低版本混淆代码打包
- 配置完成后只需在文件名或者文件夹名加上 -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 中添加混淆插件
- 引入混淆插件和混淆配置
const JavaScriptObfuscator = require('webpack-obfuscator');
const obfuscateConfig = require('./obfuscator.config')
- webpack中添加混淆插件
new JavaScriptObfuscator(
obfuscateConfig,
// 这个参数是排除这些文件，我们是只混淆文件名包含-obfuscate的，所以用的非逻辑
'**/!(*-obfuscate).*.js'
)
-
将需要混淆的文件添加 -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 文件中搜索代码中是否还会出现 敏感信息
以上！
