发布于 由admin

JS 代码混淆与反混淆：保护前端代码与逆向工程

各位前端的英雄们，锄禾日当午，不如来听我瞎忽悠！今天咱来聊聊JS代码的那些“花花肠子”——混淆与反混淆。

一、啥是JS代码混淆？为啥要混淆？

简单来说，JS代码混淆就是把咱们辛辛苦苦写的、可读性极强的JS代码，变成一堆你妈都认不出来的“乱码”。 就像把一本《JavaScript高级程序设计》扔进绞肉机里，出来的东西还能看？能看，但是你想读懂，emmm…祝你好运。

那么，为啥要这么干呢？原因很简单：保护代码！

咱们前端的代码，那可是直接暴露在浏览器里的，谁都能扒下来。 如果代码逻辑太简单，被别人轻易抄走，那岂不是亏大了？ 混淆之后，就算别人拿到了你的代码，想要搞清楚里面的逻辑，也得费一番功夫。 这就相当于给你的代码加了一层保护罩。

二、常见的JS混淆手段

JS代码混淆的手段有很多，就像武林高手一样，十八般武艺样样精通。 下面咱们就来盘点一下：

  1. 变量名和函数名替换

    这是最基础也是最常用的手段。 把那些具有描述性的变量名和函数名，统统替换成无意义的字符串，比如a、b、c，或者_0x1234、_0xabcd之类的。 这样，即使别人看到了你的代码，也很难猜出这些变量和函数是干嘛的。

    举个例子：

    // 混淆前
function calculateSum(num1, num2) {
  return num1 + num2;
}

// 混淆后
function a(b, c) {
  return b + c;
}

    是不是瞬间感觉智商受到了侮辱？

  2. 字符串加密

    JS代码中经常会用到字符串，比如一些提示信息、接口地址等等。 如果这些字符串直接暴露在代码中，很容易被别人找到。 所以，我们可以对这些字符串进行加密，在使用的时候再解密。

    // 混淆前
const message = "Hello, world!";
console.log(message);

// 混淆后
const _0x1234 = ["x48x65x6cx6cx6fx2cx20x77x6fx72x6cx64x21"]; // "Hello, world!" 的十六进制编码
console.log(_0x1234[0]);

    或者使用Base64编码：

    // 混淆前
const message = "Hello, world!";
console.log(message);

// 混淆后
const _0x1234 = ["SGVsbG8sIHdvcmxkIQ=="]; // "Hello, world!" 的Base64编码
console.log(atob(_0x1234[0]));

    这样，别人看到的只是一堆乱码，不知道你到底在说什么。

  3. 控制流平坦化

    这种混淆手段比较高级，它会把代码的执行流程打乱，让代码变得难以阅读和理解。 简单来说，就是把代码分成很多个小块，然后用一个switch语句来控制这些小块的执行顺序。

    // 混淆前
function foo(x) {
  if (x > 5) {
    console.log("x is greater than 5");
  } else {
    console.log("x is less than or equal to 5");
  }
}

// 混淆后 (简化版)
function foo(x) {
  let state = 0; // 初始状态
  while (true) {
    switch (state) {
      case 0:
        if (x > 5) {
          state = 1; // 跳转到状态1
          break;
        } else {
          state = 2; // 跳转到状态2
          break;
        }
      case 1:
        console.log("x is greater than 5");
        state = 3; // 跳转到状态3
        break;
      case 2:
        console.log("x is less than or equal to 5");
        state = 3; // 跳转到状态3
        break;
      case 3:
        return; // 结束
    }
  }
}

    原本清晰的if...else语句，变成了复杂的状态机，让人眼花缭乱。

  4. 死代码注入

    在代码中插入一些永远不会执行的代码，用来迷惑别人。 这些代码可能是一些无意义的运算，或者是一些永远不会被满足的条件判断。

    // 混淆前
function bar(y) {
  console.log(y);
}

// 混淆后
function bar(y) {
  if (1 > 2) {  //永远不会执行
    console.log("This will never be printed");
  }
  console.log(y);
}

    这些无用的代码会增加代码的复杂性，让别人更难理解代码的真实逻辑。

  5. debugger语句

    在代码中插入debugger语句，当开发者工具打开时，代码会在debugger语句处暂停执行。 这会让调试者感到困扰，增加调试难度。

    // 混淆前
function baz(z) {
  console.log(z);
}

// 混淆后
function baz(z) {
  debugger;  // 调试器会在这里暂停
  console.log(z);
}

    虽然简单粗暴，但是效果显著。

  6. 利用eval()函数
    eval()函数可以将字符串作为JavaScript代码执行。混淆器可以生成包含复杂逻辑的字符串，然后使用eval()来执行它。这使得代码的静态分析变得非常困难。

    // 混淆前
