zrnge/webasm
GitHub: zrnge/webasm
一款纯浏览器端运行的多架构静态反汇编器，利用 Capstone WASM 引擎实现无需后端的本地逆向分析。
Stars: 1 | Forks: 0
# WEBASM - Web 反汇编器
[](https://github.com/zrnge)
[](https://zrnge.github.io)
[](https://github.com/zrnge/webasm/blob/main/LICENSE)
WEBASM 是一款优质的、100% 客户端的多架构静态反汇编器，专为安全分析师和逆向工程师设计。它完全在 Web 浏览器中运行，**不需要后端服务器**，这意味着上传的二进制文件永远不会离开您的本地计算机。它已预配置好，可以直接作为静态网站在 GitHub Pages 上进行构建和部署。
在线示例：[zrnge.github.io/webasm/](https://zrnge.github.io/webasm/)
## 🚀 核心特性
- **多架构支持**：支持反汇编至少 **x86**、**x86-64**、**ARM** 和 **ARM64** 的机器码，利用编译为 WebAssembly 的行业标准 **Capstone 反汇编引擎**。
- **客户端文件解析**：
- 使用 magic bytes 自动检测二进制格式：`MZ` 对应 PE（`.exe` / `.dll`），`\x7fELF` 对应 ELF。
- 自动解析头部以检测架构和位数。
- 提取入口点（`AddressOfEntryPoint` / `e_entry`）和可执行节（例如 `.text`）。
- 从 **PE Export Directories** 和 **ELF Symbol Tables**（`.symtab` / `.dynsym`）解析函数名。
- **交互式反汇编视图**：
- 虚拟化列表渲染，可在一秒钟内以 60 FPS 处理包含数百万条指令的庞大节。
- 交互式操作数跳转：点击分支目标（如 `0x401020`）即可将视图直接滚动到该指令处。
- 使用自定义品牌标识高亮显示二进制文件的入口点。
- 将 call/jump 目标地址直接解析为内联 symbol（例如 `call 0x401050 <_printf>`）。
- 在 **Linear Sweep** 和具备控制流感知的 **Recursive Descent** 反汇编之间切换。
- 在 **Intel** 和 **AT&T** 之间切换 x86 语法风格。
- **集成 Hex Viewer**：
- 并排的虚拟化 16 字节对齐 Hex Dump，展示文件偏移量、hex 值以及 ASCII 表示。
- **后台多线程**：
- 所有繁重的任务（解析、加载 WASM 和反汇编）都在后台的 **Web Worker** 中执行，以防止浏览器卡死或延迟。
- **本地且安全**：
- **无遥测、无追踪、无后端。** 所有处理均在客户端本地计算机上执行。对于专有或机密的恶意软件分析也非常安全。
## 🛠️ 技术栈
- **框架**：React 18 + TypeScript + Vite
- **样式**：Tailwind CSS v4（采用赛博暗黑美学）
- **反汇编核心**：`capstone-wasm`（Capstone v5.0 的 WASM 移植版）
- **图标**：`lucide-react`
- **CI/CD**：GitHub Actions
## 📂 仓库结构
```
├── .github/workflows/
│ └── deploy.yml # GitHub Actions workflow for Page builds
├── public/
│ └── favicon.ico # Favicon icon
├── src/
│ ├── components/
│ │ ├── DisassemblyView.tsx # Custom virtualized scroll instruction table
│ │ ├── FileDropzone.tsx # Drag-and-drop uploader with security badge
│ │ ├── HexView.tsx # Virtualized hex editor-style dump panel
│ │ └── MetadataView.tsx # Sidebar sections/symbols tabs & search
│ ├── parser/
│ │ ├── elf.ts # Pure TypeScript ELF binary parser
│ │ ├── pe.ts # Pure TypeScript PE binary parser
│ │ ├── types.ts # Common parsing type declarations
│ │ └── index.ts
│ ├── worker/
│ │ └── disassembler.worker.ts # Background thread disassembler
│ ├── App.tsx # Core workspace state coordinator
│ ├── index.css # Tailwind CSS imports & theme definitions
│ └── main.tsx # React mount entrypoint
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite config (WASM copying & relative pathing)
└── README.md # Documentation
```
## ⚙️ 如何在本地构建和运行
### 前置条件
- Node.js（建议 v18 或更高版本）
- npm
### 1. 安装依赖
```
npm install
```
### 2. 运行开发服务器
这将启动本地的 Vite 开发服务器。Vite 配置会自动挂钩设置过程，并将 `capstone.wasm` 复制到 `public/` 文件夹中以便浏览器加载。
```
npm run dev
```
在浏览器中打开 [http://localhost:5173](http://localhost:5173)。
### 3. 构建生产版本
这会将所有的 JavaScript、CSS 和 WebAssembly 资产打包，并在独立的 `dist/` 目录中使用相对路径。
```
npm run build
```
## 🌐 如何部署到 GitHub Pages
该项目包含一个自动化的部署工作流。
### 自动化（GitHub Actions）
1. 将代码库提交并推送到 GitHub。
2. 确保您的仓库已为 workflows 启用 **Read and write permissions**（读取和写入权限）：
- 进入您的仓库的 **Settings**（设置） -> **Actions** -> **General**（常规） -> 向下滚动到 **Workflow permissions**（工作流权限）。
- 选择 **Read and write permissions** 并点击 **Save**（保存）。
3. 推送到 `main` 分支。GitHub Actions 将触发 `.github/workflows/deploy.yml`，它会构建项目并将编译好的资产推送到 `gh-pages` 分支。
4. 进入 **Settings**（设置） -> **Pages**，并确保将部署源设置为 `gh-pages` 分支。
## 🔍 技术细节与架构
### Capstone WASM 的复制与解析
为了支持 GitHub Pages 上的相对子路径路由（例如 `https://.github.io//`），我们执行了以下操作：
1. 使用 `vite.config.ts` 中的自定义 hook，将 Capstone 引擎二进制文件（`capstone.wasm`）直接复制到我们的公共静态资产中。
2. 在 `App.tsx` 中，根据加载页面的 origin 和运行时的 base URL 动态解析其路径：
const baseUrl = new URL(import.meta.env.BASE_URL, window.location.href);
const wasmUrl = new URL('capstone.wasm', baseUrl).href;
3. 将 `wasmUrl` 传递给后台的 Web Worker，该 Worker 再将其传递给 Capstone 的模块工厂覆盖：
await loadCapstone({
locateFile: (path) => path.endsWith('.wasm') ? wasmUrl : path
});
### 反汇编模式的区别
- **Linear Sweep**：从节开头到节结尾按顺序循环遍历原始字节，解码所有内容。如果遇到无效的指令字节，它会跳过该字节并尝试解码下一个数据块。
- **Recursive Descent**：从入口点和已知的 symbol 导出开始追踪执行路径。它从操作数文本中解析 jump 和 call 的目标地址，并将它们排入反汇编队列。当遇到无条件分支（`jmp` / `ret` / `bx lr`）时，它会终止当前追踪线并从队列中取出下一个项目。追踪代码之间的间隙通过二次 Linear Sweep 填补。
## ⚠️ 限制与说明
- **代码混淆与加壳**：这是一款静态反汇编器。加壳或高度混淆的二进制文件（例如 UPX、VMProtect）将显示加密/压缩的节 payload 或存根加载器。在反汇编之前，需要进行动态分析或脱壳处理。
- **反编译**：此工具输出的是原始的汇编指令助记符（Capstone）。它不包含反编译器（类似 C 语言的伪代码生成器）或控制流图（CFG）渲染功能，因为这些需要原生的图解算器。
- **Symbol 名称**：Symbol 名称从标准的头部表中提取（PE 的 Exports，ELF 的 `.symtab` / `.dynsym`）。如果二进制文件已被剥离 symbol（这对于发布版本或恶意文件很典型），函数目标将被解析为标准地址，而不是名称。
## 👤 作者
由 **Zrnge** 开发和维护
- **GitHub**: [@zrnge](https://github.com/zrnge)
- **网站与项目**: [zrnge.github.io](https://zrnge.github.io)
- **代码库**: [WEBASM](https://github.com/zrnge/webasm)
[](https://github.com/zrnge)
[](https://zrnge.github.io)
[](https://github.com/zrnge/webasm/blob/main/LICENSE)
WEBASM 是一款优质的、100% 客户端的多架构静态反汇编器，专为安全分析师和逆向工程师设计。它完全在 Web 浏览器中运行，**不需要后端服务器**，这意味着上传的二进制文件永远不会离开您的本地计算机。它已预配置好，可以直接作为静态网站在 GitHub Pages 上进行构建和部署。
在线示例：[zrnge.github.io/webasm/](https://zrnge.github.io/webasm/)
## 🚀 核心特性
- **多架构支持**：支持反汇编至少 **x86**、**x86-64**、**ARM** 和 **ARM64** 的机器码，利用编译为 WebAssembly 的行业标准 **Capstone 反汇编引擎**。
- **客户端文件解析**：
- 使用 magic bytes 自动检测二进制格式：`MZ` 对应 PE（`.exe` / `.dll`），`\x7fELF` 对应 ELF。
- 自动解析头部以检测架构和位数。
- 提取入口点（`AddressOfEntryPoint` / `e_entry`）和可执行节（例如 `.text`）。
- 从 **PE Export Directories** 和 **ELF Symbol Tables**（`.symtab` / `.dynsym`）解析函数名。
- **交互式反汇编视图**：
- 虚拟化列表渲染，可在一秒钟内以 60 FPS 处理包含数百万条指令的庞大节。
- 交互式操作数跳转：点击分支目标（如 `0x401020`）即可将视图直接滚动到该指令处。
- 使用自定义品牌标识高亮显示二进制文件的入口点。
- 将 call/jump 目标地址直接解析为内联 symbol（例如 `call 0x401050 <_printf>`）。
- 在 **Linear Sweep** 和具备控制流感知的 **Recursive Descent** 反汇编之间切换。
- 在 **Intel** 和 **AT&T** 之间切换 x86 语法风格。
- **集成 Hex Viewer**：
- 并排的虚拟化 16 字节对齐 Hex Dump，展示文件偏移量、hex 值以及 ASCII 表示。
- **后台多线程**：
- 所有繁重的任务（解析、加载 WASM 和反汇编）都在后台的 **Web Worker** 中执行，以防止浏览器卡死或延迟。
- **本地且安全**：
- **无遥测、无追踪、无后端。** 所有处理均在客户端本地计算机上执行。对于专有或机密的恶意软件分析也非常安全。
## 🛠️ 技术栈
- **框架**：React 18 + TypeScript + Vite
- **样式**：Tailwind CSS v4（采用赛博暗黑美学）
- **反汇编核心**：`capstone-wasm`（Capstone v5.0 的 WASM 移植版）
- **图标**：`lucide-react`
- **CI/CD**：GitHub Actions
## 📂 仓库结构
```
├── .github/workflows/
│ └── deploy.yml # GitHub Actions workflow for Page builds
├── public/
│ └── favicon.ico # Favicon icon
├── src/
│ ├── components/
│ │ ├── DisassemblyView.tsx # Custom virtualized scroll instruction table
│ │ ├── FileDropzone.tsx # Drag-and-drop uploader with security badge
│ │ ├── HexView.tsx # Virtualized hex editor-style dump panel
│ │ └── MetadataView.tsx # Sidebar sections/symbols tabs & search
│ ├── parser/
│ │ ├── elf.ts # Pure TypeScript ELF binary parser
│ │ ├── pe.ts # Pure TypeScript PE binary parser
│ │ ├── types.ts # Common parsing type declarations
│ │ └── index.ts
│ ├── worker/
│ │ └── disassembler.worker.ts # Background thread disassembler
│ ├── App.tsx # Core workspace state coordinator
│ ├── index.css # Tailwind CSS imports & theme definitions
│ └── main.tsx # React mount entrypoint
├── package.json # Project dependencies
├── tsconfig.json # TypeScript configuration
├── vite.config.ts # Vite config (WASM copying & relative pathing)
└── README.md # Documentation
```
## ⚙️ 如何在本地构建和运行
### 前置条件
- Node.js（建议 v18 或更高版本）
- npm
### 1. 安装依赖
```
npm install
```
### 2. 运行开发服务器
这将启动本地的 Vite 开发服务器。Vite 配置会自动挂钩设置过程，并将 `capstone.wasm` 复制到 `public/` 文件夹中以便浏览器加载。
```
npm run dev
```
在浏览器中打开 [http://localhost:5173](http://localhost:5173)。
### 3. 构建生产版本
这会将所有的 JavaScript、CSS 和 WebAssembly 资产打包，并在独立的 `dist/` 目录中使用相对路径。
```
npm run build
```
## 🌐 如何部署到 GitHub Pages
该项目包含一个自动化的部署工作流。
### 自动化（GitHub Actions）
1. 将代码库提交并推送到 GitHub。
2. 确保您的仓库已为 workflows 启用 **Read and write permissions**（读取和写入权限）：
- 进入您的仓库的 **Settings**（设置） -> **Actions** -> **General**（常规） -> 向下滚动到 **Workflow permissions**（工作流权限）。
- 选择 **Read and write permissions** 并点击 **Save**（保存）。
3. 推送到 `main` 分支。GitHub Actions 将触发 `.github/workflows/deploy.yml`，它会构建项目并将编译好的资产推送到 `gh-pages` 分支。
4. 进入 **Settings**（设置） -> **Pages**，并确保将部署源设置为 `gh-pages` 分支。
## 🔍 技术细节与架构
### Capstone WASM 的复制与解析
为了支持 GitHub Pages 上的相对子路径路由（例如 `https://标签：WebAssembly, 云安全监控, 云资产清单, 反汇编器, 自动化攻击, 逆向工程, 静态分析