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

本文链接：https://blog.csdn.net/weixin_41455464/article/details/149404804

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

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

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

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

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

二、常见的JS混淆手段

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

变量名和函数名替换

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

举个例子：
```
// 混淆前
function calculateSum(num1, num2) {
  return num1 + num2;
}

// 混淆后
function a(b, c) {
  return b + c;
}
```
是不是瞬间感觉智商受到了侮辱？

字符串加密

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

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

控制流平坦化

这种混淆手段比较高级，它会把代码的执行流程打乱，让代码变得难以阅读和理解。简单来说，就是把代码分成很多个小块，然后用一个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 {