在前端工程中引入代码混淆

转载请注明作者和本文链接！！！

这段时间，公司的一个用laravel做的前端项目要上线了，但是想着自己辛辛苦苦写的代码，就那么被轻易的debug和copy，那也不行啊，所以研究了一下前端安全的问题。

看到掘金上有篇文章《如何保护价值上千万的Node.js源代码？》里面介绍了一个方法把js代码先混淆，然后再编译成字节码，最后把字节码打包成可执行的二进制文件放在服务器上。
文中提及了3个工具:
1.代码混淆工具JavaScript obfuscator
2.字节码编译器bytenode
3.打包工具pmq20/node-packer，但是两年没更新了，只支持到Node.js 8.3.0，更高版本说是要移步slee047/node-packer。

如果把代码放在别人的服务器上，确实这是一套挺好的解决方案，但是我们公司的项目只是放在自己的服务器上，只是说并不想轻易的被人debug和copy了，感觉并不需要那么高级别的措施，但是混淆是可以做的。
那么下面来讲讲怎么在laravel前端做混淆，注意这里混淆的是.js文件，而不是php

1.npm安装JavaScript obfuscator

npm install --save javascript-obfuscator

2.package.json配置

    "scripts": {
        ...
        "obfuscate": "javascript-obfuscator 需混淆的源代码文件or目录 --config obfuscate配置.json --output 混淆后文件名or存放目录 ",
        ...
    },

例如:

javascript-obfuscator public/A/ --config js-obfuse-config.json --output public/B/

这里对输出路径需要说明一下：
如果输入输出都是js文件，那么混淆后文件会在当前或者指定目录下
比如

//a.js和b.js同目录
javascript-obfuscator a.js --config js-obfuse-config.json --output b.js

如果是文件夹的话，那么混淆后文件会按混淆前的路径进行输出

//混淆前文件在public/A/
//混淆后文件在public/B/public/A
javascript-obfuscator public/A/ --config js-obfuse-config.json --output public/B/

其中配置文件js-obfuse-config.json配置的是各种混淆参数，根据不同的混淆参数出来的效果不同，混淆程度越高，代码体积越大，对性能影响越高。而我使用的是官网推荐的中等混淆程度的配置。
这些配置这些配置，除了放在json文件里面也可以放在编译命令里
例如：

javascript-obfuscator public/A/ --output public/B/ --string-array-encoding 'rc4'

放在package.json文件里

    "scripts": {
        ...
        "obfuscate": "javascript-obfuscator public/A/ --output public/B/ --string-array-encoding 'rc4' ",
        ...
    },

然后再通过npm执行

npm run obfuscate

我们还可以把npm命令串起来

//package.json的script如下
   "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "obfuscate": "javascript-obfuscator public/A/ --config js-obfuse-config.json --output public/B/ ",
        "build": "npm run dev && npm run obfuscate"
    },

然后运行

npm run build

实现一键编译+混淆

转载请注明作者和本文链接！！！