深入分析 `JavaScript Obfuscation` (代码混淆) 的常见技术 (`Control Flow Flattening`, `String Encryption`, `Dead Code Injection`) 及其反制。

各位观众老爷们，早上好/下午好/晚上好！我是你们的老朋友，今天咱们来聊聊 JavaScript 代码混淆那些事儿。这年头，辛辛苦苦写的代码，谁也不想被人轻易扒光了底裤，所以代码混淆就成了保护知识产权的一道重要防线。今天咱们就来深入剖析几种常见的 JavaScript 混淆技术，以及如何见招拆招，把它们一一击破。

一、开胃小菜：为什么要代码混淆？

在正式开讲之前，先简单聊聊代码混淆的意义。想象一下，你写了一个非常牛逼的 JavaScript 库，包含了各种核心算法，如果你直接把源码扔到网上，岂不是相当于把自己的心血拱手让人？别人可以直接拿去用，甚至改头换面变成自己的东西，这谁受得了？

代码混淆的目的就是增加代码的阅读和理解难度，让潜在的攻击者或者竞争对手更难搞清楚你的代码逻辑，从而提高破解或抄袭的成本。但需要明确的是，代码混淆并不是万能的，它只能增加破解的难度，而不能完全阻止破解。记住，安全是一个持续对抗的过程，混淆只是其中的一环。

二、正餐开始：常见混淆技术及其反制

接下来，咱们就进入正题，来详细分析几种常见的 JavaScript 混淆技术，以及如何应对。

1. 控制流平坦化 (Control Flow Flattening)

原理：

控制流平坦化是一种将代码的控制流变得复杂的技术。它会将原本的顺序执行的代码块打散，然后用一个状态机来控制代码的执行顺序。简单来说，就是把原本清晰的流程图变成了一团乱麻，让人摸不着头脑。

原始代码：

function calculate(a, b) {
  let result = a + b;
  if (result > 10) {
    result = result * 2;
  } else {
    result = result - 5;
  }
  return result;
}

混淆后的代码 (简化版)：

function calculate(a, b) {
  let result;
  let state = 'init'; // 初始状态

  while (true) {
    switch (state) {
      case 'init':
        result = a + b;
        state = 'check';
        break;
      case 'check':
        if (result > 10) {
          state = 'multiply';
        } else {
          state = 'subtract';
        }
        break;
      case 'multiply':
        result = result * 2;
        state = 'end';
        break;
      case 'subtract':
        result = result - 5;
        state = 'end';
        break;
      case 'end':
        return result;
    }
  }
}

可以看到，原本简单的 if...else 结构被拆分成了多个 case 分支，通过 state 变量来控制执行流程，代码的可读性大大降低。

反制：
- 静态分析： 通过分析代码的结构，找到控制 state 变量的逻辑。通常 state 变量会以一个循环语句和 switch 语句为框架。可以通过分析 switch 语句的 case 分支和 state 变量的赋值情况，还原代码的执行流程。
- 动态分析： 使用 JavaScript 调试器 (如 Chrome DevTools)，设置断点，单步执行代码，观察 state 变量的变化，从而理解代码的执行流程。
- AST (Abstract Syntax Tree) 转换： 将混淆后的代码解析成 AST，然后对 AST 进行分析和转换，将平坦化的控制流还原成原始的控制流。这是一个比较高级的方法，需要一定的编译原理知识。
- 自动化工具： 使用一些现成的反混淆工具，这些工具通常集成了多种反混淆技术，可以自动还原控制流平坦化的代码。例如，js-deobfuscator就是一个不错的选择。
代码示例 (动态分析):

在 Chrome DevTools 中，可以在 calculate 函数的开头和每个 case 分支的开头设置断点，然后单步执行代码，观察 state 变量和 result 变量的变化。通过这种方式，可以逐步理解代码的执行流程。

代码示例 (AST转换):

这是一个非常复杂的过程，这里只提供一个思路。可以使用 acorn 或 esprima 将代码解析成 AST，然后遍历 AST，找到控制流平坦化的模式，并将其还原成原始的 if...else 结构。这需要对 AST 的结构和 JavaScript 语法有深入的了解。

2. 字符串加密 (String Encryption)

原理：

字符串加密是一种将代码中的字符串常量进行加密的技术。这样可以防止攻击者直接通过搜索字符串来找到关键代码。

原始代码：

function showMessage(message) {
  alert("Hello, " + message + "!");
}

showMessage("World");

混淆后的代码 (简化版)：

function decryptString(encryptedString) {
  // 这是一个简单的解密函数，实际情况会更复杂
  let decryptedString = "";
  for (let i = 0; i < encryptedString.length; i++) {
    decryptedString += String.fromCharCode(encryptedString.charCodeAt(i) - 1);
  }
  return decryptedString;
}

