关于javascript:JavaScript-混淆与反混淆

Obfuscation 混同

JavaScript 混同（Obfuscation）是指通过一系列技术手段，使 JS 代码变得难以了解和剖析，减少代码的复杂性和混同度，妨碍逆向工程和代码盗用。实际上就是一种爱护 JS 代码的伎俩。

那为什么咱们须要爱护 JS 代码呢 🤔️

JS 最早被设计进去就是为了在客户端运行，间接以源码的模式传递给客户端，如果不做解决则齐全公开通明，任何人都能够读、剖析、复制、盗用，甚至篡改源码与数据，这是网站开发者不违心看到的。

起源

晚期的 JS 代码承当性能少，逻辑简略且体积小，不须要爱护。但随着技术的倒退，JS 承当的性能越来越多，文件体积增大。为了优化用户体验，开发者们想了很多方法去减小 JS 文件体积，以放慢 HTTP 传输速度。JS 压缩（Minification）技术应运而生。

常见的 JS 压缩伎俩很多，比方：

• 删除 JS 代码中的空格、换行与正文；
• 替换 JS 代码中的局部变量名；
• 合并 JS 文件；
• ……

压缩工具开发的初衷是减小 JS 文件体积，但 JS 代码通过压缩替换后，其可读性也大大降低，间接起到了爱护代码的作用。然而起初支流浏览器的开发者工具都提供了格式化代码的性能，压缩技术所能提供的平安爱护收效甚微。于是专门爱护 JS 代码的技术：JS 加密和 JS 混同。

本文不会介绍 JS 加密技术，只须要晓得这两种技术相辅相成，不事后进行混同的 JS 加密没有意义。

常见混同伎俩

• 变量名 / 函数名的替换，通过将有意义的变量名和函数名替换为随机生成的名称。

  /*
  function calculateArea(radius) {return Math.PI * radius * radius;}
  console.log(calculateArea(5));
  */
  function _0x2d8f05(_0x4b083b) {return Math.PI * _0x4b083b * _0x4b083b;}
  console.log(_0x2d8f05(5));

• 字符串混同，将代码中的字符串替换为编码或加密的模式，能够避免字符串被轻易读取。

  // console.log("Hello, world!");
  console.log("\x48\x65\x6c\x6c\x6f\x2c\x20\x77\x6f\x72\x6c\x64\x21");

• 控制流混同，扭转代码的执行程序或构造。例如，能够应用条件语句和循环语句来替换简略的赋值操作。

  /*
  let a = 1;
  let b = 2;
  let c = a + b;
  console.log(c);
  */
  let a = 1;
  let b = 2;
  let c;
  if (a === 1) {if (b === 2) {c = a + b;}
  }
  console.log(c);

• 死代码插入，即在源码插入一些不会被执行的代码。

  /*
  let a = 1;
  let b = 2;
  let c = a + b;
  console.log(c);
  */
  let a = 1;
  let b = 2;
  if (false) {console.log(a - b);
  }
  let c = a + b;
  console.log(c);

• 代码转换，将代码转换为等价的，但更难了解的模式。

  /*
  let a = 1;
  let b = 2;
  let c = a + b;
  console.log(c);
  */
  let a = 1;
  let b = 2;
  let c = a - (-b);
  console.log(c);

常见反调试伎俩

实现避免别人调试、动态分析本人的代码，咱们能够事后在代码中做解决，避免用户调试代码。

• 有限 debugger。比方写个定时器死循环禁止调试。

  var c = new RegExp("1");
  c.toString = function () {alert("检测到调试")
      setInterval(function() {debugger}, 1000);
  }
  console.log(c);

• 内存耗尽。更荫蔽的反调试伎俩，代码运行造成的内存占用会越来越大，很快会使浏览器解体。

  var startTime = new Date();
  debugger;
  var endTime = new Date();
  var isDev = endTime - startTime > 100;
  var stack = [];
  
  if (isDev) {while (true) {stack.push(this);
          console.log(stack.length, this);
      }
  }

• 检测函数、对象属性批改。攻击者在调试的时，常常会把防护的函数删除，或者把检测数据对象进行篡改。能够检测函数内容，在原型上设置禁止批改。

  function eval() {[native code]
  }
  
  window.eval = function(str) {console.log("[native code]");
  };
  
  window.eval = function(str) {
  };
  
  window.eval.toString = function() {return `function eval() {[native code]}`
  };
  
  function hijacked(fun) {return "prototype" in fun || fun.toString().replace(/\n|\s/g, "") !="function"+ fun.name +"() {[nativecode]}";
  }

