背景

公司代碼提供給第三方使用，為了不完全泄露源碼，需要對給出的代碼進(jìn)行加密混淆，前端代碼雖然無法做到完全加密混淆，但是通過使用 webpack-obfuscator 通過增加隨機(jī)廢代碼段、字符編碼轉(zhuǎn)義等方法可以使構(gòu)建代碼完全混淆，達(dá)到無法恢復(fù)源碼甚至無法閱讀的目的。

安裝

webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator

npm install --save-dev webpack-obfuscator

配置

// webpack.config.jsconst 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 項(xiàng)目配置：

// vue.config.jsconst 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: {}}

若只想在打包時(shí)加密混淆，本地運(yùn)行時(shí)不混淆，可以進(jìn)行以下的配置：

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.jsfunction abc() { for (let i = 0; i < 10; i++) { console.log(`第${i}個(gè),你好,hello`) }}abc()

2. webpack 默認(rèn)工具uglifyjs-webpack-plugin

webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log('第'+o+'個(gè),你好,hello')}()}},['lVK7']);

3. webpack-obfuscator 無參數(shù)時(shí)

new JavaScriptObfuscator({}, [])

var _0x1f6e=['個(gè),你好,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倍的運(yùn)行速度) controlFlowFlattening: true, // 應(yīng)用概率;在較大的代碼庫中，建議降低此值，因?yàn)榇罅康目刂屏鬓D(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 1, // 隨機(jī)的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: true, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 1, // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺選項(xiàng)卡 debugProtection: true, // 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。 debugProtectionInterval: true, // 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。 disableConsoleOutput: true, // 標(biāo)識符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識符) identifierNamesGenerator: ’hexadecimal’, log: false, // 是否啟用全局變量和函數(shù)名稱的混淆 renameGlobals: false, // 通過固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中 stringArray: true, stringArrayEncoding: ’rc4’, stringArrayThreshold: 1, // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。 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倍的運(yùn)行速度) controlFlowFlattening: true, // 應(yīng)用概率;在較大的代碼庫中，建議降低此值，因?yàn)榇罅康目刂屏鬓D(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 0.75, // 隨機(jī)的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: true, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 0.4, // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺選項(xiàng)卡 debugProtection: false, // 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。 disableConsoleOutput: true, // 標(biāo)識符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識符) identifierNamesGenerator: ’hexadecimal’, log: false, // 是否啟用全局變量和函數(shù)名稱的混淆 renameGlobals: false, // 通過固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中 stringArray: true, stringArrayEncoding: ’base64’, stringArrayThreshold: 0.75, transformObjectKeys: true, // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。 unicodeEscapeSequence: false}, []),

構(gòu)建后文件大小：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倍的運(yùn)行速度) controlFlowFlattening: false, // 隨機(jī)的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: false, // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺選項(xiàng)卡 debugProtection: false, // 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。 disableConsoleOutput: true, // 標(biāo)識符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識符) identifierNamesGenerator: ’hexadecimal’, log: false, // 是否啟用全局變量和函數(shù)名稱的混淆 renameGlobals: false, // 通過固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中 stringArray: true, stringArrayEncoding: false, stringArrayThreshold: 0.75, // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。 unicodeEscapeSequence: false}, []),

構(gòu)建后文件大小: 2,424 字節(jié)(2.36 KB)

var _0x37a6=['exception','trace','console','個(gè),你好,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倍的運(yùn)行速度) controlFlowFlattening: false, // 應(yīng)用概率;在較大的代碼庫中，建議降低此值，因?yàn)榇罅康目刂屏鬓D(zhuǎn)換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 0.75, // 隨機(jī)的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: false, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 0.4, // 此選項(xiàng)幾乎不可能使用開發(fā)者工具的控制臺選項(xiàng)卡 debugProtection: false, // 如果選中，則會在“控制臺”選項(xiàng)卡上使用間隔強(qiáng)制調(diào)試模式，從而更難使用“開發(fā)人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數(shù)替換它們來禁用console.log，console.info，console.error和console.warn。這使得調(diào)試器的使用更加困難。 disableConsoleOutput: false, //鎖定混淆的源代碼，使其僅在特定域和/或子域上運(yùn)行。這使得某人只需復(fù)制并粘貼您的源代碼并在其他地方運(yùn)行就變得非常困難。 domainLock: [], //標(biāo)識符的混淆方式 hexadecimal(十六進(jìn)制) mangled(短標(biāo)識符) identifierNamesGenerator: ’hexadecimal’, //全局標(biāo)識符添加特定前綴,在混淆同一頁面上加載的多個(gè)文件時(shí)使用此選項(xiàng)。此選項(xiàng)有助于避免這些文件的全局標(biāo)識符之間發(fā)生沖突。為每個(gè)文件使用不同的前綴 identifiersPrefix: ’’, inputFileName: ’’, // 允許將信息記錄到控制臺。 log: false, // 是否啟用全局變量和函數(shù)名稱的混淆 renameGlobals: false, // 禁用模糊處理和生成標(biāo)識符 reservedNames: [], // 禁用字符串文字的轉(zhuǎn)換 reservedStrings: [], // 通過固定和隨機(jī)（在代碼混淆時(shí)生成）的位置移動數(shù)組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項(xiàng)，因?yàn)檩o助函數(shù)可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時(shí)需要配置 cpmpat:true; seed: 0, selfDefending: false, sourceMap: false, sourceMapBaseUrl: ’’, sourceMapFileName: ’’, sourceMapMode: ’separate’, // 刪除字符串文字并將它們放在一個(gè)特殊的數(shù)組中 stringArray: true, // 編碼的所有字符串文字stringArray使用base64或rc4并插入即用其解碼回在運(yùn)行時(shí)的特殊代碼。true（boolean）：stringArray使用編碼值base64;false（boolean）：不編碼stringArray值;’base64’（string）：stringArray使用編碼值base64;’rc4’（string）：stringArray使用編碼值rc4。大約慢30-50％base64，但更難獲得初始值。建議禁用unicodeEscapeSequence帶rc4編碼的選項(xiàng)以防止非常大的混淆代碼。 stringArrayEncoding: false, // 調(diào)整字符串文字將插入stringArray的概率 stringArrayThreshold: 0.75, // 您可以將混淆代碼的目標(biāo)環(huán)境設(shè)置為以下之一：Browser;Browser No Eval;Node target: ’browser’, // 是否啟用混淆對象鍵 transformObjectKeys: false, // 允許啟用/禁用字符串轉(zhuǎn)換為unicode轉(zhuǎn)義序列。Unicode轉(zhuǎn)義序列大大增加了代碼大小，并且可以輕松地將字符串恢復(fù)為原始視圖。建議僅對小型源代碼啟用此選項(xiàng)。 unicodeEscapeSequence: false}

注意

安裝 webpack-obfuscator 時(shí)要注意webpack-obfuscator的版本要與本地項(xiàng)目 webpack 版本相匹配，我用的是[email protected] 項(xiàng)目 webpack 是 4.x 版本。（4.x版 本 webpack 使用最新版 [email protected] 會報(bào)錯(cuò)無法使用，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

相關(guān)文章參考：

js代碼混淆

webpack-obfuscator https://blog.csdn.net/qq_31126175/article/details/86526237

到此這篇關(guān)于vue項(xiàng)目配置 webpack-obfuscator 進(jìn)行代碼加密混淆的文章就介紹到這了,更多相關(guān)vue webpack-obfuscator 代碼混淆內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！