function showMessage(message) {
  alert(decryptString("Ifmmp-") + message + decryptString("!"));
}

showMessage(decryptString("Xpsme"));

可以看到，原始代码中的字符串 "Hello, "、"!" 和 "World" 都被加密了，需要通过 decryptString 函数才能解密。

反制：
- Hook 解密函数： 找到解密函数 (如上面的 decryptString)，然后 Hook 它。 Hook 的意思是在调用解密函数之前或之后，截获其参数和返回值。这样就可以在代码执行过程中，动态地获取到解密后的字符串。
- 静态分析解密函数： 分析解密函数的逻辑，然后用 JavaScript 或其他语言编写一个解密脚本，将所有加密的字符串一次性解密。
- 替换解密函数： 如果解密函数比较简单，可以直接用解密后的字符串替换掉加密的字符串和解密函数调用。
代码示例 (Hook 解密函数):
```
(function() {
  let originalDecryptString = decryptString; // 保存原始的解密函数

  decryptString = function(encryptedString) {
    let decryptedString = originalDecryptString(encryptedString); // 调用原始的解密函数
    console.log("解密后的字符串:", decryptedString); // 打印解密后的字符串
    return decryptedString;
  };
})();
```
这段代码使用了一个立即执行函数 (IIFE) 来 Hook decryptString 函数。它首先保存了原始的 decryptString 函数，然后重新定义了 decryptString 函数。新的 decryptString 函数在调用原始的 decryptString 函数之后，会将解密后的字符串打印到控制台。这样就可以在代码执行过程中，动态地获取到解密后的字符串。

代码示例 (静态分析解密函数):

假设我们已经分析出 decryptString 函数的逻辑是将每个字符的 ASCII 码减 1。那么我们可以编写一个解密脚本如下：
```
function decrypt(encryptedString) {
  let decryptedString = "";
  for (let i = 0; i < encryptedString.length; i++) {
    decryptedString += String.fromCharCode(encryptedString.charCodeAt(i) - 1);
  }
  return decryptedString;
}

let encryptedString1 = "Ifmmp-";
let decryptedString1 = decrypt(encryptedString1);
console.log(decryptedString1); // 输出: Hello,

let encryptedString2 = "!";
let decryptedString2 = decrypt(encryptedString2);
console.log(decryptedString2); // 输出:

let encryptedString3 = "Xpsme";
let decryptedString3 = decrypt(encryptedString3);
console.log(decryptedString3); // 输出: World
```
然后，我们可以手动将代码中的加密字符串替换成解密后的字符串。

3. 死代码注入 (Dead Code Injection)

原理：

死代码注入是一种在代码中插入永远不会执行的代码的技术。这些代码通常是一些无意义的运算、永远不会满足的条件判断，或者是一些永远不会被调用的函数。死代码的作用是迷惑攻击者，增加代码的复杂度，使其更难理解代码的真实逻辑。

原始代码：
```
function add(a, b) {
  return a + b;
}

console.log(add(1, 2));
```
混淆后的代码 (简化版)：
```
function add(a, b) {
  let x = 10;
  let y = 20;
  let z = x * y; // 死代码，永远不会被使用

  if (false) { // 死代码，永远不会执行
    console.log("This will never be printed.");
  }

  function unusedFunction() { // 死代码，永远不会被调用
    console.log("This function is never called.");
  }

  return a + b;
}

console.log(add(1, 2));
```
可以看到，混淆后的代码中插入了一些无用的变量、条件判断和函数，这些代码不会对程序的执行产生任何影响，但会增加代码的复杂度。
反制：
- 静态分析： 通过静态分析，找到永远不会被执行的代码。这通常需要对代码的控制流进行分析，找出永远不会被满足的条件判断，或者永远不会被调用的函数。
- 动态分析： 通过动态分析，观察代码的执行路径，找出永远不会被执行的代码。可以使用 JavaScript 调试器，设置断点，单步执行代码，观察哪些代码没有被执行到。
- 代码简化： 使用代码简化工具，自动移除死代码。例如，可以使用 UglifyJS 或 Terser 等工具，这些工具可以自动移除未使用的变量、函数和代码块。
代码示例 (静态分析):

在上面的例子中，我们可以很容易地发现 if (false) 永远不会执行，unusedFunction 永远不会被调用， let z = x * y; 的结果没有被使用。因此，这些代码都可以被移除。

代码示例 (动态分析):

