Web代码混淆

向往自由的码
1,546 阅读2分钟

原文来自：Potter个人博客

概要内容

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

代码混淆

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

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

环境准备

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

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种命令规范，所以下面的混淆正则表达式就非常好写。

m_xxx : 成员变量
__function : 方法名

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源码工程

参考文献

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

avatar
文章
阅读
粉丝