背景
公司代碼提供給第三方使用，為了不完全泄露源碼，需要對給出的代碼進行加密混淆，前端代碼雖然無法做到完全加密混淆，但是通過使用 webpack-obfuscator 通過增加隨機廢代碼段、字符編碼轉義等方法可以使構建代碼完全混淆，達到無法恢復源碼甚至無法閱讀的目的。
安裝
webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator
|
1
|
npm install --save-dev webpack-obfuscator |
配置
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// 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 // 數組內是需要排除的文件 }, ['abc.js']) ]}; |
vue cli 項目配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
// 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: {}} |
若只想在打包時加密混淆，本地運行時不混淆，可以進行以下的配置：
|
1
2
3
4
5
6
7
|
configureWebpack: (process.env.NODE_ENV === 'production') ? { plugins: [ new JavaScriptObfuscator({ // ... }, []) ] } : {}, |
vue cli 2.x 配置在 webpack.prod.conf.js 中
構建
|
1
|
npm run build |
構建文件對比
1. 原始文件
|
1
2
3
4
5
6
7
|
// test.jsfunction abc() { for (let i = 0; i < 10; i++) { console.log(`第${i}個,你好,hello`) }}abc() |
2. webpack 默認工具uglifyjs-webpack-plugin
|
1
|
webpackJsonp([2],{lVK7:function(o,l){!function(){for(var o=0;o<10;o++)console.log("第"+o+"個,你好,hello")}()}},["lVK7"]); |
3. webpack-obfuscator 無參數時
|
1
2
|
new JavaScriptObfuscator({}, []) |
|
1
|
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%
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
new JavaScriptObfuscator({ // 壓縮代碼 compact: true, // 是否啟用控制流扁平化(降低1.5倍的運行速度) controlFlowFlattening: true, // 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 1, // 隨機的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: true, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 1, // 此選項幾乎不可能使用開發者工具的控制臺選項卡 debugProtection: true, // 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發人員工具”的其他功能。 debugProtectionInterval: true, // 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。 disableConsoleOutput: true, // 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符) identifierNamesGenerator: 'hexadecimal', log: false, // 是否啟用全局變量和函數名稱的混淆 renameGlobals: false, // 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個特殊的數組中 stringArray: true, stringArrayEncoding: 'rc4', stringArrayThreshold: 1, // 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。 transformObjectKeys: true, unicodeEscapeSequence: false}, []), |
構建后文件大小: 29,999 字節(29.2 KB)
|
1
2
3
|
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%
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
new JavaScriptObfuscator({ // 壓縮代碼 compact: true, // 是否啟用控制流扁平化(降低1.5倍的運行速度) controlFlowFlattening: true, // 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 0.75, // 隨機的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: true, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 0.4, // 此選項幾乎不可能使用開發者工具的控制臺選項卡 debugProtection: false, // 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。 disableConsoleOutput: true, // 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符) identifierNamesGenerator: 'hexadecimal', log: false, // 是否啟用全局變量和函數名稱的混淆 renameGlobals: false, // 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個特殊的數組中 stringArray: true, stringArrayEncoding: 'base64', stringArrayThreshold: 0.75, transformObjectKeys: true, // 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。 unicodeEscapeSequence: false}, []), |
構建后文件大小：7066字節(6.90kb)
|
1
2
3
|
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 低混淆
高性能: 性能稍微慢于沒有混淆
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
new JavaScriptObfuscator({ // 壓縮代碼 compact: true, // 是否啟用控制流扁平化(降低1.5倍的運行速度) controlFlowFlattening: false, // 隨機的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: false, // 此選項幾乎不可能使用開發者工具的控制臺選項卡 debugProtection: false, // 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。 disableConsoleOutput: true, // 標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符) identifierNamesGenerator: 'hexadecimal', log: false, // 是否啟用全局變量和函數名稱的混淆 renameGlobals: false, // 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true; selfDefending: true, // 刪除字符串文字并將它們放在一個特殊的數組中 stringArray: true, stringArrayEncoding: false, stringArrayThreshold: 0.75, // 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。 unicodeEscapeSequence: false}, []), |
構建后文件大小: 2,424 字節(2.36 KB)
|
1
2
3
|
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")]); |
對比表格
| 文件名稱 | 文件大小 | 正常構建 | 無參數 | 高度混淆 | 中度混淆 | 低度混淆 |
|---|---|---|---|---|---|---|
| test.js | 117字節 | 177字節 | 363字節 | 29.2 KB(29,999 字節) | 6.90KB(7066字節) | 2.36 KB(2,424 字節) |
| jquery.js | 111 KB (113,852 字節) | 85.0 KB (87,064 字節) | 115 KB (117,770 字節) | 1.24 MB (1,304,998 字節) | 401 KB (411,543 字節) | 117 KB (120,243 字節) |
主要屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
{ // 壓縮,無換行 compact: true, // 是否啟用控制流扁平化(降低1.5倍的運行速度) controlFlowFlattening: false, // 應用概率;在較大的代碼庫中，建議降低此值，因為大量的控制流轉換可能會增加代碼的大小并降低代碼的速度。 controlFlowFlatteningThreshold: 0.75, // 隨機的死代碼塊(增加了混淆代碼的大小) deadCodeInjection: false, // 死代碼塊的影響概率 deadCodeInjectionThreshold: 0.4, // 此選項幾乎不可能使用開發者工具的控制臺選項卡 debugProtection: false, // 如果選中，則會在“控制臺”選項卡上使用間隔強制調試模式，從而更難使用“開發人員工具”的其他功能。 debugProtectionInterval: false, // 通過用空函數替換它們來禁用console.log，console.info，console.error和console.warn。這使得調試器的使用更加困難。 disableConsoleOutput: false, //鎖定混淆的源代碼，使其僅在特定域和/或子域上運行。這使得某人只需復制并粘貼您的源代碼并在其他地方運行就變得非常困難。 domainLock: [], //標識符的混淆方式 hexadecimal(十六進制) mangled(短標識符) identifierNamesGenerator: 'hexadecimal', //全局標識符添加特定前綴,在混淆同一頁面上加載的多個文件時使用此選項。此選項有助于避免這些文件的全局標識符之間發生沖突。為每個文件使用不同的前綴 identifiersPrefix: '', inputFileName: '', // 允許將信息記錄到控制臺。 log: false, // 是否啟用全局變量和函數名稱的混淆 renameGlobals: false, // 禁用模糊處理和生成標識符 reservedNames: [], // 禁用字符串文字的轉換 reservedStrings: [], // 通過固定和隨機（在代碼混淆時生成）的位置移動數組。這使得將刪除的字符串的順序與其原始位置相匹配變得更加困難。如果原始源代碼不小，建議使用此選項，因為輔助函數可以引起注意。 rotateStringArray: true, // 混淆后的代碼,不能使用代碼美化,同時需要配置 cpmpat:true; seed: 0, selfDefending: false, sourceMap: false, sourceMapBaseUrl: '', sourceMapFileName: '', sourceMapMode: 'separate', // 刪除字符串文字并將它們放在一個特殊的數組中 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, // 調整字符串文字將插入stringArray的概率 stringArrayThreshold: 0.75, // 您可以將混淆代碼的目標環境設置為以下之一：Browser;Browser No Eval;Node target: 'browser', // 是否啟用混淆對象鍵 transformObjectKeys: false, // 允許啟用/禁用字符串轉換為unicode轉義序列。Unicode轉義序列大大增加了代碼大小，并且可以輕松地將字符串恢復為原始視圖。建議僅對小型源代碼啟用此選項。 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數組的兼容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 代碼混淆內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/dragonir/archive/2021/02/25/14445767.html
