一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術(shù)及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - vue.js - vue項目配置 webpack-obfuscator 進行代碼加密混淆的實現(xiàn)

vue項目配置 webpack-obfuscator 進行代碼加密混淆的實現(xiàn)

2022-01-24 16:42Dragonir vue.js

這篇文章主要介紹了vue項目配置 webpack-obfuscator 進行代碼加密混淆,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

背景

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

安裝

vue項目配置 webpack-obfuscator 進行代碼加密混淆的實現(xiàn)

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.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 項目配置:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 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: {}
}

若只想在打包時加密混淆,本地運行時不混淆,可以進行以下的配置:

?
1
2
3
4
5
6
7
configureWebpack: (process.env.NODE_ENV === 'production') ? {
 plugins: [
 new JavaScriptObfuscator({
 // ...
 }, [])
 ]
 } : {},

vue cli 2.x 配置在 webpack.prod.conf.js

構(gòu)建

?
1
npm run build

構(gòu)建文件對比

1. 原始文件

?
1
2
3
4
5
6
7
// test.js
function 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 無參數(shù)時

?
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,
 // 應用概率;在較大的代碼庫中,建議降低此值,因為大量的控制流轉(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)

?
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,
 // 應用概率;在較大的代碼庫中,建議降低此值,因為大量的控制流轉(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)建后文件大小:7066字節(jié)(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,
 // 此選項幾乎不可能使用開發(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)

?
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")]);

對比表格

 

文件名稱 文件大小 正常構(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é))

 

主要屬性

?
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,
 // 應用概率;在較大的代碼庫中,建議降低此值,因為大量的控制流轉(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 版本相匹配,我用的是[email protected] 項目 webpack4.x 版本。(4.x版webpack 使用最新版 [email protected] 會報錯無法使用,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ù)瀏覽下面的相關文章希望大家以后多多支持服務器之家!

原文鏈接:https://www.cnblogs.com/dragonir/archive/2021/02/25/14445767.html

延伸 · 閱讀

精彩推薦
  • vue.jsVue項目中實現(xiàn)帶參跳轉(zhuǎn)功能

    Vue項目中實現(xiàn)帶參跳轉(zhuǎn)功能

    最近做了一個手機端系統(tǒng),其中遇到了父頁面需要攜帶參數(shù)跳轉(zhuǎn)至子頁面的問題,現(xiàn)已解決,下面分享一下實現(xiàn)過程,感興趣的朋友一起看看吧...

    YiluRen丶4302022-03-03
  • vue.jsVue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn)

    Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn)

    這篇文章主要介紹了Vue2.x 項目性能優(yōu)化之代碼優(yōu)化的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋...

    優(yōu)小U9632022-02-21
  • vue.js用vite搭建vue3應用的實現(xiàn)方法

    用vite搭建vue3應用的實現(xiàn)方法

    這篇文章主要介紹了用vite搭建vue3應用的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下...

    Asiter7912022-01-22
  • vue.jsVue2.x-使用防抖以及節(jié)流的示例

    Vue2.x-使用防抖以及節(jié)流的示例

    這篇文章主要介紹了Vue2.x-使用防抖以及節(jié)流的示例,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下...

    Kyara6372022-01-25
  • vue.jsVue中引入svg圖標的兩種方式

    Vue中引入svg圖標的兩種方式

    這篇文章主要給大家介紹了關于Vue中引入svg圖標的兩種方式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的...

    十里不故夢10222021-12-31
  • vue.jsVue多選列表組件深入詳解

    Vue多選列表組件深入詳解

    這篇文章主要介紹了Vue多選列表組件深入詳解,這個是vue的基本組件,有需要的同學可以研究下...

    yukiwu6752022-01-25
  • vue.js梳理一下vue中的生命周期

    梳理一下vue中的生命周期

    看過很多人講vue的生命周期,但總是被繞的云里霧里,尤其是自學的同學,可能js的基礎也不是太牢固,聽起來更是吃力,那我就已個人之淺見,以大白話...

    CRMEB技術(shù)團隊7992021-12-22
  • vue.js詳解vue 表單綁定與組件

    詳解vue 表單綁定與組件

    這篇文章主要介紹了vue 表單綁定與組件的相關資料,幫助大家更好的理解和學習使用vue框架,感興趣的朋友可以了解下...

    Latteitcjz6432022-02-12
主站蜘蛛池模板: 国产美女屁股直流白浆视频无遮挡 | a4yy欧美一区二区三区 | 日韩精品一二三区 | 国产在线麻豆波多野结衣 | 国产永久一区二区三区 | 男生操女生漫画 | 天美传媒影视在线免费观看 | 色女的乖男人 | 成人a级特黄毛片 | 日本在线观看a | 精品国产一区二区三区在线观看 | 黑人巨摘花第一次出血 | 九哥草逼网 | 女仆色网址 | 午夜香蕉 | 无人区乱码区1卡2卡三卡在线 | 三级黄色片在线免费观看 | 水野朝阳厨房系列在线观看 | 午夜一级影院 | 99re8在这里只有精品23 | 羞羞私人影院可以直接免费观影吗 | 国产欧美日韩视频在线观看一区二区 | 国产福利专区精品视频 | 国内精品久久久久香蕉 | 国产伦码精品一区二区三区 | 欧美一级xxxx俄罗斯一级 | 和直男装修工在工地啪 | xx顶级欧美熟妞xxhd | 思敏1一5集国语版免费观看 | 久久影院中文字幕 | 视频大全在线观看网址 | 精品播放| 午夜伦伦电影理论片费看 | 女教师的一级毛片 | 欧美xbxbxbxb大片| 国产91页| 美女的让男人桶爽免费看 | 91精品国产9l久久久久 | 免费日批软件 | 91在线播| 男生操女生的漫画 |