# JiaYi-Packet

**Repository Path**: auhgnep/JiaYi-Packet

## Basic Information

- **Project Name**: JiaYi-Packet
- **Description**: 基于 Electron 和 Vue.js 开发的跨平台网络抓包工具，支持 HTTP/HTTPS 流量的拦截、检查和分析，免费开源，欢迎大家使用，可以提PR、需求，优化、BUG。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-04
- **Last Updated**: 2025-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
	<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-8342b0ad86a8badcc3377fde944be6dc35e.png">
</p>
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">嘉仪 HTTP Proxy Tool v0.0.1</h1>
<h4 align="center">基于 Electron 和 Vue.js 开发的跨平台网络抓包工具，支持 HTTP/HTTPS 流量的拦截、检查和分析。</h4>
<p align="center">
	<a href="https://gitee.com/auhgnep/JiaYi-NodeJs/blob/master/LICENSE"><img src="https://img.shields.io/github/license/mashape/apistatus.svg"></a>
</p>



# 嘉仪网络抓包工具

嘉仪，嘉言善行，仪态万方。

基于 Electron 和 Vue.js 开发的跨平台网络抓包工具，支持 HTTP/HTTPS 流量的拦截、检查和分析。

**下载软件**，**安装版**[JiaYi-Packet](https://gitee.com/auhgnep/JiaYi-Packet/releases/download/v0.0.1/%E5%98%89%E4%BB%AA%20Http%20Proxy%20Setup%200.1.0.exe)

**下载软件**，**解压免安装版**[JiaYi-Packet](https://gitee.com/auhgnep/JiaYi-Packet/releases/download/v0.0.1/JiaYi-Packet.zip)



## 主要功能

- HTTP/HTTPS 流量捕获
- 系统代理自动配置
- SSL/TLS 证书自动生成
- 跨平台支持（Windows、macOS、Linux）
- 实时流量监控
- 安全的 HTTPS 拦截

## 技术架构

### 核心组件

1. **主进程 (`background.js`)**
   - 管理 Electron 应用生命周期
   - 创建和管理应用窗口
   - 处理进程间通信（IPC）
   - 管理代理服务器生命周期

2. **代理处理器 (`proxy.js`)**
   - 实现 HTTP/HTTPS 代理服务器
   - 处理请求/响应拦截
   - 管理 SSL/TLS 证书生成
   - 提供实时流量监控

3. **证书管理器 (`certManager.js`)**
   - 生成根证书和服务器证书
   - 管理证书缓存
   - 处理证书验证
   - 使用 node-forge 进行加密操作

4. **系统代理管理器 (`systemProxyManager.js`)**
   - 配置系统全局代理设置
   - 支持多操作系统
   - 管理代理启用/禁用状态
   - 处理应用退出时的代理清理

### 技术栈

- **前端框架**: Vue.js 3
- **桌面框架**: Electron 13
- **UI 框架**: Element Plus
- **主要依赖**:
  - `node-forge`: 证书生成和加密
  - `winreg`: Windows 注册表管理
  - `axios`: HTTP 客户端
  - `vuex`: 状态管理
  - `vue-router`: 路由管理

## 安装说明

1. 克隆仓库：
```bash
git clone [仓库地址]
```

2. 安装依赖：
```bash
npm install
```

3. 开发模式运行：
```bash
npm run electron:serve
```

4. 构建生产版本：
```bash
npm run electron:build
```

## 使用指南

1. **启动应用**
   - 运行应用程序
   - 工具会自动配置系统代理设置
2. **安装根证书**
   - 首次运行时，应用会生成根证书
   - 按照提示将证书安装到系统的信任存储中
3. **配置代理设置**
   - 默认代理端口为 8001
   - 应用会自动配置系统代理设置
   - 预配置了本地地址的代理绕过规则
4. **监控流量**
   - 在主界面可以查看所有 HTTP/HTTPS 流量
   - 实时查看请求/响应详情
   - 分析头部信息、正文内容和计时信息

### 操作演示图

<table>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-67082a430f4a1564e053ad2effc0cb2a3f8.png"/></td>
    </tr>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-5149d4890a89e2b7d93610912c6fc094040.png"/></td>
    </tr>
    <tr>
        <td><img src="https://oscimg.oschina.net/oscnet/up-0b63f9c19429ff9337a1f17b5e6242f3122.png"/></td>
    </tr>
</table>

## 开发指南

### 项目结构

```
├── background.js          # Electron 主进程
├── ipc/
│   ├── proxy.js          # 代理实现
│   ├── certManager.js    # 证书管理
│   └── systemProxyManager.js # 系统代理配置
├── certificates/         # 证书存储
│   └── cache/           # 服务器证书缓存
└── src/                 # Vue.js 前端代码
```

### 核心功能实现

1. **HTTPS 拦截**
   - 为每个域名动态生成 SSL 证书
   - 维护证书缓存以提高性能
   - 使用 node-forge 进行加密操作

2. **系统代理**
   - 自动配置系统代理设置
   - 支持 Windows、macOS 和 Linux
   - 处理应用退出时的代理清理

3. **流量监控**
   - 实时请求/响应监控
   - 数据过滤和搜索功能
   - 详细的流量分析

## 常见问题解决

1. **证书安装问题**
   - Windows：使用 certutil 进行安装
   - macOS：使用 security 命令行工具
   - Linux：导入到系统证书存储

2. **代理配置问题**
   - 检查系统代理设置
   - 验证端口可用性
   - 检查绕过规则设置

3. **HTTPS 抓包问题**
   - 确保根证书正确安装
   - 检查证书缓存目录权限
   - 验证代理服务器状态

## 实现原理说明

### HTTPS 抓包原理

1. **证书生成和安装**
   - 生成自签名根证书
   - 安装根证书到系统信任存储
   - 动态生成域名证书
2. **代理服务器工作流程**
   - 接收客户端请求
   - 动态生成目标域名证书
   - 建立 HTTPS 隧道
   - 解密和转发流量
3. **系统代理集成**
   - 自动配置系统代理
   - 管理代理生命周期
   - 处理异常退出清理

### 代码概述

基于 Electron 实现的本地 HTTP/HTTPS 代理服务器。主要使用了以下核心技术：

- node-forge：用于证书生成和管理
- Electron IPC：用于主进程和渲染进程间通信
- Node.js 内置模块：用于代理服务器的实现
- 系统特定 API：用于系统代理配置

### 核心组件

#### 1. 证书管理 (certManager.js)

使用 `node-forge` 库进行 SSL 证书的创建和管理。

##### 主要功能：

- 根证书（Root CA）生成
- 动态服务器证书创建
- 证书验证

#####  实现细节：

```javascript
核心方法：
- generateKeyPair()：生成 2048 位 RSA 密钥对
- createCertificate()：生成根证书
- createServerCertificate()：创建由根证书签名的域名证书
```

#### 2. 代理服务器 (proxy.js)

使用 Node.js 内置模块（http、https、net、tls）实现代理服务器核心功能。

#####  主要组件：

1. HTTP 代理：
   - 处理普通 HTTP 请求
   - 转发请求到目标服务器
   - 捕获请求/响应数据用于检查

2. HTTPS 代理：
   - 实现 CONNECT 隧道
   - 为每个域名创建动态 HTTPS 服务器
   - 管理 SSL/TLS 连接

##### 实现流程：

1. 客户端发送请求到代理
2. 代理服务器拦截请求
3. 对于 HTTPS 请求：
   - 为域名创建动态证书
   - 建立安全隧道
   - 管理端到端加密
4. 转发请求到目标服务器
5. 捕获并记录流量数据

#### 3. 系统代理管理器 (systemProxyManager.js)

管理不同平台的系统级代理设置。

##### 平台特定实现：

1. Windows：
   - 使用 Windows 注册表
   - 管理 Internet 设置
   - 处理代理绕过列表

2. macOS：
   - 使用 networksetup 命令
   - 管理网络服务配置
   - 处理 HTTP 和 HTTPS 代理设置

3. Linux：
   - 使用 gsettings（GNOME）
   - 配置系统级代理设置

### 技术实现详解

#### 证书生成过程

1. 根证书生成：

   ```javascript
   - 创建 RSA 密钥对（2048位）
   - 设置证书属性（有效期、颁发者、使用者）
   - 添加扩展（基本约束、密钥用途等）
   - 自签名证书
   ```

2. 服务器证书生成：

   ```javascript
   - 为服务器创建新的密钥对
   - 设置特定域名的属性
   - 使用根证书签名
   - 添加主题备用名称（SAN）
   ```

#### 代理服务器实现

#### HTTP 流量处理

- 使用 Node.js `http` 模块创建标准 HTTP 服务器
- 处理传入的 HTTP 请求并转发到目标服务器
- 捕获请求/响应数据用于分析

#### HTTPS 流量处理

1. **初始 CONNECT 请求**

```plaintext
客户端 → 代理：HTTP CONNECT 请求
代理 → 客户端：HTTP/1.1 200 Connection Established
```

2. **TLS 处理流程**

- 当客户端发起 HTTPS 连接时：

  ```javascript
  proxyServer.on('connect', async (req, clientSocket, head) => {
    const [hostname, targetPort] = req.url.split(':')
    // 为此连接创建 HTTPS 服务器
    const httpsServer = await createHttpsServer(hostname, event)
  })
  ```

3. **`net` 模块的作用**

- 处理客户端和代理之间的原始 TCP 连接

- 为 HTTPS 流量创建 TCP 隧道

- 关键功能：

  ```javascript
  const connection = net.connect({
    port: httpsPort,
    host: '127.0.0.1'
  })
  ```

- 管理双向数据流：

  ```javascript
  connection.pipe(clientSocket)  // 将目标服务器的响应转发给客户端
  clientSocket.pipe(connection)  // 将客户端的请求转发给目标服务器
  ```

4. **`tls` 模块的作用**

- 创建安全的 TLS 连接

- 管理 SSL/TLS 握手过程

- 在 HTTPS 服务器创建中使用：

  ```javascript
  const httpsServer = https.createServer({
    cert: serverCert,  // 动态生成的服务器证书
    key: serverKey,    // 对应的私钥
    rejectUnauthorized: false  // 允许自签名证书
  })
  ```

#### HTTPS 拦截流程详解

1. **初始连接**

   - 客户端发起 HTTPS 请求到目标服务器
   - 请求被代理通过 CONNECT 方法拦截
   - 此时建立的是纯 TCP 隧道，尚未涉及 TLS

2. **证书生成**

   - 代理为请求的域名动态生成服务器证书
   - 证书由代理的根 CA 签名
   - 证书会被缓存以供将来使用
   - 这一步是实现 HTTPS 解密的关键

3. **TLS 隧道建立**

   ```plaintext
   客户端 ←→ 代理服务器 (TLS) ←→ 目标服务器 (TLS)
   ```

   - 代理同时作为客户端和服务器：
     * 对客户端表现为目标域名的服务器
     * 对服务器表现为普通的 HTTPS 客户端

4. **数据流向**

   ```plaintext
   客户端请求 → 代理解密 → 请求分析 → 重新加密 → 目标服务器
   目标服务器响应 → 代理解密 → 响应分析 → 重新加密 → 客户端
   ```

#### 数据捕获流程

1. 请求捕获：
   - 方法、URL、请求头
   - 请求体（如果有）
   - 时间戳
2. 响应捕获：
   - 状态码
   - 响应头
   - 响应体
   - 时间信息

#### 总结

##### net 模块

`net` 模块是 Node.js 的核心网络模块，处理底层的 TCP 通信：

1. **原始 TCP 连接处理**
```javascript
const connection = net.connect({
  port: httpsPort,
  host: '127.0.0.1'
})
```
这段代码创建了一个 TCP 连接，在抓包工具中主要用于：
- 建立客户端和代理之间的初始连接
- 创建到目标服务器的连接
- 传输原始数据流

2. **数据通道建立**
```javascript
connection.pipe(clientSocket)
clientSocket.pipe(connection)
```
这是 `net` 模块最关键的应用，创建了双向数据通道：
- `connection.pipe(clientSocket)`：将服务器响应转发给客户端
- `clientSocket.pipe(connection)`：将客户端请求转发给服务器

##### tls 模块

`tls` 模块是建立在 `net` 模块之上的安全层，处理 SSL/TLS 加密通信：

1. **创建安全服务器**
```javascript
const httpsServer = https.createServer({
  cert: serverCert,
  key: serverKey,
  rejectUnauthorized: false
})
```
- 提供 SSL/TLS 加密功能
- 管理证书和密钥
- 处理加密握手过程

##### 工作流程图解

```plaintext
客户端 -----> 代理服务器 -----> 目标服务器
      net         tls
      TCP      SSL/TLS

1. [客户端] --TCP连接(net)--> [代理]
2. [代理] --SSL/TLS(tls)--> [目标服务器]
```

##### 具体例子解析

当用户访问 https://www.baidu.com 时：

1. **初始 CONNECT 请求** (使用 net)
```javascript
proxyServer.on('connect', (req, clientSocket, head) => {
  // clientSocket 是由 net 模块创建的原始 TCP 连接
})
```

2. **建立 TLS 隧道** (使用 tls)
```javascript
const httpsServer = https.createServer({
  cert: serverCert,  // 用于与客户端通信的证书
  key: serverKey,
})
```

3. **数据转发** (net + tls)
```javascript
// 使用 net 模块创建数据通道
connection.pipe(clientSocket)
// 数据在传输过程中由 tls 模块加密/解密
clientSocket.pipe(connection)

```

简单来说：
- `net` 模块负责建立和维护 TCP 连接，就像是一个管道
- `tls` 模块负责在这个管道上加密和解密数据，确保安全通信

这两个模块的配合让抓包工具能够：
1. 建立可靠的网络连接（net）
2. 安全地处理 HTTPS 流量（tls）
3. 在不破坏加密的情况下分析网络通信

这就类似于：
- `net` 模块像是一条水管，负责传输数据
- `tls` 模块像是一个加密器，确保传输的数据是安全的
- 两者配合，实现了既能传输又能保证安全的通信系统

## 安全考虑

### 证书安全

1. 根证书：
   - 本地生成
   - 2048位 RSA 密钥
   - 一年有效期

2. 服务器证书：
   - 动态生成
   - 特定域名
   - 由本地 CA 签名

### 数据安全

1. 本地处理：
   - 所有数据本地处理
   - 无外部服务依赖
   - 安全的证书存储

2. 系统集成：
   - 退出时正确清理
   - 安全的代理配置
   - 证书安装处理

## 开发环境要求

- Node.js >= 12.0.0
- npm >= 6.0.0
- Vue CLI >= 4.5.0
- 支持的操作系统：
  - Windows 7 及以上
  - macOS 10.12 及以上
  - 主流 Linux 发行版

## 嘉仪交流群

QQ群： [![加入QQ群](https://img.shields.io/badge/645103562-blue.svg)](https://qm.qq.com/q/Ssvbr5dcIy)