前端开发中的混同

在 Web 前端开发中，开发者会对代码进行压缩和混同，对代码进行优化，并进步安全性。曾经有很多成熟的工具能够应用，比方 UglifyJS 和 JavaScript Obfuscator。

混同通常在我的项目的构建过程中进行。例如，咱们应用 Vite 作为模块打包工具，就能够在 vite 的配置文件中增加 UglifyJS 插件。这样，在每次构建我的项目时，UglifyJS 就会主动对你的代码进行混同。

先装置插件。

npm install vite-plugin-uglify --save-dev

而后在配置文件中增加该插件。

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginUglify from 'vite-plugin-uglify'

export default defineConfig({
  plugins: [vue(),
    VitePluginUglify()]
})

在这个配置文件中，VitePluginUglify被增加到了 plugins 数组中，所以在构建过程中，Vite 会主动应用 vite-plugin-uglify 对代码进行混同。

在线混同工具

有些站点提供了在线混同的性能，比方 Free JavaScript Obfuscator，提供 JS 代码即可失去混同后的后果。这个站点的混同基于下面提到的 JavaScript Obfuscator 实现。

function fibonacci(n) {let fib = [0, 1];
  for (let i = 2; i <= n; i++) {fib[i] = fib[i - 1] + fib[i - 2];
  }
  return fib;
}

// the first 10 numbers in the Fibonacci sequence
console.log(fibonacci(10));

以上代码的作用是计算斐波那契数列的前 10 个值并打印进去，通过混同可得以下内容，可读性肉眼可见的升高：

const _0x323128=_0x5512;(function(_0x589643,_0x5459af){const _0x1b79b8=_0x5512,_0x3e96ed=_0x589643();while(!![]){try{const _0x1fb1b3=-parseInt(_0x1b79b8(0x1f1))/0x1*(-parseInt(_0x1b79b8(0x1ea))/0x2)+-parseInt(_0x1b79b8(0x1ec))/0x3*(parseInt(_0x1b79b8(0x1f3))/0x4)+-parseInt(_0x1b79b8(0x1ed))/0x5*(parseInt(_0x1b79b8(0x1f2))/0x6)+-parseInt(_0x1b79b8(0x1e8))/0x7+parseInt(_0x1b79b8(0x1e9))/0x8*(-parseInt(_0x1b79b8(0x1f4))/0x9)+parseInt(_0x1b79b8(0x1f0))/0xa+-parseInt(_0x1b79b8(0x1ef))/0xb*(-parseInt(_0x1b79b8(0x1ee))/0xc);if(_0x1fb1b3===_0x5459af)break;else _0x3e96ed['push'](_0x3e96ed['shift']());}catch(_0x56184c){_0x3e96ed['push'](_0x3e96ed['shift']());}}}(_0x138e,0xdf35a));function _0x138e(){const _0x3a0863=['354072hRaVAZ','9mNckCh','1622341lDdscp','2787864kenYBK','546362IExhCV','log','3fofuVm','1946005vlrFyq','516IsqKpc','725241tPbpzZ','316200mzqtLe','1mgkmrs','24Zwposp'];_0x138e=function(){return _0x3a0863;};return _0x138e();}function fibonacci(_0x1b3125){let _0x9e88df=[0x0,0x1];for(let _0x406b50=0x2;_0x406b50<=_0x1b3125;_0x406b50++){_0x9e88df[_0x406b50]=_0x9e88df[_0x406b50-0x1]+_0x9e88df[_0x406b50-0x2];}return _0x9e88df;}function _0x5512(_0x2d5465,_0x1d0a2f){const _0x138ec4=_0x138e();return _0x5512=function(_0x5512ef,_0x5e1f2e){_0x5512ef=_0x5512ef-0x1e8;let _0x4be64a=_0x138ec4[_0x5512ef];return _0x4be64a;},_0x5512(_0x2d5465,_0x1d0a2f);}console[_0x323128(0x1eb)](fibonacci(0xa));

Deobfuscator 反混同

JS 反混同（Deobfuscator）是指对通过混同解决的代码进行还原和解析，以复原其可读性。Deobfuscator 能够通过对代码进行动态剖析和动态分析等形式来实现。须要留神的是，Obfuscation 只能升高可读性，不能完全避免逆向攻打，而 Deobfuscator 也并不能齐全还原混同过的代码。

只有急躁剖析，少数混同过的 JS 未然能还原进去。

在线反混同工具

反混同要有些趁手的工具。最罕用的是浏览器自带的开发者工具，其次是一些转换混同过的代码的工具。以下网站提供在线反混同 JS 代码的性能：

