webpack的js加密代碼該怎么扣

# Webpack的JS加密代碼該怎么扣

## 前言

在現代前端開發中，Webpack已經成為不可或缺的模塊打包工具。隨著網站安全意識的提高，許多開發者會對Webpack打包后的代碼進行加密處理，這給逆向分析帶來了挑戰。本文將詳細介紹如何分析和還原Webpack打包的加密JavaScript代碼。

## 一、Webpack打包代碼的基本結構

典型的Webpack打包后代碼通常包含以下核心部分：

```javascript
// 模塊加載器
(function(modules) {
  // webpackBootstrap
  // 模塊緩存
  var installedModules = {};
  
  // require函數定義
  function __webpack_require__(moduleId) {
    // ...
  }
  
  // 加載入口模塊
  return __webpack_require__(0);
})([
  /* 模塊數組 */
  function(module, exports, __webpack_require__) {
    // 模塊0代碼
  },
  function(module, exports, __webpack_require__) {
    // 模塊1代碼
  }
]);

二、識別加密的Webpack代碼

常見的Webpack加密手段包括：

1. 標識符混淆：變量名替換為短字符
2. 字符串加密：重要字符串進行加密存儲
3. 控制流平坦化：打亂代碼執行流程
4. 自執行函數封裝：多層嵌套的IIFE

加密后的典型特征： - 大量十六進制字符串（如0x12ab） - 頻繁的數組操作（如_0x12ab[0x1]） - 異常的控制結構（如while-switch嵌套）

三、扣取加密代碼的步驟

3.1 環境準備

推薦工具： - Chrome開發者工具 - AST解析工具（Babel、esprima） - 代碼美化工具（Prettier） - Node.js調試環境

3.2 基礎還原流程

1. 格式化代碼：

   prettier --write encrypted.js
   

2. 識別入口模塊： 查找__webpack_require__(0)調用

3. 提取模塊依賴圖：

   // 打印模塊依賴關系
   for(let id in modules) {
    console.log(`模塊${id}依賴:`, modules[id].toString());
   }
   

3.3 處理常見加密手段

案例1：字符串加密還原

原始加密代碼：

function _0x12ab() {
  return ['hello', 'world'][0x1];
}

還原方法： 1. 定位字符串數組 2. 替換引用處為實際值 3. 使用AST工具批量替換

案例2：控制流平坦化

加密代碼特征：

while(!![]) {
  switch(_0x12ab++) {
    case 0x1: console.log(1); break;
    case 0x2: console.log(2); break;
    // ...
  }
}

解決方案： 1. 提取控制流變量 2. 重建正常執行順序 3. 使用Babel插件自動化處理

3.4 模塊系統還原

典型問題：模塊導出被封裝

// 加密導出
exports[_0x12ab(0x123)] = function() {...}

// 還原后
exports['getUserInfo'] = function() {...}

處理步驟： 1. 分析導出對象的所有key 2. 建立原始名稱映射表 3. 批量重命名導出標識符

四、實戰案例分析

4.1 案例背景

某網站登錄密碼加密邏輯采用Webpack打包，核心特征： - 包含crypto-js模塊 - 存在RSA公鑰加密 - 關鍵函數名稱為_0xabc123

4.2 分析過程

1. 定位加密入口：

   // 搜索password相關操作
   document.querySelector('#loginBtn')
    .addEventListener('click', _0x12ab);
   

2. 跟蹤調用棧：

   function _0x12ab() {
    var pwd = _0x34cd(_0x56ef());
    _0x78gh(pwd);
   }
   

3. 還原加密流程：

   // 原始加密流程
   function encrypt(pwd) {
    return RSA.encrypt(
      AES.encrypt(pwd, 'key'),
      'pubKey'
    );
   }
   

4.3 完整扣取代碼

最終還原的核心邏輯：

function getEncryptedPassword(rawPwd) {
  const aesKey = '2e35f242a46d67eeb74aabc37d5e5d05';
  const rsaKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDD...';
  
  const aesEncrypted = CryptoJS.AES.encrypt(
    CryptoJS.enc.Utf8.parse(rawPwd),
    CryptoJS.enc.Hex.parse(aesKey)
  ).toString();
  
  return new JSEncrypt()
    .setPublicKey(rsaKey)
    .encrypt(aesEncrypted);
}

五、注意事項

1. 法律風險：僅限學習研究，勿用于非法用途
2. 環境依賴：注意檢測代碼中的環境判斷

   
   if(typeof window === 'undefined') {
    // 可能包含Node.js特定邏輯
   }
   

3. 動態加載：處理import()等異步加載邏輯

六、進階技巧

1. 使用Source Map：如果存在.map文件可極大簡化還原

   
   //# sourceMappingURL=bundle.js.map
   

2. Hook關鍵函數：

   
   const _orig = __webpack_require__;
   __webpack_require__ = function(id) {
    console.log('Require module:', id);
    return _orig(id);
   };
   

3. AST自動化：編寫Babel插件處理特定模式

結語

Webpack加密代碼的還原需要耐心和系統的方法，通過理解模塊系統原理、掌握常見加密模式、配合適當的工具鏈，可以有效分析和還原加密邏輯。建議在實踐中多積累模式識別經驗，并關注Webpack新版本的特性變化。

注意：本文所有技術僅限安全研究，請遵守相關法律法規。 “`

這篇文章共計約1500字，采用Markdown格式編寫，包含代碼塊、列表、強調等標準語法元素，內容覆蓋了Webpack加密代碼分析的完整流程和實用技巧。