如何在浏览器中使用 nodejs 模块进行反混淆？

发表于 更新于 分类于

大家好，今天分享一种在浏览器中运行 nodejs 模块的方法。

浏览器运行 nodejs 模块

为什么要在浏览器中运行 nodejs 模块的代码？为了让 babel 库可以在浏览器中运行。babel 从 6.0 版本开始就不再发布 web 版本了，为了在浏览器中使用，我们需要自己打包。

那为什么要让 babel 在浏览器中运行呢？为了实现自动反混淆功能，通过中间人的方式自动将混淆的 JS 代码反混淆后返回给浏览器运行，方便调试 JS 代码以及方便自动移除一些烦人的反调试。

image-20250327200329444

如果不在浏览器中运行 babel 可以吗？不行，因为直接使用 nodejs 模块会报错，具体原因在下篇文章中讨论。

编译 nodejs 代码

那应该如何在浏览器中运行 nodejs 模块的代码呢？

大家都知道浏览器和 nodejs 还是有一些区别的，包括 global 和 windows，nodejs 有一些浏览器不具备的 api 等等。并且浏览器和 nodejs 使用的模块系统还不一样，nodejs 使用 CommonJS 模块系统，浏览器使用 ES 模块标准，表现在使用方式上就是：浏览器使用 import 关键字，nodejs 使用 require 关键字。

说完了区别，现在来说解决方案。为了让浏览器可以使用 nodejs 的模块，可以使用类似于 webpack 的方式将 nodejs 模块放到不同的命名空间中去，当然了，社区提供了更好用的解决方案，它就是：browserify。

使用 browserify

它要如何使用呢？首先新建一个文件夹，使用命令 npm init -y 初始化环境。

image-20250327201117763

image-20250327201244924

然后安装所需的模块，别忘了安装 browserify。

然后新建一个 main.js 文件，写入以下测试代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const types = require("@babel/types");
const parser = require("@babel/parser");
const traverse = require("@babel/traverse").default;
const generator = require("@babel/generator").default;

// 测试代码解析
const code = `let add = 1+1+1;`;
const ast = parser.parse(code);

traverse(ast, {
    "BinaryExpression"(path) {
        const {confident, value} = path.evaluate()
        if (confident) {
            path.replaceInline(types.valueToNode(value))
        }
    }
});
const output = generator(ast).code;
console.log(output); // 应输出转换后的代码

导入需要的模块，并且使用简单的 AST 代码来自动计算表达式的值，输出转换后的代码。现在这个代码在浏览器中肯定是无法运行的，我们将其编译后再浏览器中可用的单个 JS 文件。

执行以下命令，转换代码：

1
node_modules/.bin/browserify main.js > bundle.js

image-20250327210628268

image-20250327210604993

运行完成后，会在当前文件夹生成 bundle.js，查看生成的代码，会发现生成的代码比刚刚的代码大了很多，那是因为刚才的命令将依赖的模块都打包进去了，并且还保持了原有的代码结构，只不过对原有的代码进行了重新封装。

image-20250327210745597

格式化一下，可以看到代码结构类似于 webpack 打包后的代码结构，原理应该也是类似的。

测试

新建一个 html 文件，添加以下代码，测试刚刚生成的 JS 是否可以在浏览器的环境中正常运行。

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

因为刚才的代码是我们已经编写好的，直接可以运行的，所以这里无需多余代码，直接打开 html 即可。

image-20250327211045012

打开后可以看到，程序成功运行，并且打印出了正确的结果。

总结

刚刚尝试了一个比较简单的 AST 代码还原，主要是测试 browserify 的打包逻辑，下篇文章将会使用此方案实现中间人自动 AST 反混淆方案，实现自动去除部分烦人的反调试逻辑。

本文章首发于个人博客 LLLibra146’s blog

本文作者：LLLibra146

更多文章请关注公众号 (LLLibra146)：LLLibra146

版权声明：本博客所有文章除特别声明外，均采用 © BY-NC-ND 许可协议。非商用转载请注明出处！严禁商业转载！

本文链接：
https://blog.d77.xyz/archives/5d10e049.html