• javascript-deobfuscator
• Raz1ner JavaScript Deobfuscator
• synchrony deobuscator
• js-beauty

以咱们通过混同的代码为例，丢进上述第一个网站，能够失去以下反混同过的代码：

function fibonacci(jayandre) {let ramonita = [0, 1];
  for (let ancel = 2; ancel <= jayandre; ancel++) {ramonita[ancel] = ramonita[ancel - 1] + ramonita[ancel - 2];
  }
  return ramonita;
}
console.log(fibonacci(10));

本来的逻辑曾经较为清晰的展示了。当然也有一些库能用来反混同本地 JS 文件，这里不多做介绍，感觉在线工具就够用了。

开发者工具

下面的反混同站点只是辅助，真反混同还得靠浏览器自带的开发者工具。接下来以 chrome 浏览器为例讲讲怎么用。

在反混同过程中，咱们次要应用源代码（Source）和网络（Network）这两个模块。Network 用于查找咱们进行用户操作时调用了哪些 API，在调用 API 前后运行了哪些 JS 文件；Source 提供了网站整体的 JS 代码及动态资源，咱们的反混同剖析工作次要就在这里进行。

在 Source 模块中，默认 ctrl+shift+p 能够开启开发者工具的命令行，咱们能够找到两个“搜寻”工具，别离对应“全局搜寻”和“在以后文件中搜寻”，很适宜查找指定字段。

开发者工具提供了替换（Override）性能，开启本地替换选项，上传本人的目录，而后选中浏览器中指定 JS 文件，做出批改后 ctrl+s 保留，即可将源文件保留到咱们本人的目录中，之后对文件做出的批改能够间接替换对应的原文件，这样就能不便的批改浏览器端 JS 文件。

剩下的就是动调了，前面会举例子解释。

静 / 动静调试

先做个辨别，逆网页的 JS 代码更多得是在开发者工具中做动调的。

• 动态调试：动态调试是通过剖析代码的构造和逻辑来了解其性能。这种办法不须要运行代码，只须要对代码进行剖析和了解。例如，能够通过反汇编工具将二进制的可执行文件翻译成汇编代码，通过对代码的剖析来破解软件。
• 动静调试：动静调试则是在代码运行时进行的。通过设置断点，单步执行，察看变量的值变动等形式，来了解代码的运行过程和逻辑。动静调试能够有效应对少数混同措施，从中还原出运行逻辑，是逆向剖析的要害伎俩。后面说的反调试便是拦截动静调试。

实战

百度翻译接口

未登录状态下翻译字符串，察看 Network 能够找到 /v2transapi POST 申请报文，其 payload 中表单的 query 字段即为咱们输出待翻译的字符串。

刷新页面屡次翻译，发现只有 sign 字段的值在随 query 始终变动，transtype的值会依据触发翻译的形式在 realtime 和enter之间切换，其它字段值放弃不变。咱们接下来的工作就是剖析 sign 字段的值是怎么来的。

为了搞清楚 sign 是如何生成的，咱们须要在 Sources 模块中全局搜寻 sign 字段。但因为 sign 自身是一个常见的字段，咱们很容易定位到其余与表单无关的中央。这里有一个小技巧，为了取得参数相干代码，咱们能够搜寻 sign: 或者sign=，以尽量避免定位到无关代码。

在 Sources 模块中全局搜寻 sign:，定位到很多文件，依据文件名和文件内容，能够判断最有可能在 index.36217dc5.js 文件中，而该文件中呈现了 6 处sign: 相干代码，顺次打断点并执行翻译操作，发现只会在 25800 行处的 sign: b(e); 处停下：

单步步进，能够发现参数 t 值即为传入的字符串：

把这段函数抽离进去，写到一个 main.js 文件中，调用该函数并运行：

