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

本文主要介绍了针对vue项目中代码加密混淆的webpack-obfuscator的配置。这篇文章很详细，对你的学习或者工作有一定的参考价值。有需要的朋友可以参考一下。

背景

公司提供的代码被第三方使用。为了不完全暴露源代码，需要对给定的代码进行加密和混淆。虽然前端代码不能完全加密混淆，但是使用webpack-obfuscator通过添加随机的废代码段和字符代码转义，可以完全混淆构造代码，使源代码无法恢复，甚至无法读取。

安装

https://www.npmjs.com/package/webpack-obfuscator混淆器

npm安装-保存-开发web pack-混淆器

部署

//网页包.配置. js

const JavaScript obfuscator=require(' web pack-obfuscator ')；

模块.导出={

条目：{

abc ':'。/test/input/index.js '，

cde ':'。/test/input/index1.js '

输出：{

路径：“距离”，

文件名：'[名称]。js '

插件：[

新的JavaScript混淆器({

rotateUnicodeArray:对

//数组中是需要排除的文件

}，['abc.js'])

]

};

Vucli项目配置：

//vue.config.js

const path=require(' path ')；

var JavaScript obfuscator=require(' web pack-obfuscator ')；

模块.导出={

public path:process . ENV . node _ ENV===' production '？/' : '/',

productionSourceMap: false，

configureWebpack: {

插件：[

新的JavaScript混淆器({

rotateStringArray: true，

}, [])

]

pwa: {}，

页数：{}

}

如果您只想在打包期间加密混淆，而不想在本地运行时混淆，您可以配置以下内容：

configure web pack:(process . ENV . node _ ENV===' production ')？{

插件：[

新的JavaScript混淆器({

//.

}, [])

]

} : {},

vucli 2.x在webpack.prod.conf.js中进行配置

构建

npm运行构建

构建文件对比

1.原始文件

//test.js

函数abc() {

for(设I=0；i 10i ) {

Console.log (` the ${i} th，hello，hello `)

}

abc()

2.web pack的默认工具，uglifyjs-webpack-plugin

webpackJsonp([2]，{lVK7:function(o，l){！function(){ for(var o=0；o10O )console.log ('the' o' th，hello')}()}}，[' lvk 7 '])；

3.当webpack-obfuscator没有参数时

新的JavaScript混淆器({

}, [])

Var _0x1f6e=['棋子，你好，你好'，' lVK7 '，' log ']；函数(n，o){！函数(o){ for(；-o；)n.push(n.shift())}( o)}(_0x1f6e，323)；var _0x3655=function(n，o){ return _0x 1 f6e[n-=0]}；webpackJsonp([2]，{lVK7:function(n，o){！function(){ for(var n=0；n10n)控制台[_0x 3655('0x 0 ')](' the ' n _0x 3655('0x 1 '))}()}，[_0x 3655('0x 2 ')])；

4.webpack-obfuscator非常令人困惑

性能低：性能比没有模糊处理的慢50-100%。

新的JavaScript混淆器({

//压缩代码

紧凑：真的，

//是否启用控制流扁平化(运行速度降低1.5倍)

controlFlowFlattening: true，

//应用概率；在大型代码库中，建议减小该值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。

controlflowtflatteningthreshold:1，

//随机死代码块(增加混乱代码的大小)

deadCodeInjection:真的，

//死码块的影响概率

deadCodeInjectionThreshold: 1，

//此选项使得几乎不可能使用开发人员工具的控制台选项卡。

debugProtection: true，

//选中的话，控制台页签会使用间隔强制调试模式，这样开发者工具的其他功能就更难使用了。

debugProtectionInterval: true，

//通过用空函数替换console.log、console.info、console.error和console.warn来禁用它们。这使得使用调试器更加困难。

disableConsoleOutput: true，

//混淆十六进制(十六进制)标识符的方式(短标识符)

identifierNamesGenerator:“十六进制”，

日志：假的，

//是否启用全局变量和函数名混淆

renameGlobals:假，

//按固定和随机(代码混乱时生成)位置移动数组。这使得将已删除字符串的顺序与其原始位置进行匹配变得更加困难。如果原源代码不小，建议使用这个选项，因为辅助功能可以吸引注意力。

rotateStringArray: true，

//对于混乱的代码，不能用代码美化。同时需要配置CPM pat:true；

自卫：没错，

//删除字符串并将它们放入特殊数组中

没错，

string arrayencoding:“RC4”，

stringArrayThreshold: 1，

//允许启用/禁用字符串到unicode转义序列的转换。Unicode转义序列大大增加了代码的大小，并且可以很容易地将字符串恢复到原始视图。建议仅对小源代码启用此选项。

transformObjectKeys: true，

unicodeEscapeSequence: false

}, []),

后期生成文件大小：29，999字节(29.2 KB)

var _0xa0d1=['w7Bzw6oKw6E='，' wrwIUcOVw4M='，' w4bChi3DtcOQ '，' wpLDtsK5w4LDpA=='，' OUlQwp1z '，' woEqw4XCtsOe '，' YR3DrkDCiA=='，' woAjwq/Ci8KQ '，' dDNzw5bDgA=='，

//.

('0x201 '，' xatR')]=function(x){return x()}，x[_0x34e6('0x202 '，' vdcx')](_0x2c01f8)}，4 E3)；

3.webpack-obfuscator中度混淆

最佳性能：性能比没有模糊处理时慢30-35%。

新的JavaScript混淆器({

//压缩代码

紧凑：真的，

//是否启用控制流扁平化(运行速度降低1.5倍)

controlFlowFlattening: true，

//应用概率；在大型代码库中，建议减小该值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。

controlflowtflatteningthreshold:0.75，

//随机死代码块(增加混乱代码的大小)

deadCodeInjection:真的，

//死码块的影响概率

deadCodeInjectionThreshold: 0.4，

//此选项使得几乎不可能使用开发人员工具的控制台选项卡。

debugProtection: false，

//选中的话，控制台页签会使用间隔强制调试模式，这样开发者工具的其他功能就更难使用了。

debugProtectionInterval: false，

//通过用空函数替换console.log、console.info、console.error和console.warn来禁用它们。这使得使用调试器更加困难。

disableConsoleOutput: true，

//混淆十六进制(十六进制)标识符的方式(短标识符)

identifierNamesGenerator:“十六进制”，

日志：假的，

//是否启用全局变量和函数名混淆

renameGlobals:假，

rotateStringArray: true，

//对于混乱的代码，不能用代码美化。同时需要配置CPM pat:true；

自卫：没错，

//删除字符串并将它们放入特殊数组中

没错，

string arrayencoding:“base64”，

stringArrayThreshold: 0.75，

transformObjectKeys: true，

unicodeEscapeSequence: false

}, []),

后期生成文件大小：7066字节(6.90kb)

var _0x1a25=['UmFzT1U='，' RkVIc0o='，' VUt2eW4='，' Q29IS0g='，' V1NSZ0k='，' d3RNT2w='，' dlV6cUw='，' RlpzZWg='，' QnpzSlE='，' cXBqQ1k='，' YXBwbHk='，' bFZLNw=='，' Y3p1Ymo='，' TFZlQXE='，'

//.

(b[_0x4bcb('0x2a')] ('the' c，b [_0x4bcb ('0x2b')])}}，[_0x 4 BCB('0x2f ')])；

4.web pack-混淆器低混淆

高性能：性能比无混淆时略慢。

新的JavaScript混淆器({

//压缩代码

紧凑：真的，

//是否启用控制流扁平化(运行速度降低1.5倍)

controlFlowFlattening: false，

//随机死代码块(增加混乱代码的大小)

deadCodeInjection: false，

//此选项使得几乎不可能使用开发人员工具的控制台选项卡。

debugProtection: false，

//选中的话，控制台页签会使用间隔强制调试模式，这样开发者工具的其他功能就更难使用了。

debugProtectionInterval: false，

//通过用空函数替换console.log、console.info、console.error和console.warn来禁用它们。这使得使用调试器更加困难。

disableConsoleOutput: true，

//混淆十六进制(十六进制)标识符的方式(短标识符)

identifierNamesGenerator:“十六进制”，

日志：假的，

//是否启用全局变量和函数名混淆

renameGlobals:假，

rotateStringArray: true，

//对于混乱的代码，不能用代码美化。同时需要配置CPM pat:true；

自卫：没错，

//删除字符串并将它们放入特殊数组中

没错，

stringArrayEncoding: false，

stringArrayThreshold: 0.75，

unicodeEscapeSequence: false

}, []),

后期生成文件大小：2，424字节(2.36 KB)

Var _0x37a6=['exception '，' trace '，' console '，' number，hello，hello '，' lvk7 '，' apply '，' return (function()'，' {}。构造函数(' return this ')()'，' log '，function(n，e){ var o=function(e){ for(；-e；)n . push(n . shift())}；

//.

[_0x E1 FD('0x 3 ')](' the ' n _0x E1 FD('0xb ')}()} }，[_0x E1 FD('0xc ')])；

对照表

文件名

文件大小

正常施工

没有参数

高度困惑

中度困惑

低度混乱

测试. js

17字节

33字节

29.2 KB(29，999字节)

6.90KB(7066字节)

2.36 KB(2，424字节)

jquery.js

111 KB (113，852字节)

85.0 KB (87，064字节)

115 KB (117，770字节)

1.24兆字节(1，304，998字节)

401 KB (411，543字节)

117 KB (120，243字节)

主要属性

{

//压缩，不换行

紧凑：真的，

//是否启用控制流扁平化(运行速度降低1.5倍)

controlFlowFlattening: false，

//应用概率；在大型代码库中，建议减小该值，因为大量的控制流转换可能会增加代码的大小并降低代码的速度。

controlflowtflatteningthreshold:0.75，

//随机死代码块(增加混乱代码的大小)

deadCodeInjection: false，

//死码块的影响概率

deadCodeInjectionThreshold: 0.4，

//此选项使得几乎不可能使用开发人员工具的控制台选项卡。

debugProtection: false，

//选中的话，控制台页签会使用间隔强制调试模式，这样开发者工具的其他功能就更难使用了。

debugProtectionInterval: false，

//通过用空函数替换console.log、console.info、console.error和console.warn来禁用它们。这使得使用调试器更加困难。

disableConsoleOutput: false，

//锁定混乱的源代码，使其只在特定的域和/或子域上运行。这使得某人很难复制粘贴你的源代码并在其他地方运行。

域锁：[]，

//混淆十六进制(十六进制)标识符的方式(短标识符)

identifierNamesGenerator:“十六进制”，

//向全局标识符添加特定的前缀。当混淆同一页面上加载的多个文件时，请使用此选项。此选项有助于避免这些文件的全局标识符之间的冲突。为每个文件使用不同的前缀

标识符前缀： ''，

输入文件名：“”，

//允许将信息记录到控制台。

日志：假的，

//是否启用全局变量和函数名混淆

renameGlobals:假，

//禁用模糊处理和标识符生成

保留名称：[]，

//禁用字符串文字的转换

保留的字符串：[]，

rotateStringArray: true，

//对于混乱的代码，不能用代码美化。同时需要配置CPM pat:true；

种子：0，

自卫：假的，

sourceMap:假的，

sourceMapBaseUrl:“”，

源映射文件名： ''，

sourceMapMode:'单独'，

//删除字符串并将它们放入特殊数组中

没错，

//所有编码的字符串文字stringArray都使用base64或rc4并插入，也就是在运行时将其解码回特殊代码。True (boolean): stringarray使用base64编码值；True (boolean):不对stringArray值进行编码；base64’(String):字符串数组使用编码值base64；Rc4 '(字符串):字符串数组使用编码值RC4。大约比base64慢30-50%，但更难获得初始值。建议禁用rc4编码的unicodeEscapeSequence选项，以防止非常大的代码混乱。

stringArrayEncoding: false，

//调整字符串文字插入stringArray的概率

stringArrayThreshold: 0.75，

//可以将混淆代码的目标环境设置为以下之一：浏览器；浏览器无评估；结节

目标：“浏览器”，

//是否启用混淆对象密钥

transformObjectKeys: false，

unicodeEscapeSequence: false

}

注意

安装webpack-obfuscator时，注意webpack-obfuscator的版本应该与本地项目webpack的版本相匹配。我用的是webpack-obfuscator@0.18.0，项目webpack是4.x版本(这个webpack的4.x版本用的是最新版本的webpack-obfuscator@3.3.0，webpack升级到5.x版本)。

排除阵列的兼容多匹配包语法，例如支持['js/chunk-vendors。**.js']、['excluded_bundle_name.js '、' * * _ bundle _ name.js']或' excluded_bundle_name.js '等。

地址：https://www.cnblogs.com/dragonir/p/14445767.html作者：dragonir

背景

安装

构建

构建文件对比

相关文章阅读