在 Chrome DevTools 中，可以在 add 函数的开头设置断点，然后单步执行代码。可以发现，if (false) 块中的代码永远不会被执行，unusedFunction 永远不会被调用。

代码示例 (代码简化):

使用 Terser 可以移除死代码：
```
terser input.js -o output.js
```
Terser 会自动移除 input.js 中的死代码，并将优化后的代码保存到 output.js 中。

三、混淆技术总结

为了方便大家理解，我把上面讲到的几种混淆技术和反制方法总结成一个表格：

混淆技术	原理	反制方法
控制流平坦化	将代码的控制流打散，用状态机控制代码的执行顺序。	静态分析 (分析状态机)、动态分析 (调试器单步执行)、AST 转换 (还原控制流)、自动化工具 (如 `js-deobfuscator`)
字符串加密	将代码中的字符串常量进行加密。	Hook 解密函数 (截获解密后的字符串)、静态分析解密函数 (编写解密脚本)、替换解密函数 (用解密后的字符串替换加密的字符串和解密函数调用)
死代码注入	在代码中插入永远不会执行的代码，迷惑攻击者。	静态分析 (找出永远不会被执行的代码)、动态分析 (观察代码的执行路径)、代码简化 (使用 `UglifyJS` 或 `Terser` 移除死代码)
变量名混淆	将变量名、函数名等替换成无意义的字符串，增加代码的阅读难度。	变量名重命名（使用有意义的变量名替换混淆后的变量名，手动或者使用工具）、代码格式化（使用代码格式化工具，增加代码的可读性）、上下文分析（结合上下文，推断变量的用途）
表达式变形	将表达式进行等价变形，增加代码的理解难度。例如，将 `a + b` 替换成 `a - (-b)`。	公式简化（手动或者使用数学公式简化工具，将变形后的表达式还原成原始表达式）、动态分析（观察表达式的计算结果）、查找规律（寻找表达式变形的规律，编写自动化脚本进行还原）
数组乱序	将数组的元素顺序打乱，增加代码的理解难度。	查找乱序算法（分析代码，找到数组乱序的算法）、执行乱序算法（使用 JavaScript 执行乱序算法，还原数组的原始顺序）、Hook 乱序函数（截获乱序后的数组和原始数组的对应关系）
对象属性重命名	将对象的属性名替换成无意义的字符串，增加代码的阅读难度。	属性名重命名（使用有意义的属性名替换混淆后的属性名，手动或者使用工具）、上下文分析（结合上下文，推断属性的用途）、动态分析（观察属性的访问和修改）
拆分合并函数	将一个函数拆分成多个小函数，或者将多个小函数合并成一个大函数，增加代码的理解难度。	函数重组（手动或者使用工具，将拆分的函数重新组合成原始函数）、函数拆分（手动或者使用工具，将合并的函数拆分成多个小函数）、上下文分析（结合上下文，理解函数的用途）

四、高级技巧：AST 的妙用

上面提到了一些反混淆方法，但对于一些复杂的混淆技术，使用 AST (Abstract Syntax Tree) 进行分析和转换可能是一种更有效的方法。

AST 是源代码的抽象语法树表示。它将代码的结构表示成一个树状结构，每个节点代表一个语法单元 (如变量、函数、表达式等)。通过操作 AST，可以对代码进行各种转换，如代码简化、代码优化、代码重构等。

使用 AST 进行反混淆的步骤通常如下：

解析代码： 使用 acorn、esprima 或其他 JavaScript 解析器，将混淆后的代码解析成 AST。
分析 AST： 遍历 AST，找到混淆的模式。例如，找到控制流平坦化的模式、字符串加密的模式、死代码注入的模式等。
转换 AST： 根据分析结果，对 AST 进行转换，还原代码的原始结构。例如，将平坦化的控制流还原成原始的 if...else 结构，解密加密的字符串，移除死代码等。
生成代码： 使用 escodegen 或其他代码生成器，将转换后的 AST 生成可读性更强的 JavaScript 代码。

AST 转换是一个非常复杂的过程，需要对 AST 的结构和 JavaScript 语法有深入的了解。但是，一旦掌握了 AST 转换的技巧，就可以应对各种复杂的混淆技术。

五、总结与展望

今天咱们聊了 JavaScript 代码混淆的一些常见技术和反制方法。代码混淆和反混淆是一个持续对抗的过程，混淆技术在不断发展，反混淆技术也在不断进步。作为开发者，我们需要不断学习新的混淆技术和反混淆技术，才能更好地保护自己的代码。

记住，没有绝对安全的代码，只有不断提高安全门槛的代码。希望今天的分享对大家有所帮助！

最后，祝大家早日成为反混淆大师！

发表回复 取消回复

发表回复取消回复