vue項目配置 webpack-obfuscator 進行代碼加密混淆

時間  2021-03-03
標籤 html 前端 vue jquery webpack web npm 數組 bash app 欄目 HTML 简体版
原文   原文鏈接

背景

公司代碼提供給第三方使用，爲了避免徹底泄露源碼，須要對給出的代碼進行加密混淆，前端代碼雖然沒法作到徹底加密混淆，可是經過使用 webpack-obfuscator 經過增長隨機廢代碼段、字符編碼轉義等方法可使構建代碼徹底混淆，達到沒法恢復源碼甚至沒法閱讀的目的。html

安裝

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
      // 數組內是須要排除的文件
    }, ['abc.js'])
  ]
};

vue cli 項目配置：vue

// 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: {}
}

若只想在打包時加密混淆，本地運行時不混淆，能夠進行如下的配置：jquery

configureWebpack: (process.env.NODE_ENV === 'production') ? {
    plugins: [
      new JavaScriptObfuscator({
        // ...
      }, [])
    ]
  } : {},

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

構建

npm run build

構建文件對比

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 無參數時

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%web

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)npm

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,
  // 應用機率;在較大的代碼庫中，建議下降此值，由於大量的控制流轉換可能會增長代碼的大小並下降代碼的速度。
  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)bash

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 低混淆

高性能: 性能稍微慢於沒有混淆app

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)

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 字節)

主要屬性

{
  // 壓縮,無換行
  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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程