function add(a, b) {
  return a + b;
}
console.log(add(5, 3));

// 混淆后
const encodedFunction = "ZnVuY3Rpb24gYWRkKGEsIGIpIHsgcmV0dXJuIGEgKyBiOyB9";  // Base64 encoded function
const decodedFunction = atob(encodedFunction); //解码
eval(`var add = ${decodedFunction}`);
console.log(add(5, 3));

    这段代码中，add函数的定义被编码成Base64字符串，然后通过atob()解码，最后使用eval()执行。这种方法隐藏了代码的真实结构，增加了逆向工程的难度。

  7. 利用数组索引替换

    将代码中的字符串或数值常量存储在数组中，然后使用数组索引来引用它们。这可以隐藏代码中的敏感信息，并使代码更难阅读。

    // 混淆前
console.log("Hello, world!");
console.log(42);

// 混淆后
const constants = ["Hello, world!", 42];
console.log(constants[0]);
console.log(constants[1]);

    这种方法虽然简单，但可以有效地隐藏代码中的字面量值。

  8. 对象属性重命名

    将对象属性的名称替换为难以理解的字符串。这可以使代码更难阅读和维护。

    // 混淆前
const user = {
  firstName: "John",
  lastName: "Doe"
};
console.log(user.firstName);

// 混淆后
const user = {
  _0x1234: "John",
  _0x5678: "Doe"
};
console.log(user._0x1234);

    通过将属性名替换为无意义的字符串，可以使代码的结构更加模糊。

  9. 拆分和重组语句

将复杂的语句拆分成多个简单的语句，并以不同的顺序重组它们。这会使代码的逻辑流程更难跟踪。

// 混淆前
function calculateArea(width, height) {
  return width * height;
}

// 混淆后
function calculateArea(width, height) {
  let result = width;
  result *= height;
  return result;
}
  1. 使用Unicode转义序列

将JavaScript代码中的字符转换为Unicode转义序列。这可以使代码更难阅读，因为需要将转义序列转换回原始字符才能理解代码的含义。

// 混淆前
console.log("Hello, world!");

// 混淆后
console.log("u0048u0065u006cu006cu006fu002cu0020u0077u006fu0072u006cu0064u0021");

三、JS混淆工具

手动混淆代码？ 除非你闲的蛋疼。 现在有很多JS混淆工具，可以自动完成这些工作。 常见的工具有：

  • UglifyJS：一个非常流行的JS压缩和混淆工具，可以移除注释、空格，并进行变量名替换等操作。
  • JavaScript Obfuscator：一个专门的JS混淆工具，提供了多种混淆选项，可以进行字符串加密、控制流平坦化等操作。
  • Webpack + TerserPlugin：Webpack是一个模块打包工具，TerserPlugin是Webpack的一个插件，可以用来压缩和混淆JS代码。

这些工具各有特点，可以根据自己的需求选择合适的工具。

四、JS反混淆：破解“乱码”

既然有混淆，那肯定就有反混淆。 反混淆就是把那些被混淆过的代码，还原成可读性更高的代码。 这就像一场猫鼠游戏，混淆者想方设法隐藏代码，反混淆者则绞尽脑汁破解代码。

反混淆的难度取决于混淆的程度。 如果只是简单的变量名替换，那很容易就能还原。 但如果是使用了控制流平坦化等高级混淆手段，那反混淆的难度就大大增加了。

五、常见的JS反混淆手段

  1. 代码美化

    这是最基本的操作。 把那些被压缩成一行的代码，格式化成多行，加上适当的缩进和空格，让代码看起来更清晰。 很多在线工具都可以进行代码美化，比如jsbeautifier.org。

  2. 变量名和函数名还原

    如果混淆只是简单地把变量名和函数名替换成了无意义的字符串，那我们可以尝试手动还原它们。 根据代码的上下文，猜测这些变量和函数的作用，然后给它们重新命名。

    当然，如果代码量很大，手动还原会非常繁琐。 这时候，我们可以借助一些工具来辅助还原，比如AST Explorer。 AST Explorer可以把JS代码解析成抽象语法树（AST），然后我们可以通过修改AST来批量重命名变量和函数。

  3. 字符串解密

    如果代码中使用了字符串加密，那我们需要找到解密算法，然后把那些加密的字符串解密出来。 解密算法可能是一个简单的Base64解码，也可能是一个复杂的自定义算法。

    如果是Base64解码，我们可以直接使用atob()函数来解密。 如果是自定义算法，那我们需要分析代码，找到算法的实现，然后用JS或者其他语言来实现解密。

  4. 控制流解平坦化

    控制流平坦化是最难反混淆的手段之一。 要想解平坦化，我们需要理解代码的状态机逻辑，然后把代码的执行流程还原出来。

    这个过程非常复杂，需要耐心和技巧。 通常需要借助调试器来一步步跟踪代码的执行，才能搞清楚代码的真实逻辑。

  5. 动态执行
    有些混淆技术依赖于运行时环境来完成特定的操作。在这种情况下，可以尝试使用JavaScript引擎（如Node.js）来动态执行混淆后的代码片段，并观察其行为。通过分析执行过程中的变量和函数调用，可以逐步理解代码的逻辑。
    例如，如果代码使用了eval()函数或Function构造函数来动态生成代码，则可以通过拦截这些函数并记录它们的参数来查看生成的代码。

    // 拦截 eval 函数
