vue項目配置 webpack-obfuscator 進行代碼加密混淆的實現(xiàn)
更新時間：2021年02月26日 09:42:51 作者：Dragonir
這篇文章主要介紹了vue項目配置 webpack-obfuscator 進行代碼加密混淆,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
背景
公司代碼提供給第三方使用，為了不完全泄露源碼，需要對給出的代碼進行加密混淆，前端代碼雖然無法做到完全加密混淆，但是通過使用 webpack-obfuscator 通過增加隨機廢代碼段、字符編碼轉(zhuǎn)義等方法可以使構(gòu)建代碼完全混淆，達到無法恢復源碼甚至無法閱讀的目的。
安裝
webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator
npm install --save-dev webpack-obfuscator
配置
// webpack.config.js
const JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
entry: {
'abc': './test/input/index.js',
'cde': './test/input/index1.js'
},
output: {
path: 'dist',
filename: '[name].js'
},
plugins: [
new JavaScriptObfuscator({
rotateUnicodeArray: true
// 數(shù)組內(nèi)是需要排除的文件
}, ['abc.js'])
]
};
vue cli 項目配置：
// vue.config.js
const path = require('path');
var JavaScriptObfuscator = require('webpack-obfuscator');
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
productionSourceMap: false,
configureWebpack: {
plugins: [
new JavaScriptObfuscator({
rotateStringArray: true,
}, [])
]
},
pwa: {},
pages: {}
}
若只想在打包時加密混淆，本地運行時不混淆，可以進行以下的配置：
configureWebpack: (process.env.NODE_ENV === 'production') ? {
plugins: [
new JavaScriptObfuscator({
// ...
}, [])
]
} : {},
vue cli 2.x 配置在 webpack.prod.conf.js 中
構(gòu)建
npm run build
構(gòu)建文件對比
1. 原始文件
// test.js
function abc() {
for (let i = 0; i < 10; i++) {
console.log(`第${i}個,你好,hello`)
}
}
abc()
2. webpack 默認工具uglifyjs-webpack-plugin
webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log("第"+o+"個,你好,hello")}()}},["lVK7"]);
3. webpack-obfuscator 無參數(shù)時
new JavaScriptObfuscator({
}, [])
var _0x1f6e=["個,你好,hello","lVK7","log"];!function(n,o){!function(o){for(;--o;)n.push(n.shift())}(++o)}(_0x1f6e,323);var _0x3655=function(n,o){return _0x1f6e[n-=0]};webpackJsonp([2],{lVK7:function(n,o){!function(){for(var n=0;n<10;n++)console[_0x3655("0x0")]("第"+n+_0x3655("0x1"))}()}},[_0x3655("0x2")]);
4. webpack-obfuscator 高度混淆
低性能：性能比沒有模糊處理慢 50-100%
new JavaScriptObfuscator({
// 壓縮代碼
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: true,
// 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。
controlFlowFlatteningThreshold: 1,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: true,
// 死代碼塊的影響概率
deadCodeInjectionThreshold: 1,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: true,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: true,
// 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
disableConsoleOutput: true,
// 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否啟用全局變量和函數(shù)名稱的混淆
renameGlobals: false,
// 通過固定和隨機（在代碼混淆時生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數(shù)可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
selfDefending: true,
// 刪除字符串文字并將它們放在一個特殊的數(shù)組中
stringArray: true,
stringArrayEncoding: 'rc4',
stringArrayThreshold: 1,
// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
transformObjectKeys: true,
unicodeEscapeSequence: false
}, []),
構(gòu)建后文件大小: 29,999 字節(jié)(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)},4e3);
3. webpack-obfuscator 中等混淆
最佳性能：性能比沒有模糊處理慢 30-35%
new JavaScriptObfuscator({
// 壓縮代碼
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: true,
// 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。
controlFlowFlatteningThreshold: 0.75,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: true,
// 死代碼塊的影響概率
deadCodeInjectionThreshold: 0.4,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: false,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: false,
// 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
disableConsoleOutput: true,
// 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否啟用全局變量和函數(shù)名稱的混淆
renameGlobals: false,
// 通過固定和隨機（在代碼混淆時生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數(shù)可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
selfDefending: true,
// 刪除字符串文字并將它們放在一個特殊的數(shù)組中
stringArray: true,
stringArrayEncoding: 'base64',
stringArrayThreshold: 0.75,
transformObjectKeys: true,
// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
unicodeEscapeSequence: false
}, []),
構(gòu)建后文件大?。?code>7066字節(jié)(6.90kb)
var _0x1a25=["UmFzT1U=","RkVIc0o=","VUt2eW4=","Q29IS0g=","V1NSZ0k=","d3RNT2w=","dlV6cUw=","RlpzZWg=","QnpzSlE=","cXBqQ1k=","YXBwbHk=","bFZLNw==","Y3p1Ymo=","TFZlQXE=","Y2NKWlY=","cmV0dXJuIChmdW5jdGlvbigpIA==",
// ...
(b[_0x4bcb("0x2a")]("第"+c,b[_0x4bcb("0x2b")]))}})}},[_0x4bcb("0x2f")]);
4. webpack-obfuscator 低混淆
高性能: 性能稍微慢于沒有混淆
new JavaScriptObfuscator({
// 壓縮代碼
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: false,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: false,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: false,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: false,
// 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
disableConsoleOutput: true,
// 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
log: false,
// 是否啟用全局變量和函數(shù)名稱的混淆
renameGlobals: false,
// 通過固定和隨機（在代碼混淆時生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數(shù)可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
selfDefending: true,
// 刪除字符串文字并將它們放在一個特殊的數(shù)組中
stringArray: true,
stringArrayEncoding: false,
stringArrayThreshold: 0.75,
// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
unicodeEscapeSequence: false
}, []),
構(gòu)建后文件大小: 2,424 字節(jié)(2.36 KB)
var _0x37a6=["exception","trace","console","個,你好,hello","lVK7","apply","return (function() ",'{}.constructor("return this")( )',"log","warn","debug","info","error"];!function(n,e){var o=function(e){for(;--e;)n.push(n.shift())};
// ...
[_0xe1fd("0x3")]("第"+n+_0xe1fd("0xb"))}()}},[_0xe1fd("0xc")]);
對比表格
| 文件名稱 | 文件大小 | 正常構(gòu)建 | 無參數(shù) | 高度混淆 | 中度混淆 | 低度混淆 |
|---|---|---|---|---|---|---|
| test.js | 117字節(jié) | 177字節(jié) | 363字節(jié) | 29.2 KB(29,999 字節(jié)) | 6.90KB(7066字節(jié)) | 2.36 KB(2,424 字節(jié)) |
| jquery.js | 111 KB (113,852 字節(jié)) | 85.0 KB (87,064 字節(jié)) | 115 KB (117,770 字節(jié)) | 1.24 MB (1,304,998 字節(jié)) | 401 KB (411,543 字節(jié)) | 117 KB (120,243 字節(jié)) |
主要屬性
{
// 壓縮,無換行
compact: true,
// 是否啟用控制流扁平化(降低1.5倍的運行速度)
controlFlowFlattening: false,
// 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。
controlFlowFlatteningThreshold: 0.75,
// 隨機的死代碼塊(增加了混淆代碼的大小)
deadCodeInjection: false,
// 死代碼塊的影響概率
deadCodeInjectionThreshold: 0.4,
// 此選項幾乎不可能使用開發(fā)者工具的控制臺選項卡
debugProtection: false,
// 如果選中，則會在“控制臺”選項卡上使用間隔強制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。
debugProtectionInterval: false,
// 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。
disableConsoleOutput: false,
//鎖定混淆的源代碼，使其僅在特定域和/或子域上運行。這使得某人只需復制并粘貼您的源代碼并在其他地方運行就變得非常困難。
domainLock: [],
//標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符)
identifierNamesGenerator: 'hexadecimal',
//全局標識符添加特定前綴,在混淆同一頁面上加載的多個文件時使用此選項。此選項有助于避免這些文件的全局標識符之間發(fā)生沖突。為每個文件使用不同的前綴
identifiersPrefix: '',
inputFileName: '',
// 允許將信息記錄到控制臺。
log: false,
// 是否啟用全局變量和函數(shù)名稱的混淆
renameGlobals: false,
// 禁用模糊處理和生成標識符
reservedNames: [],
// 禁用字符串文字的轉(zhuǎn)換
reservedStrings: [],
// 通過固定和隨機（在代碼混淆時生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數(shù)可以引起注意。
rotateStringArray: true,
// 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true;
seed: 0,
selfDefending: false,
sourceMap: false,
sourceMapBaseUrl: '',
sourceMapFileName: '',
sourceMapMode: 'separate',
// 刪除字符串文字并將它們放在一個特殊的數(shù)組中
stringArray: true,
// 編碼的所有字符串文字stringArray使用base64或rc4并插入即用其解碼回在運行時的特殊代碼。true（boolean）：stringArray使用編碼值base64;false（boolean）：不編碼stringArray值;'base64'（string）：stringArray使用編碼值base64;'rc4'（string）：stringArray使用編碼值rc4。大約慢30-50％base64，但更難獲得初始值。建議禁用unicodeEscapeSequence帶rc4編碼的選項以防止非常大的混淆代碼。
stringArrayEncoding: false,
// 調(diào)整字符串文字將插入stringArray的概率
stringArrayThreshold: 0.75,
// 您可以將混淆代碼的目標環(huán)境設置為以下之一：Browser;Browser No Eval;Node
target: 'browser',
// 是否啟用混淆對象鍵
transformObjectKeys: false,
// 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。
unicodeEscapeSequence: false
}
注意
- 安裝
webpack-obfuscator時要注意webpack-obfuscator的版本要與本地項目webpack版本相匹配，我用的是webpack-obfuscator@0.18.0項目webpack是4.x版本。（4.x版本webpack使用最新版webpack-obfuscator@3.3.0會報錯無法使用，webpack杳升級到5.x版本）。 excludes數(shù)組的兼容multimatch包語法，例如支持['js/chunk-vendors.**.js']、['excluded_bundle_name.js', '**_bundle_name.js']或'excluded_bundle_name.js'等。
文章地址：https://www.cnblogs.com/dragonir/p/14445767.html 作者：dragonir
相關文章參考：
js代碼混淆
webpack-obfuscator https://blog.csdn.net/qq_31126175/article/details/86526237
到此這篇關于vue項目配置 webpack-obfuscator 進行代碼加密混淆的文章就介紹到這了,更多相關vue webpack-obfuscator 代碼混淆內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應式是否相同，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-08-08
Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼
本文主要介紹了Vue3+NodeJS+Soket.io實現(xiàn)實時聊天的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
本篇文章主要介紹了Vue from-validate 表單驗證的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue雙花括號的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Vue實現(xiàn)父子組件傳值其實不難問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
今天小編就為大家分享一篇關于vue表單提交防雙/多擊的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue實現(xiàn)購物車拋物線小球動畫效果的方法,結(jié)合實例形式較為詳細的分析了vue.js實現(xiàn)拋物線動畫效果購物車功能相關原理與操作注意事項,需要的朋友可以參考下2019-02-02
這篇文章主要為大家詳細介紹了基于Vue.js的表格分頁組件使用方法，了解了Vue.js的特點，感興趣的朋友可以參考一下2016-05-05
vue開發(fā)runtime core中的虛擬節(jié)點示例詳解
這篇文章主要為大家介紹了vue開發(fā)runtime core中的虛擬節(jié)點示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要給大家介紹了關于如何在項目中封裝axios的相關資料,axios 請求的封裝,無非是為了方便代碼管理,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-09-09