b = function(t) {var o, i = t.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g);
  if (null === i) {
    var a = t.length;
    a > 30 && (t = "".concat(t.substr(0, 10)).concat(t.substr(Math.floor(a / 2) - 5, 10)).concat(t.substr(-10, 10)))
  } else {for (var s = t.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/), c = 0, u = s.length, l = []; c < u; c++)
      "" !== s && l.push.apply(l, function(t) {if (Array.isArray(t))
          return e(t)
      }(o = s.split("")) || function(t) {if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"])
          return Array.from(t)
      }(o) || function(t, n) {if (t) {if ("string" == typeof t)
            return e(t, n);
          var r = Object.prototype.toString.call(t).slice(8, -1);
          return "Object" === r && t.constructor && (r = t.constructor.name),
          "Map" === r || "Set" === r ? Array.from(t) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? e(t, n) : void 0
        }
      }(o) || function() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
      }()),
      c !== u - 1 && l.push(i);
    var p = l.length;
    p > 30 && (t = l.slice(0, 10).join("") + l.slice(Math.floor(p / 2) - 5, Math.floor(p / 2) + 5).join("") + l.slice(-10).join(""))
  }
  for (var d = "".concat(String.fromCharCode(103)).concat(String.fromCharCode(116)).concat(String.fromCharCode(107)), h = (null !== r ? r : (r = window[d] ||"") || "").split("."), f = Number(h[0]) || 0, m = Number(h[1]) || 0, g = [], y = 0, v = 0; v < t.length; v++) {var _ = t.charCodeAt(v);
    _ < 128 ? g[y++] = _ : (_ < 2048 ? g[y++] = _ >> 6 | 192 : (55296 == (64512 & _) && v + 1 < t.length && 56320 == (64512 & t.charCodeAt(v + 1)) ? (_ = 65536 + ((1023 & _) << 10) + (1023 & t.charCodeAt(++v)),
    g[y++] = _ >> 18 | 240,
    g[y++] = _ >> 12 & 63 | 128) : g[y++] = _ >> 12 | 224,
    g[y++] = _ >> 6 & 63 | 128),
    g[y++] = 63 & _ | 128)
  }
  for (var b = f, w = "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(97)) +"".concat(String.fromCharCode(94)).concat(String.fromCharCode(43)).concat(String.fromCharCode(54)), k = "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(51)) +"".concat(String.fromCharCode(94)).concat(String.fromCharCode(43)).concat(String.fromCharCode(98)) + "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(102)), x = 0; x < g.length; x++)
    b = n(b += g[x], w);
  return b = n(b, k),
  (b ^= m) < 0 && (b = 2147483648 + (2147483647 & b)),
  "".concat((b %= 1e6).toString(),".").concat(b ^ f)
}

const query = "abandon";
console.log(b(query))

运行时报错，提醒 r 未定义。在持续动调去找 r 是什么。步进调试到这一步时，发现 r 被赋值为window[d]，即 “320305.131321201”，在此之前其值始终为 null。

咱们能够发现 d 的值为 gtk。咱们本地是通过 Node.js 运行 JS 脚本，没有window[] 这种 Web API，所以间接将 320305.131321201 硬编码进去。在此运行脚本，又会提醒短少 n 函数：

咱们在面板中找到 n 函数，光标悬浮于上方可间接跳转到函数申明的中央：

找到 n 函数后将其增加到 JS 脚本中，再次运行，即可失去后果 103339.356506，这与咱们在 Network 模块中查看到的sign 值雷同。

最终脚本如下，输出 query 的值即可失去申请 /v2transapi 所需的 payload：

/**
 * function to generate sign
 */
n = function (t, e) {for (var n = 0; n < e.length - 2; n += 3) {var r = e.charAt(n + 2);
      r = "a" <= r ? r.charCodeAt(0) - 87 : Number(r),
      r = "+" === e.charAt(n + 1) ? t >>> r : t << r,
      t = "+" === e.charAt(n) ? t + r & 4294967295 : t ^ r
  }
  return t
}