const originalEval = eval;
eval = function(code) {
  console.log("Eval called with code:", code);
  return originalEval(code);
};

// 拦截 Function 构造函数
const originalFunction = Function;
Function = function(...args) {
  console.log("Function constructor called with args:", args);
  return new originalFunction(...args);
};

// 执行混淆后的代码
// ...

    通过这种方法，可以捕获动态生成的代码，从而更好地理解混淆后的代码的意图。

  6. Hook技术

Hook技术允许在运行时修改JavaScript代码的行为。通过Hook关键函数（如eval、setTimeout、setInterval等），可以拦截并记录它们的调用，从而揭示混淆代码的真实逻辑。

// Hook setTimeout 函数
const originalSetTimeout = setTimeout;
setTimeout = function(callback, delay) {
  console.log("setTimeout called with delay:", delay);
  return originalSetTimeout(callback, delay);
};

// 执行混淆后的代码
// ...

通过Hook这些函数，可以监控代码的执行流程，从而更好地理解混淆后的代码的结构和行为。

  1. 使用反混淆工具

    现在也有一些专门的反混淆工具，可以自动完成一些反混淆操作。 这些工具通常集成了多种反混淆算法，可以处理各种类型的混淆代码。 比如Deobfuscator.io。

六、混淆与反混淆的博弈

混淆和反混淆是一场永无止境的博弈。 混淆者不断推出新的混淆手段，反混淆者则不断研究新的破解方法。 这就像矛与盾的较量，谁也无法完全战胜对方。

混淆的目的不是让代码完全无法破解，而是增加破解的难度。 只要破解的成本高于收益，就能达到保护代码的目的。

七、混淆的适用场景和注意事项

JS代码混淆并不是万能的，它只是一种辅助性的安全手段。 在使用混淆的时候，需要注意以下几点：

  • 不要过度混淆：过度混淆会导致代码难以维护，甚至会影响代码的性能。
  • 选择合适的混淆工具：不同的混淆工具提供的混淆选项不同，要根据自己的需求选择合适的工具。
  • 定期更新混淆策略：混淆策略需要定期更新，才能防止被别人轻易破解。
  • 不要依赖混淆来保护敏感数据：混淆只能增加破解难度，不能保证绝对安全。 对于敏感数据，应该使用更安全的加密方式。

八、总结

JS代码混淆是一种有效的代码保护手段，可以增加代码的破解难度。 但是，混淆并不是万能的，不能保证绝对安全。 在使用混淆的时候，需要根据自己的需求选择合适的混淆策略和工具。 记住，安全是一个持续的过程，需要不断地学习和改进。

表格总结

混淆手段 优点 缺点
变量名替换 简单易用，效果明显 容易被还原
字符串加密 可以隐藏敏感信息 需要解密算法，增加代码复杂度
控制流平坦化 难以理解代码逻辑 增加代码复杂度，影响性能
死代码注入 可以迷惑攻击者 增加代码体积，可能影响性能
debugger语句 简单粗暴，效果显著 容易被发现和绕过
eval() 动态执行，难以静态分析 可能存在安全风险，影响性能
数组索引替换 隐藏字面量值 代码可读性差
对象属性重命名 使代码结构模糊 代码可读性差
语句拆分和重组 使代码逻辑流程更难跟踪 可能影响代码的可读性和性能
Unicode转义序列 使代码更难阅读 需要转换回原始字符才能理解代码的含义
反混淆手段 优点 缺点
代码美化 提高代码可读性 无法还原代码逻辑
变量名还原 可以还原代码逻辑，提高可读性 需要人工分析，工作量大
字符串解密 可以获取敏感信息 需要找到解密算法
控制流解平坦化 可以还原代码逻辑 非常复杂，需要耐心和技巧
动态执行 揭示运行时行为，理解代码逻辑 需要JavaScript引擎，可能涉及安全问题
Hook技术 拦截关键函数，监控代码执行流程 需要深入理解JavaScript运行时环境，较为复杂

好了，今天的讲座就到这里。 记住，代码安全是一场持久战，需要我们不断学习和进步！ 散会！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注