逆向进阶，利用 AST 技术还原 JavaScript 混淆代码
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101257495-776120536.png" alt="" loading="lazy"></p><h2 id="什么是-ast">什么是 AST</h2>
<p>AST（Abstract Syntax Tree），中文抽象语法树，简称语法树（Syntax Tree），是源代码的抽象语法结构的树状表现形式，树上的每个节点都表示源代码中的一种结构。语法树不是某一种编程语言独有的，JavaScript、Python、Java、Golang 等几乎所有编程语言都有语法树。</p>
<p>小时候我们得到一个玩具，总喜欢把玩具拆解成一个一个小零件，然后按照我们自己的想法，把零件重新组装起来，一个新玩具就诞生了。而 JavaScript 就像一台精妙运作的机器，通过 AST 解析，我们也可以像童年时拆解玩具一样，深入了解 JavaScript 这台机器的各个零部件，然后重新按照我们自己的意愿来组装。</p>
<p>AST 的用途很广，IDE 的语法高亮、代码检查、格式化、压缩、转译等，都需要先将代码转化成 AST 再进行后续的操作，ES5 和 ES6 语法差异，为了向后兼容，在实际应用中需要进行语法的转换，也会用到 AST。AST 并不是为了逆向而生，但做逆向学会了 AST，在解混淆时可以如鱼得水。</p>
<p>AST 有一个在线解析网站：https://astexplorer.net/ ，顶部可以选择语言、编译器、是否开启转化等，如下图所示，区域①是源代码，区域②是对应的 AST 语法树，区域③是转换代码，可以对语法树进行各种操作，区域④是转换后生成的新代码。图中原来的 Unicode 字符经过操作之后就变成了正常字符。</p>
<p>语法树没有单一的格式，选择不同的语言、不同的编译器，得到的结果也是不一样的，在 JavaScript 中，编译器有 Acorn、Espree、Esprima、Recast、Uglify-JS 等，使用最多的是 Babel，后续的学习也是以 Babel 为例。</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101316575-1808878179.png" alt="01" loading="lazy"></p>
<h2 id="ast-在编译中的位置">AST 在编译中的位置</h2>
<p>在编译原理中，编译器转换代码通常要经过三个步骤：词法分析（Lexical Analysis）、语法分析（Syntax Analysis）、代码生成（Code Generation），下图生动展示了这一过程：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101336638-888901863.png" alt="02" loading="lazy"></p>
<h3 id="词法分析">词法分析</h3>
<p>词法分析阶段是编译过程的第一个阶段，这个阶段的任务是从左到右一个字符一个字符地读入源程序，然后根据构词规则识别单词，生成 token 符号流，比如 <code>isPanda('🐼')</code>，会被拆分成 <code>isPanda</code>，<code>(</code>，<code>'🐼'</code>，<code>)</code> 四部分，每部分都有不同的含义，可以将词法分析过程想象为不同类型标记的列表或数组。</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101354716-611471191.gif" alt="03" loading="lazy"></p>
<h3 id="语法分析">语法分析</h3>
<p>语法分析是编译过程的一个逻辑阶段，语法分析的任务是在词法分析的基础上将单词序列组合成各类语法短语，比如“程序”，“语句”，“表达式”等，前面的例子中，<code>isPanda('🐼')</code> 就会被分析为一条表达语句 <code>ExpressionStatement</code>，<code>isPanda()</code> 就会被分析成一个函数表达式 <code>CallExpression</code>，<code>🐼</code> 就会被分析成一个变量 <code>Literal</code> 等，众多语法之间的依赖、嵌套关系，就构成了一个树状结构，即 AST 语法树。</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101415313-1435211089.gif" alt="04" loading="lazy"></p>
<h3 id="代码生成">代码生成</h3>
<p>代码生成是最后一步，将 AST 语法树转换成可执行代码即可，在转换之前，我们可以直接操作语法树，进行增删改查等操作，例如，我们可以确定变量的声明位置、更改变量的值、删除某些节点等，我们将语句 <code>isPanda('🐼')</code> 修改为一个布尔类型的 <code>Literal</code>：<code>true</code>，语法树就有如下变化：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101416281-1772382765.gif" alt="05" loading="lazy"></p>
<h2 id="babel-简介">Babel 简介</h2>
<p>Babel 是一个 JavaScript 编译器，也可以说是一个解析库，Babel 中文网：https://www.babeljs.cn/ ，Babel 英文官网：https://babeljs.io/ ，Babel 内置了很多分析 JavaScript 代码的方法，我们可以利用 Babel 将 JavaScript 代码转换成 AST 语法树，然后增删改查等操作之后，再转换成 JavaScript 代码。</p>
<p>Babel 包含的各种功能包、API、各方法可选参数等，都非常多，本文不一一列举，在实际使用过程中，应当多查询官方文档，或者参考文末给出的一些学习资料。Babel 的安装和其他 Node 包一样，需要哪个安装哪个即可，比如 <code>npm install @babel/core @babel/parser @babel/traverse @babel/generator</code></p>
<p>在做逆向解混淆中，主要用到了 Babel 的以下几个功能包，本文也仅介绍以下几个功能包：</p>
<ol>
<li><code>@babel/core</code>：Babel 编译器本身，提供了 babel 的编译 API；</li>
<li><code>@babel/parser</code>：将 JavaScript 代码解析成 AST 语法树；</li>
<li><code>@babel/traverse</code>：遍历、修改 AST 语法树的各个节点；</li>
<li><code>@babel/generator</code>：将 AST 还原成 JavaScript 代码；</li>
<li><code>@babel/types</code>：判断、验证节点的类型、构建新 AST 节点等。</li>
</ol>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101417081-710154171.png" alt="06" loading="lazy"></p>
<h3 id="babelcore">@babel/core</h3>
<p>Babel 编译器本身，被拆分成了三个模块：<code>@babel/parser</code>、<code>@babel/traverse</code>、<code>@babel/generator</code>，比如以下方法的导入效果都是一样的：</p>
<pre><code class="language-javascript">const parse = require("@babel/parser").parse;
const parse = require("@babel/core").parse;
const traverse = require("@babel/traverse").default
const traverse = require("@babel/core").traverse
</code></pre>
<h3 id="babelparser">@babel/parser</h3>
<p><code>@babel/parser</code> 可以将 JavaScript 代码解析成 AST 语法树，其中主要提供了两个方法：</p>
<ul>
<li><code>parser.parse(code, [{options}])</code>：解析一段 JavaScript 代码；</li>
<li><code>parser.parseExpression(code, [{options}])</code>：考虑到了性能问题，解析单个 JavaScript 表达式。</li>
</ul>
<p>部分可选参数 <code>options</code>：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>allowImportExportEverywhere</code></td>
<td>默认 <code>import</code> 和 <code>export</code> 声明语句只能出现在程序的最顶层，设置为 <code>true</code> 则在任何地方都可以声明</td>
</tr>
<tr>
<td><code>allowReturnOutsideFunction</code></td>
<td>默认如果在顶层中使用 <code>return</code> 语句会引起错误，设置为 <code>true</code> 就不会报错</td>
</tr>
<tr>
<td><code>sourceType</code></td>
<td>默认为 <code>script</code>，当代码中含有 <code>import</code> 、<code>export</code> 等关键字时会报错，需要指定为 <code>module</code></td>
</tr>
<tr>
<td><code>errorRecovery</code></td>
<td>默认如果 babel 发现一些不正常的代码就会抛出错误，设置为 <code>true</code> 则会在保存解析错误的同时继续解析代码，错误的记录将被保存在最终生成的 AST 的 errors 属性中，当然如果遇到严重的错误，依然会终止解析</td>
</tr>
</tbody>
</table>
<p>举个例子看得比较清楚：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const code = "const a = 1;";
const ast = parser.parse(code, {sourceType: "module"})
console.log(ast)
</code></pre>
<p><code>{sourceType: "module"}</code> 演示了如何添加可选参数，输出的就是 AST 语法树，这和在线网站 https://astexplorer.net/ 解析出来的语法树是一样的：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101419424-269858745.png" alt="07" loading="lazy"></p>
<h3 id="babelgenerator">@babel/generator</h3>
<p><code>@babel/generator</code> 可以将 AST 还原成 JavaScript 代码，提供了一个 <code>generate</code> 方法：<code>generate(ast, [{options}], code)</code>。</p>
<p>部分可选参数 <code>options</code>：</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auxiliaryCommentBefore</code></td>
<td>在输出文件内容的头部添加注释块文字</td>
</tr>
<tr>
<td><code>auxiliaryCommentAfter</code></td>
<td>在输出文件内容的末尾添加注释块文字</td>
</tr>
<tr>
<td><code>comments</code></td>
<td>输出内容是否包含注释</td>
</tr>
<tr>
<td><code>compact</code></td>
<td>输出内容是否不添加空格，避免格式化</td>
</tr>
<tr>
<td><code>concise</code></td>
<td>输出内容是否减少空格使其更紧凑一些</td>
</tr>
<tr>
<td><code>minified</code></td>
<td>是否压缩输出代码</td>
</tr>
<tr>
<td><code>retainLines</code></td>
<td>尝试在输出代码中使用与源代码中相同的行号</td>
</tr>
</tbody>
</table>
<p>接着前面的例子，原代码是 <code>const a = 1;</code>，现在我们把 <code>a</code> 变量修改为 <code>b</code>，值 <code>1</code> 修改为 <code>2</code>，然后将 AST 还原生成新的 JS 代码：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const code = "const a = 1;";
const ast = parser.parse(code, {sourceType: "module"})
ast.program.body.declarations.id.name = "b"
ast.program.body.declarations.init.value = 2
const result = generate(ast, {minified: true})
console.log(result.code)
</code></pre>
<p>最终输出的是 <code>const b=2;</code>，变量名和值都成功更改了，由于加了压缩处理，等号左右两边的空格也没了。</p>
<p>代码里 <code>{minified: true}</code> 演示了如何添加可选参数，这里表示压缩输出代码，<code>generate</code> 得到的 <code>result</code> 得到的是一个对象，其中的 <code>code</code> 属性才是最终的 JS 代码。</p>
<p>代码里 <code>ast.program.body.declarations.id.name</code> 是 a 在 AST 中的位置，<code>ast.program.body.declarations.init.value</code> 是 1 在 AST 中的位置，如下图所示：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101420386-1098396170.png" alt="08" loading="lazy"></p>
<h3 id="babeltraverse">@babel/traverse</h3>
<p>当代码多了，我们不可能像前面那样挨个定位并修改，对于相同类型的节点，我们可以直接遍历所有节点来进行修改，这里就用到了 <code>@babel/traverse</code>，它通常和 <code>visitor</code> 一起使用，<code>visitor</code> 是一个对象，这个名字是可以随意取的，<code>visitor</code> 里可以定义一些方法来过滤节点，这里还是用一个例子来演示：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const code = `
const a = 1500;
const b = 60;
const c = "hi";
const d = 787;
const e = "1244";
`
const ast = parser.parse(code)
const visitor = {
NumericLiteral(path){
path.node.value = (path.node.value + 100) * 2
},
StringLiteral(path){
path.node.value = "I Love JavaScript!"
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>这里的原始代码定义了 abcde 五个变量，其值有数字也有字符串，我们在 AST 中可以看到对应的类型为 <code>NumericLiteral</code> 和 <code>StringLiteral</code>：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101420590-466240592.png" alt="09" loading="lazy"></p>
<p>然后我们声明了一个 <code>visitor</code> 对象，然后定义对应类型的处理方法，<code>traverse</code> 接收两个参数，第一个是 AST 对象，第二个是 <code>visitor</code>，当 <code>traverse</code> 遍历所有节点，遇到节点类型为 <code>NumericLiteral</code> 和 <code>StringLiteral</code> 时，就会调用 <code>visitor</code> 中对应的处理方法，<code>visitor</code> 中的方法会接收一个当前节点的 <code>path</code> 对象，该对象的类型是 <code>NodePath</code>，该对象有非常多的属性，以下介绍几种最常用的：</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>toString()</code></td>
<td>当前路径的源码</td>
</tr>
<tr>
<td><code>node</code></td>
<td>当前路径的节点</td>
</tr>
<tr>
<td><code>parent</code></td>
<td>当前路径的父级节点</td>
</tr>
<tr>
<td><code>parentPath</code></td>
<td>当前路径的父级路径</td>
</tr>
<tr>
<td><code>type</code></td>
<td>当前路径的类型</td>
</tr>
</tbody>
</table>
<p>PS：<code>path</code> 对象除了有很多属性以外，还有很多方法，比如替换节点、删除节点、插入节点、寻找父级节点、获取同级节点、添加注释、判断节点类型等，可在需要时查询相关文档或查看源码，后续介绍 <code>@babel/types</code> 部分将会举部分例子来演示，以后的实战文章中也会有相关实例，篇幅有限本文不再细说。</p>
<p>因此在上面的代码中，<code>path.node.value</code> 就拿到了变量的值，然后我们就可以进一步对其进行修改了。以上代码运行后，所有数字都会加上100后再乘以2，所有字符串都会被替换成 <code>I Love JavaScript!</code>，结果如下：</p>
<pre><code class="language-javascript">const a = 3200;
const b = 320;
const c = "I Love JavaScript!";
const d = 1774;
const e = "I Love JavaScript!";
</code></pre>
<p>如果多个类型的节点，处理的方式都一样，那么还可以使用 <code>|</code> 将所有节点连接成字符串，将同一个方法应用到所有节点：</p>
<pre><code class="language-javascript">const visitor = {
"NumericLiteral|StringLiteral"(path) {
path.node.value = "I Love JavaScript!"
}
}
</code></pre>
<p><code>visitor</code> 对象有多种写法，以下几种写法的效果都是一样的：</p>
<pre><code class="language-javascript">const visitor = {
NumericLiteral(path){
path.node.value = (path.node.value + 100) * 2
},
StringLiteral(path){
path.node.value = "I Love JavaScript!"
}
}
</code></pre>
<pre><code class="language-javascript">const visitor = {
NumericLiteral: function (path){
path.node.value = (path.node.value + 100) * 2
},
StringLiteral: function (path){
path.node.value = "I Love JavaScript!"
}
}
</code></pre>
<pre><code class="language-javascript">const visitor = {
NumericLiteral: {
enter(path) {
path.node.value = (path.node.value + 100) * 2
}
},
StringLiteral: {
enter(path) {
path.node.value = "I Love JavaScript!"
}
}
}
</code></pre>
<pre><code class="language-javascript">const visitor = {
enter(path) {
if (path.node.type === "NumericLiteral") {
path.node.value = (path.node.value + 100) * 2
}
if (path.node.type === "StringLiteral") {
path.node.value = "I Love JavaScript!"
}
}
}
</code></pre>
<p>以上几种写法中有用到了 <code>enter</code> 方法，在节点的遍历过程中，进入节点（enter）与退出（exit）节点都会访问一次节点，<code>traverse</code> 默认在进入节点时进行节点的处理，如果要在退出节点时处理，那么在 <code>visitor</code> 中就必须声明 <code>exit</code> 方法。</p>
<h3 id="babeltypes">@babel/types</h3>
<p><code>@babel/types</code> 主要用于构建新的 AST 节点，前面的示例代码为 <code>const a = 1;</code>，如果想要增加内容，比如变成 <code>const a = 1; const b = a * 5 + 1;</code>，就可以通过 <code>@babel/types</code> 来实现。</p>
<p>首先观察一下 AST 语法树，原语句只有一个 <code>VariableDeclaration</code> 节点，现在增加了一个：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101420807-432415896.png" alt="10" loading="lazy"></p>
<p>那么我们的思路就是在遍历节点时，遍历到 <code>VariableDeclaration</code> 节点，就在其后面增加一个 <code>VariableDeclaration</code> 节点，生成<code>VariableDeclaration</code> 节点，可以使用 <code>types.variableDeclaration()</code> 方法，在 types 中各种方法名称和我们在 AST 中看到的是一样的，只不过首字母是小写的，所以我们不需要知道所有方法的情况下，也能大致推断其方法名，只知道这个方法还不行，还得知道传入的参数是什么，可以查文档，不过K哥这里推荐直接看源码，非常清晰明了，以 Pycharm 为例，按住 Ctrl 键，再点击方法名，就进到源码里了：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101421832-1311123747.png" alt="11" loading="lazy"></p>
<pre><code class="language-javascript">function variableDeclaration(kind: "var" | "let" | "const", declarations: Array<BabelNodeVariableDeclarator>)
</code></pre>
<p>可以看到需要 <code>kind</code> 和 <code>declarations</code> 两个参数，其中 <code>declarations</code> 是 <code>VariableDeclarator</code> 类型的节点组成的列表，所以我们可以先写出以下 <code>visitor</code> 部分的代码，其中 <code>path.insertAfter()</code> 是在该节点之后插入新节点的意思：</p>
<pre><code class="language-javascript">const visitor = {
VariableDeclaration(path) {
let declaration = types.variableDeclaration("const", )
path.insertAfter(declaration)
}
}
</code></pre>
<p>接下来我们还需要进一步定义 <code>declarator</code>，也就是 <code>VariableDeclarator</code> 类型的节点，查询其源码如下：</p>
<pre><code class="language-javascript">function variableDeclarator(id: BabelNodeLVal, init?: BabelNodeExpression)
</code></pre>
<p>观察 AST，id 为 <code>Identifier</code> 对象，init 为 <code>BinaryExpression</code> 对象，如下图所示：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101422299-1490782652.png" alt="12" loading="lazy"></p>
<p>先来处理 id，可以使用 <code>types.identifier()</code> 方法来生成，其源码为 <code>function identifier(name: string)</code>，name 在这里就是 b 了，此时 <code>visitor</code> 代码就可以这么写：</p>
<pre><code class="language-javascript">const visitor = {
VariableDeclaration(path) {
let declarator = types.variableDeclarator(types.identifier("b"), init)
let declaration = types.variableDeclaration("const", )
path.insertAfter(declaration)
}
}
</code></pre>
<p>然后再来看 init 该如何定义，首先仍然是看 AST 结构：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101423687-1031514148.png" alt="13" loading="lazy"></p>
<p>init 为 <code>BinaryExpression</code> 对象，left 左边是 <code>BinaryExpression</code>，right 右边是 <code>NumericLiteral</code>，可以用 <code>types.binaryExpression()</code> 方法来生成 init，其源码如下：</p>
<pre><code class="language-javascript">function binaryExpression(
operator: "+" | "-" | "/" | "%" | "*" | "**" | "&" | "|" | ">>" | ">>>" | "<<" | "^" | "==" | "===" | "!=" | "!==" | "in" | "instanceof" | ">" | "<" | ">=" | "<=",
left: BabelNodeExpression | BabelNodePrivateName,
right: BabelNodeExpression
)
</code></pre>
<p>此时 <code>visitor</code> 代码就可以这么写：</p>
<pre><code class="language-javascript">const visitor = {
VariableDeclaration(path) {
let init = types.binaryExpression("+", left, right)
let declarator = types.variableDeclarator(types.identifier("b"), init)
let declaration = types.variableDeclaration("const", )
path.insertAfter(declaration)
}
}
</code></pre>
<p>然后继续构造 left 和 right，和前面的方法一样，观察 AST 语法树，查询对应方法应该传入的参数，层层嵌套，直到把所有的节点都构造完毕，最终的 <code>visitor</code> 代码应该是这样的：</p>
<pre><code class="language-javascript">const visitor = {
VariableDeclaration(path) {
let left = types.binaryExpression("*", types.identifier("a"), types.numericLiteral(5))
let right = types.numericLiteral(1)
let init = types.binaryExpression("+", left, right)
let declarator = types.variableDeclarator(types.identifier("b"), init)
let declaration = types.variableDeclaration("const", )
path.insertAfter(declaration)
path.stop()
}
}
</code></pre>
<p>注意：<code>path.insertAfter()</code> 插入节点语句后面加了一句 <code>path.stop()</code>，表示插入完成后立即停止遍历当前节点和后续的子节点，添加的新节点也是 <code>VariableDeclaration</code>，如果不加停止语句的话，就会无限循环插入下去。</p>
<p>插入新节点后，再转换成 JavaScript 代码，就可以看到多了一行新代码，如下图所示：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101426333-165530584.png" alt="14" loading="lazy"></p>
<h2 id="常见混淆还原">常见混淆还原</h2>
<p>了解了 AST 和 babel 后，就可以对 JavaScript 混淆代码进行还原了，以下是部分样例，带你进一步熟悉 babel 的各种操作。</p>
<h3 id="字符串还原">字符串还原</h3>
<p>文章开头的图中举了个例子，正常字符被换成了 Unicode 编码：</p>
<pre><code class="language-javascript">console['\u006c\u006f\u0067']('\u0048\u0065\u006c\u006c\u006f\u0020\u0077\u006f\u0072\u006c\u0064\u0021')
</code></pre>
<p>观察 AST 结构：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101426636-489998048.png" alt="15" loading="lazy"></p>
<p>我们发现 Unicode 编码对应的是 <code>raw</code>，而 <code>rawValue</code> 和 <code>value</code> 都是正常的，所以我们可以将 <code>raw</code> 替换成 <code>rawValue</code> 或 <code>value</code> 即可，需要注意的是引号的问题，本来是 <code>console["log"]</code>，你还原后变成了 <code>console</code>，自然会报错的，除了替换值以外，这里直接删除 extra 节点，或者删除 raw 值也是可以的，所以以下几种写法都可以还原代码：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const code = `console['\u006c\u006f\u0067']('\u0048\u0065\u006c\u006c\u006f\u0020\u0077\u006f\u0072\u006c\u0064\u0021')`
const ast = parser.parse(code)
const visitor = {
StringLiteral(path) {
// 以下方法均可
// path.node.extra.raw = path.node.rawValue
// path.node.extra.raw = '"' + path.node.value + '"'
// delete path.node.extra
delete path.node.extra.raw
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>还原结果：</p>
<pre><code class="language-javascript">console["log"]("Hello world!");
</code></pre>
<h3 id="表达式还原">表达式还原</h3>
<p>之前K哥写过 JSFuck 混淆的还原，其中有介绍 <code>![]</code> 可表示 false，<code>!![]</code> 或者 <code>!+[]</code> 可表示 true，在一些混淆代码中，经常有这些操作，把简单的表达式复杂化，往往需要执行一下语句，才能得到真正的结果，示例代码如下：</p>
<pre><code class="language-javascript">const a = !![]+!![]+!![];
const b = Math.floor(12.34 * 2.12)
const c = 10 >> 3 << 1
const d = String(21.3 + 14 * 1.32)
const e = parseInt("1.893" + "45.9088")
const f = parseFloat("23.2334" + "21.89112")
const g = 20 < 18 ? '未成年' : '成年'
</code></pre>
<p>想要执行语句，我们需要了解 <code>path.evaluate()</code> 方法，该方法会对 path 对象进行执行操作，自动计算出结果，返回一个对象，其中的 <code>confident</code> 属性表示置信度，<code>value</code> 表示计算结果，使用 <code>types.valueToNode()</code> 方法创建节点，使用 <code>path.replaceInline()</code> 方法将节点替换成计算结果生成的新节点，替换方法有一下几种：</p>
<ul>
<li><code>replaceWith</code>：用一个节点替换另一个节点；</li>
<li><code>replaceWithMultiple</code>：用多个节点替换另一个节点；</li>
<li><code>replaceWithSourceString</code>：将传入的源码字符串解析成对应 Node 后再替换，性能较差，不建议使用；</li>
<li><code>replaceInline</code>：用一个或多个节点替换另一个节点，相当于同时有了前两个函数的功能。</li>
</ul>
<p>对应的 AST 处理代码如下：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const types = require("@babel/types")
const code = `
const a = !![]+!![]+!![];
const b = Math.floor(12.34 * 2.12)
const c = 10 >> 3 << 1
const d = String(21.3 + 14 * 1.32)
const e = parseInt("1.893" + "45.9088")
const f = parseFloat("23.2334" + "21.89112")
const g = 20 < 18 ? '未成年' : '成年'
`
const ast = parser.parse(code)
const visitor = {
"BinaryExpression|CallExpression|ConditionalExpression"(path) {
const {confident, value} = path.evaluate()
if (confident){
path.replaceInline(types.valueToNode(value))
}
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>最终结果：</p>
<pre><code class="language-javascript">const a = 3;
const b = 26;
const c = 2;
const d = "39.78";
const e = parseInt("1.89345.9088");
const f = parseFloat("23.233421.89112");
const g = "\u6210\u5E74";
</code></pre>
<h3 id="删除未使用变量">删除未使用变量</h3>
<p>有时候代码里会有一些并没有使用到的多余变量，删除这些多余变量有助于更加高效的分析代码，示例代码如下：</p>
<pre><code class="language-javascript">const a = 1;
const b = a * 2;
const c = 2;
const d = b + 1;
const e = 3;
console.log(d)
</code></pre>
<p>删除多余变量，首先要了解 <code>NodePath</code> 中的 <code>scope</code>，<code>scope</code> 的作用主要是查找标识符的作用域、获取并修改标识符的所有引用等，删除未使用变量主要用到了 <code>scope.getBinding()</code> 方法，传入的值是当前节点能够引用到的标识符名称，返回的关键属性有以下几个：</p>
<ul>
<li><code>identifier</code>：标识符的 Node 对象；</li>
<li><code>path</code>：标识符的 NodePath 对象；</li>
<li><code>constant</code>：标识符是否为常量；</li>
<li><code>referenced</code>：标识符是否被引用；</li>
<li><code> references</code>：标识符被引用的次数；</li>
<li><code>constantViolations</code>：如果标识符被修改，则会存放所有修改该标识符节点的 Path 对象；</li>
<li><code>referencePaths</code>：如果标识符被引用，则会存放所有引用该标识符节点的 Path 对象。</li>
</ul>
<p>所以我们可以通过 <code>constantViolations</code>、<code>referenced</code>、<code>references</code>、<code>referencePaths</code> 多个参数来判断变量是否可以被删除，AST 处理代码如下：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const code = `
const a = 1;
const b = a * 2;
const c = 2;
const d = b + 1;
const e = 3;
console.log(d)
`
const ast = parser.parse(code)
const visitor = {
VariableDeclarator(path){
const binding = path.scope.getBinding(path.node.id.name);
// 如标识符被修改过，则不能进行删除动作。
if (!binding || binding.constantViolations.length > 0) {
return;
}
// 未被引用
if (!binding.referenced) {
path.remove();
}
// 被引用次数为0
// if (binding.references === 0) {
// path.remove();
// }
// 长度为0，变量没有被引用过
// if (binding.referencePaths.length === 0) {
// path.remove();
// }
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>处理后的代码（未使用的 b、c、e 变量已被删除）：</p>
<pre><code class="language-javascript">const a = 1;
const b = a * 2;
const d = b + 1;
console.log(d);
</code></pre>
<h3 id="删除冗余逻辑代码">删除冗余逻辑代码</h3>
<p>有时候为了增加逆向难度，会有很多嵌套的 if-else 语句，大量判断为假的冗余逻辑代码，同样可以利用 AST 将其删除掉，只留下判断为真的，示例代码如下：</p>
<pre><code class="language-javascript">const example = function () {
let a;
if (false) {
a = 1;
} else {
if (1) {
a = 2;
}
else {
a = 3;
}
}
return a;
};
</code></pre>
<p>观察 AST，判断条件对应的是 <code>test</code> 节点，if 对应的是 <code>consequent</code> 节点，else 对应的是 <code>alternate</code> 节点，如下图所示：</p>
<p><img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101427003-221259515.png" alt="16" loading="lazy"></p>
<p>AST 处理思路以及代码：</p>
<ol>
<li>筛选出 <code>BooleanLiteral</code> 和 <code>NumericLiteral</code> 节点，取其对应的值，即 <code>path.node.test.value</code>；</li>
<li>判断 <code>value</code> 值为真，则将节点替换成 <code>consequent</code> 节点下的内容，即 <code>path.node.consequent.body</code>；</li>
<li>判断 <code>value</code> 值为假，则替换成 <code>alternate</code> 节点下的内容，即 <code>path.node.alternate.body</code>；</li>
<li>有的 if 语句可能没有写 else，也就没有 <code>alternate</code>，所以这种情况下判断 <code>value</code> 值为假，则直接移除该节点，即 <code>path.remove()</code></li>
</ol>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const types = require('@babel/types');
const code = `
const example = function () {
let a;
if (false) {
a = 1;
} else {
if (1) {
a = 2;
}
else {
a = 3;
}
}
return a;
};
`
const ast = parser.parse(code)
const visitor = {
enter(path) {
if (types.isBooleanLiteral(path.node.test) || types.isNumericLiteral(path.node.test)) {
if (path.node.test.value) {
path.replaceInline(path.node.consequent.body);
} else {
if (path.node.alternate) {
path.replaceInline(path.node.alternate.body);
} else {
path.remove()
}
}
}
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>处理结果：</p>
<pre><code class="language-javascript">const example = function () {
let a;
a = 2;
return a;
};
</code></pre>
<h3 id="switch-case-反控制流平坦化">switch-case 反控制流平坦化</h3>
<p>控制流平坦化是混淆当中最常见的，通过 <code>if-else</code> 或者 <code>while-switch-case</code> 语句分解步骤，示例代码：</p>
<pre><code class="language-javascript">const _0x34e16a = '3,4,0,5,1,2'['split'](',');
let _0x2eff02 = 0x0;
while (!![]) {
switch (_0x34e16a) {
case'0':
let _0x38cb15 = _0x4588f1 + _0x470e97;
continue;
case'1':
let _0x1e0e5e = _0x37b9f3;
continue;
case'2':
let _0x35d732 = (_0x38cb15 >> _0x4588f1);
continue;
case'3':
let _0x4588f1 = 0x1;
continue;
case'4':
let _0x470e97 = 0x2;
continue;
case'5':
let _0x37b9f3 = 0x5 || _0x38cb15;
continue;
}
break;
}
</code></pre>
<p>AST 还原思路：</p>
<ol>
<li>获取控制流原始数组，将 <code>'3,4,0,5,1,2'['split'](',')</code> 之类的语句转化成 <code>['3','4','0','5','1','2']</code> 之类的数组，得到该数组之后，也可以选择把 split 语句对应的节点删除掉，因为最终代码里这条语句就没用了；</li>
<li>遍历第一步得到的控制流数组，依次取出每个值所对应的 case 节点；</li>
<li>定义一个数组，储存每个 case 节点 <code>consequent</code> 数组里面的内容，并删除 <code>continue</code> 语句对应的节点；</li>
<li>遍历完成后，将第三步的数组替换掉整个 while 节点，也就是 <code>WhileStatement</code>。</li>
</ol>
<p>不同思路，写法多样，对于如何获取控制流数组，可以有以下思路：</p>
<ol>
<li>获取到 <code>While</code> 语句节点，然后使用 <code>path.getAllPrevSiblings()</code> 方法获取其前面的所有兄弟节点，遍历每个兄弟节点，找到与 <code>switch()</code> 里面数组的变量名相同的节点，然后再取节点的值进行后续处理；</li>
<li>直接取 <code>switch()</code> 里面数组的变量名，然后使用 <code>scope.getBinding()</code> 方法获取到它绑定的节点，然后再取这个节点的值进行后续处理。</li>
</ol>
<p>所以 AST 处理代码就有两种写法，方法一：（code.js 即为前面的示例代码，为了方便操作，这里使用 fs 从文件中读取代码）</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const types = require("@babel/types")
const fs = require("fs");
const code = fs.readFileSync("code.js", {encoding: "utf-8"});
const ast = parser.parse(code)
const visitor = {
WhileStatement(path) {
// switch 节点
let switchNode = path.node.body.body;
// switch 语句内的控制流数组名，本例中是 _0x34e16a
let arrayName = switchNode.discriminant.object.name;
// 获得所有 while 前面的兄弟节点，本例中获取到的是声明两个变量的节点，即 const _0x34e16a 和 let _0x2eff02
let prevSiblings = path.getAllPrevSiblings();
// 定义缓存控制流数组
let array = []
// forEach 方法遍历所有节点
prevSiblings.forEach(pervNode => {
let {id, init} = pervNode.node.declarations;
// 如果节点 id.name 与 switch 语句内的控制流数组名相同
if (arrayName === id.name) {
// 获取节点整个表达式的参数、分割方法、分隔符
let object = init.callee.object.value;
let property = init.callee.property.value;
let argument = init.arguments.value;
// 模拟执行 '3,4,0,5,1,2'['split'](',') 语句
array = object(argument)
// 也可以直接取参数进行分割，方法不通用，比如分隔符换成 | 就不行了
// array = init.callee.object.value.split(',');
}
// 前面的兄弟节点就可以删除了
pervNode.remove();
});
// 储存正确顺序的控制流语句
let replace = [];
// 遍历控制流数组，按正确顺序取 case 内容
array.forEach(index => {
let consequent = switchNode.cases.consequent;
// 如果最后一个节点是 continue 语句，则删除 ContinueStatement 节点
if (types.isContinueStatement(consequent)) {
consequent.pop();
}
// concat 方法拼接多个数组，即正确顺序的 case 内容
replace = replace.concat(consequent);
}
);
// 替换整个 while 节点，两种方法都可以
path.replaceWithMultiple(replace);
// path.replaceInline(replace);
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>方法二：</p>
<pre><code class="language-javascript">const parser = require("@babel/parser");
const generate = require("@babel/generator").default
const traverse = require("@babel/traverse").default
const types = require("@babel/types")
const fs = require("fs");
const code = fs.readFileSync("code.js", {encoding: "utf-8"});
const ast = parser.parse(code)
const visitor = {
WhileStatement(path) {
// switch 节点
let switchNode = path.node.body.body;
// switch 语句内的控制流数组名，本例中是 _0x34e16a
let arrayName = switchNode.discriminant.object.name;
// 获取控制流数组绑定的节点
let bindingArray = path.scope.getBinding(arrayName);
// 获取节点整个表达式的参数、分割方法、分隔符
let init = bindingArray.path.node.init;
let object = init.callee.object.value;
let property = init.callee.property.value;
let argument = init.arguments.value;
// 模拟执行 '3,4,0,5,1,2'['split'](',') 语句
let array = object(argument)
// 也可以直接取参数进行分割，方法不通用，比如分隔符换成 | 就不行了
// let array = init.callee.object.value.split(',');
// switch 语句内的控制流自增变量名，本例中是 _0x2eff02
let autoIncrementName = switchNode.discriminant.property.argument.name;
// 获取控制流自增变量名绑定的节点
let bindingAutoIncrement = path.scope.getBinding(autoIncrementName);
// 可选择的操作：删除控制流数组绑定的节点、自增变量名绑定的节点
bindingArray.path.remove();
bindingAutoIncrement.path.remove();
// 储存正确顺序的控制流语句
let replace = [];
// 遍历控制流数组，按正确顺序取 case 内容
array.forEach(index => {
let consequent = switchNode.cases.consequent;
// 如果最后一个节点是 continue 语句，则删除 ContinueStatement 节点
if (types.isContinueStatement(consequent)) {
consequent.pop();
}
// concat 方法拼接多个数组，即正确顺序的 case 内容
replace = replace.concat(consequent);
}
);
// 替换整个 while 节点，两种方法都可以
path.replaceWithMultiple(replace);
// path.replaceInline(replace);
}
}
traverse(ast, visitor)
const result = generate(ast)
console.log(result.code)
</code></pre>
<p>以上代码运行后，原来的 <code>switch-case</code> 控制流就被还原了，变成了按顺序一行一行的代码，更加简洁明了：</p>
<pre><code class="language-javascript">let _0x4588f1 = 0x1;
let _0x470e97 = 0x2;
let _0x38cb15 = _0x4588f1 + _0x470e97;
let _0x37b9f3 = 0x5 || _0x38cb15;
let _0x1e0e5e = _0x37b9f3;
let _0x35d732 = (_0x38cb15 >> _0x4588f1);
</code></pre>
<h2 id="参考资料">参考资料</h2>
<p>本文有参考以下资料，也是比较推荐的在线学习资料：</p>
<ul>
<li>Youtube 视频，Babel 入门：https://www.youtube.com/watch?v=UeVq_U5obnE （作者 Nicolò Ribaudo，视频中的 PPT 资料可在 K 哥爬虫公众号后台回复 Babel 免费获取！）</li>
<li>官方手册 Babel Handbook：https://github.com/jamiebuilds/babel-handbook</li>
<li>非官方 Babel API 中文文档：https://evilrecluse.top/Babel-traverse-api-doc/</li>
</ul>
<h2 id="end">END</h2>
<p>Babel 编译器国内的资料其实不是很多，多看源码、同时在线对照可视化的 AST 语法树，耐心一点儿一层一层分析即可，本文中的案例也只是最基本操作，实际遇到一些混淆还得视情况进行修改，比如需要加一些类型判断来限制等，后续K哥会用实战来带领大家进一步熟悉解混淆当中的其他操作。<br>
<img src="https://img2022.cnblogs.com/other/2501174/202204/2501174-20220427101433890-1144795112.gif" alt="" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/ikdl/p/16228740.html 哇，膜拜大佬！[:L] 这篇文章太干货了，之前一直对AST的概念模模糊糊的，看完瞬间清晰了很多！
特别是后面那些实战案例，简直是手把手教学[:strong] 把字符串还原、表达式执行、未使用变量删除、控制流平坦化还原这些都讲透了，对我们逆向分析帮助太大了[:good]
想请教一下，如果遇到更复杂的混淆情况，比如多层嵌套的obfuscator混淆，或者加了反调试的代码，有没有什么好的思路？[:question] 另外如果原代码经过了多次混淆，AST还原后代码还是乱糟糟的话，是不是得多跑几遍才能还原干净？
感谢楼主的分享，已收藏！期待后续的实战文章[:handshake]
頁:
[1]