b = function(t) {var o, i = t.match(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g);
  if (null === i) {
    var a = t.length;
    a > 30 && (t = "".concat(t.substr(0, 10)).concat(t.substr(Math.floor(a / 2) - 5, 10)).concat(t.substr(-10, 10)))
  } else {for (var s = t.split(/[\uD800-\uDBFF][\uDC00-\uDFFF]/), c = 0, u = s.length, l = []; c < u; c++)
      "" !== s && l.push.apply(l, function(t) {if (Array.isArray(t))
          return e(t)
      }(o = s.split("")) || function(t) {if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"])
          return Array.from(t)
      }(o) || function(t, n) {if (t) {if ("string" == typeof t)
            return e(t, n);
          var r = Object.prototype.toString.call(t).slice(8, -1);
          return "Object" === r && t.constructor && (r = t.constructor.name),
          "Map" === r || "Set" === r ? Array.from(t) : "Arguments" === r || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r) ? e(t, n) : void 0
        }
      }(o) || function() {throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")
      }()),
      c !== u - 1 && l.push(i);
    var p = l.length;
    p > 30 && (t = l.slice(0, 10).join("") + l.slice(Math.floor(p / 2) - 5, Math.floor(p / 2) + 5).join("") + l.slice(-10).join(""))
  }
  for (var d = "".concat(String.fromCharCode(103)).concat(String.fromCharCode(116)).concat(String.fromCharCode(107)), h = (r ="320305.131321201").split("."), f = Number(h[0]) || 0, m = Number(h[1]) || 0, g = [], y = 0, v = 0; v < t.length; v++) {var _ = t.charCodeAt(v);
    _ < 128 ? g[y++] = _ : (_ < 2048 ? g[y++] = _ >> 6 | 192 : (55296 == (64512 & _) && v + 1 < t.length && 56320 == (64512 & t.charCodeAt(v + 1)) ? (_ = 65536 + ((1023 & _) << 10) + (1023 & t.charCodeAt(++v)),
    g[y++] = _ >> 18 | 240,
    g[y++] = _ >> 12 & 63 | 128) : g[y++] = _ >> 12 | 224,
    g[y++] = _ >> 6 & 63 | 128),
    g[y++] = 63 & _ | 128)
  }
  for (var b = f, w = "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(97)) +"".concat(String.fromCharCode(94)).concat(String.fromCharCode(43)).concat(String.fromCharCode(54)), k = "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(51)) +"".concat(String.fromCharCode(94)).concat(String.fromCharCode(43)).concat(String.fromCharCode(98)) + "".concat(String.fromCharCode(43)).concat(String.fromCharCode(45)).concat(String.fromCharCode(102)), x = 0; x < g.length; x++)
    b = n(b += g[x], w);
  return b = n(b, k),
  (b ^= m) < 0 && (b = 2147483648 + (2147483647 & b)),
  "".concat((b %= 1e6).toString(),".").concat(b ^ f)
}

/**
 * test
 */
const query = "abandon";
console.log(`from=en&to=zh&query=${query}&simple_means_flag=3&sign=${b(query)}&token=14025658070b41f40739347cef0ec62a&domain=common&ts=1708512893507`)

掘金登录接口

登录时抓包，能够失去对 /passport/web/user/login 接口的申请报文：

# GET 查问字符串参数
aid: 2608
account_sdk_source: web
sdk_version: 2.2.6
verifyFp: verify_lsom0d3u_s6mZvQBP_pamX_41TO_81V1_VRng2UjxFI79
fp: verify_lsom0d3u_s6mZvQBP_pamX_41TO_81V1_VRng2UjxFI79
sign: d9116c9cae3fcdf848f1288e1850eb2a489a4e23ece930692912a8bc155d89ec
qs: 6466666a706b715a76616e5a766a7077666029646c612963752976616e5a736077766c6a6b297360776c637c4375

# POST 表单参数
mix_mode: 1
account: 34363d3336373d3d343c3c
password: 343736343736343736
fixed_mix_mode: 1

流程其实大差不差，就是搜参数、打断点、缓缓动调，根本都能找进去。掘金登录只须要 POST 表单参数正确即可，GET 参数不对也能过。以上参数中，会动态变化的只有 sign、account 和password，其中 GET 参数 sign 即便删掉也能过登录验证。

具体过程不再贴图展现，这里间接提供获取 POST 表单参数的脚本，感兴趣的能够尝试去逆一下 sign 是如何生成的，难度比逆 account 和password要高一些：

/**
 * raw data
 */
const account = '00000000000'
const password = '1q2w3e'

/**
 * handle account and password
 */
var T = function(e) {var t, n = [];
  if (void 0 === e)
    return "";
  t = function(e) {for (var t, n = e.toString(), r = [], a = 0; a < n.length; a++)
      0 <= (t = n.charCodeAt(a)) && t <= 127 ? r.push(t) : 128 <= t && t <= 2047 ? (r.push(192 | 31 & t >> 6),
      r.push(128 | 63 & t)) : (2048 <= t && t <= 55295 || 57344 <= t && t <= 65535) && (r.push(224 | 15 & t >> 12),
      r.push(128 | 63 & t >> 6),
      r.push(128 | 63 & t));
    for (var i = 0; i < r.length; i++)
      r[i] &= 255;
    return r
  }(e);
  for (var r = 0, a = t.length; r < a; ++r)
    n.push((5 ^ t[r]).toString(16));
  return n.join("")
}

/**
 * obtain the post form
 */
const postForm = `mix_mode=1&account=${T(account)}&password=${T(password)}&fixed_mix_mode=1`
console.log(postForm)

HGAME2024 2048*16

BaiMeow 徒弟的题，HGAME2024 Week1 完结后不不便提供复现环境。题目考查了禁用 F12、反调试、JS 反混同，比拟全面。这里提一嘴。

参阅文章

• Javascript 加密混同，by 前端知识库
• js 混同与反混同，by ek1ng