轉(zhuǎn)載請(qǐng)注明作者和本文鏈接?。?！

這段時(shí)間，公司的一個(gè)用laravel做的前端項(xiàng)目要上線(xiàn)了，但是想著自己辛辛苦苦寫(xiě)的代碼，就那么被輕易的debug和copy，那也不行啊，所以研究了一下前端安全的問(wèn)題。

看到掘金上有篇文章《如何保護(hù)價(jià)值上千萬(wàn)的Node.js源代碼？》里面介紹了一個(gè)方法把js代碼先混淆，然后再編譯成字節(jié)碼，最后把字節(jié)碼打包成可執(zhí)行的二進(jìn)制文件放在服務(wù)器上。
文中提及了3個(gè)工具:
1.代碼混淆工具JavaScript obfuscator
2.字節(jié)碼編譯器bytenode
3.打包工具pmq20/node-packer，但是兩年沒(méi)更新了，只支持到Node.js 8.3.0，更高版本說(shuō)是要移步slee047/node-packer。

如果把代碼放在別人的服務(wù)器上，確實(shí)這是一套挺好的解決方案，但是我們公司的項(xiàng)目只是放在自己的服務(wù)器上，只是說(shuō)并不想輕易的被人debug和copy了，感覺(jué)并不需要那么高級(jí)別的措施，但是混淆是可以做的。
那么下面來(lái)講講怎么在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/

這里對(duì)輸出路徑需要說(shuō)明一下：
如果輸入輸出都是js文件，那么混淆后文件會(huì)在當(dāng)前或者指定目錄下
比如

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

如果是文件夾的話(huà)，那么混淆后文件會(huì)按混淆前的路徑進(jìn)行輸出

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

其中配置文件js-obfuse-config.json配置的是各種混淆參數(shù)，根據(jù)不同的混淆參數(shù)出來(lái)的效果不同，混淆程度越高，代碼體積越大，對(duì)性能影響越高。而我使用的是官網(wǎng)推薦的中等混淆程度的配置。
這些配置這些配置，除了放在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' ",
        ...
    },

然后再通過(guò)npm執(zhí)行

npm run obfuscate

我們還可以把npm命令串起來(lái)

//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"
    },

然后運(yùn)行

npm run build

實(shí)現(xiàn)一鍵編譯+混淆

轉(zhuǎn)載請(qǐng)注明作者和本文鏈接?。?！