0%

Web代码混淆

概要内容

  • 代码混淆
  • 环境准备
  • 如何配置UglifyJsPlugin混淆参数
  • 混淆效果
  • Demo源码工程

代码混淆

  • 定义:代码混淆(Obfuscated code)亦称花指令,是将计算机程序的代码,转换成一种功能上等价,但是难于阅读和理解的形式的行为。通俗一点讲就是你写的代码,通过混淆工具,把你的源代码混淆得别人看不太懂。

  • 起因:由于Web可以用浏览器调试工具,直接查看到我们的源代码,如果我们的源代码中包含了敏感信息(比如:加密密钥、服务器内部接口地址等),那么对于不怀好意的人,就可能拿着这些东西攻击我们的服务器,所以我们需要把我们的代码去掉注释、混淆代码等,这样别人就没那么容易看懂我们的代码了,提高服务被攻击的门槛。

环境准备

由于我尝试使用WebPack3.x的版本,利用UglifyJsPlugin版本来混淆打包,发现各种配置问题,然后导致打包出问题,所以推荐WebPack4.x 以上版本。我的环境如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dependencies": {
"vue": "^2.6.11"
},
"devDependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.2",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^3.2.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"vue-loader": "^15.9.0",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.0",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}

如何配置UglifyJsPlugin混淆参数

由于混淆需指定混淆哪些代码,不能把JS提供的API、第三方库的API相关的代码也给混淆掉,所以需要在写代码时一定要养成养好的编码规范,这样在配置混淆正在表达式时就非常好些了。以下介绍我的2种命令规范,所以下面的混淆正则表达式就非常好写。

1
2
m_xxx : 成员变量
__function : 方法名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
new UglifyJsPlugin(
{
uglifyOptions: {
compress: {
// warnings: false,
/* 移除没被引用的代码 */
dead_code: true,
/* 当 Function(args, code)的args 和 code都是字符串时,压缩并混淆 */
// unsafe_Func: true,
/* 干掉没有被引用的函数和变量 */
unused: true,
/* 干掉顶层作用域中没有被引用的函数或变量 */
toplevel: true,
/* 干掉console.*函数 */
drop_console: true,
/* 干掉Debugger*/
drop_debugger: true,
/* 压缩代码次数 注意:数字越大压缩耗时越长 */
passes: 1,
/* 传true以防止压缩时把1/0转成Infinity,那可能会在chrome上有性能问题 */
keep_infinity: true
},
output: {
comments: false,
},
mangle: {
properties: {
// keep_fnames: false,
/* 说明:混淆正在表达式就非常好写 */
regex: /(^__|^m_)\w+/,
reserved: ["$", "iv", "mode", "padding", "CryptoJS"]
}
}
},
cache: true,
extractComments: false,
sourceMap: false,
parallel: true
}
),

混淆效果

Demo源码工程

参考文献


以上: 如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