bproxy 跨平台网络代理工具技术分析

一、概述

1. 工具简介

bproxy 是一款专为前端开发设计的跨平台网络代理工具。其核心理念是通过 JavaScript 脚本作为配置文件，为开发者提供更高自由度的代理配置能力，解决传统代理工具配置僵化、不支持跨平台协同开发的问题。

2. 核心特点

A. JavaScript 脚本配置

配置文件 bproxy.config.js 是一个 Node.js 脚本，开发者可以在配置文件中编写代码实现复杂逻辑，这相比传统的静态配置文件（如 JSON、YAML）提供了更强的表达能力。

B. 项目级配置管理

配置文件可以跟随项目走，支持多人跨平台协同开发。团队成员可以共享同一个代理配置，避免因开发环境差异导致的问题。

C. 前端开发优化

针对前端开发场景进行了深度优化，支持本地文件映射、YApi Mock 集成、WebSocket 调试等功能。

二、系统架构

1. 整体架构

bproxy 采用客户端服务器架构，由以下核心组件构成：

graph TB
    Client[客户端应用] -->|HTTP/HTTPS 请求| Proxy[代理服务器]
    Proxy -->|匹配规则| RuleEngine[规则引擎]
    RuleEngine -->|本地文件| FileMapper[文件映射器]
    RuleEngine -->|本地服务| LocalServer[本地服务器]
    RuleEngine -->|远程代理| RemoteProxy[远程代理]
    RuleEngine -->|Mock数据| YApi[YApi集成]
    Proxy -->|证书处理| HTTPS[HTTPS证书管理]
    Client -->|WebSocket| WS[WebSocket代理]
    Proxy -.调试信息.-> DevTools[开发者工具]

2. 技术栈

根据项目文件结构分析：

三、核心功能

1. 独立配置管理

配置文件可以跟随项目版本控制，团队成员共享同一套代理规则：

module.exports = {
  port: 8888, // 本地代理服务器端口
  https: true, // 开启所有 HTTPS 抓包
  rules: [
    {
      url: 'https?://m.v.qq.com/tvp/',
      target: 'hello world',
    },
  ],
};

2. 请求响应拦截

A. 本地文件映射

将线上资源代理到本地文件或目录，实现本地开发和线上环境的无缝切换：

// 目录映射
{ url: 'https://google.com/static/**', target: '/path/to/your/folder' }

// 单文件映射
{ url: 'https://google.com/static/a.js', target: '/path/to/your/folder/a.js' }

B. 本地服务器代理

将线上请求代理到本地开发服务器：

{ url: 'https://baidu.com/pages/demo', target: 'http://127.0.0.1:3000' }

C. 自定义响应头

解决跨域问题和调试需求：

{
  url: 'https://google.com/user',
  responseHeaders: {
    "Access-Control-Allow-Origin": "https://qq.com",
    "Access-Control-Allow-Credentials": "true",
  },
  requestHeaders: {
    "cache-control": "no-store",
  },
}

3. HOST 配置增强

传统 HOST 配置只能将整个域名指向同一个 IP，bproxy 支持同一域名下不同路径配置不同的 HOST：

// 同一个域名下，不同的接口可以配置不同的 host
{ url: 'https://google.com/api/user', target: '127.0.0.1' }
{ url: 'https://google.com/api/login', target: '192.168.0.1' }

4. HTTPS 支持

A. 自动证书安装

bproxy 支持自动安装 HTTPS 证书，简化 HTTPS 抓包配置流程。

B. HTTPS 白名单

可以自定义需要抓包的 HTTPS 白名单，避免抓取所有 HTTPS 流量：

{
  https: true, // 开启 HTTPS 抓包
  // httpsWhitelist: ['*.example.com'] // 配置白名单（示例）
}

5. WebSocket 代理

支持 WebSocket 协议代理，配合本地代码修改实现自动刷新：

sequenceDiagram
    participant Browser as 浏览器
    participant BProxy as bproxy
    participant DevServer as 本地开发服务器

    Browser->>BProxy: WebSocket 连接
    BProxy->>DevServer: 转发连接
    DevServer-->>BProxy: 文件变化通知
    BProxy-->>Browser: 触发自动刷新

6. YApi 集成

支持配置 YApi 项目 ID，自动将请求代理到 YApi 的 Mock 数据：

{
  yapi: {
    projectId: '123', // YApi 项目 ID
    // 其他 YApi 配置
  }
}

7. 弱网模拟

支持自定义延时配置，模拟弱网环境测试应用性能：

{ url: 'https://google.com/user', delay: 2000 } // 延迟 2000ms 返回

8. 远程调试

集成 Chrome 开发者工具，支持远程调试功能：

{ url: 'http://m.v.qq.com/tvp', debug: true }

9. 请求异常模拟

可以模拟各种 HTTP 状态码，测试应用的异常处理逻辑：

{ url: 'https://google.com/user', target: 502 } // 返回 502 状态码

10. 草稿功能

快速修改 JSON 响应数据：

{
  url: '/api/json',
  target: function draft(data) {
    data.error = 1001;
  }
}

四、工作原理

1. 请求处理流程

flowchart TD
    Start[客户端发起请求] --> Intercept[bproxy拦截请求]
    Intercept --> Match{匹配规则}
    Match -->|文件映射| File[返回本地文件]
    Match -->|本地服务| Local[转发到本地服务器]
    Match -->|远程代理| Proxy[转发到远程服务器]
    Match -->|Mock数据| Mock[返回Mock数据]
    Match -->|默认行为| Default[正常转发请求]
    File --> Response[返回响应]
    Local --> Response
    Proxy --> Response
    Mock --> Response
    Default --> Response
    Response --> End[客户端接收响应]

2. 规则匹配引擎

bproxy 使用 URL 模式匹配引擎，支持通配符和正则表达式：

• 通配符匹配：https://example.com/api/**
• 正则表达式：支持完整的 JavaScript 正则语法
• 优先级：按配置顺序匹配，先匹配先执行

3. HTTPS 中间人攻击

bproxy 使用 HTTPS 中间人攻击技术实现 HTTPS 抓包：

sequenceDiagram
    participant Client as 客户端
    participant BProxy as bproxy
    participant Server as 目标服务器

    Client->>BProxy: HTTPS请求（连接bproxy证书）
    BProxy->>Server: 建立真实HTTPS连接
    Server-->>BProxy: 返回真实证书
    BProxy-->>Client: 返回bproxy伪造证书
    Client->>BProxy: 发送加密数据（用bproxy公钥加密）
    BProxy->>Server: 转发数据（用服务器公钥加密）
    Server-->>BProxy: 返回响应
    BProxy-->>Client: 返回响应

五、安装与部署

1. 命令行工具安装

# 全局安装
npm i bproxy -g

# 升级到最新版本
npm i bproxy@latest -g

2. 桌面应用

支持 Windows 和 macOS 平台：

• 下载地址：https://www.duelpeak.com/pages/bproxy
• 官网文档：https://www.hahahehe.cn/pages/bproxy
• 工具箱：https://www.hahahehe.cn/tools/

3. 项目配置

在项目根目录创建 bproxy.config.js 文件：

module.exports = {
  port: 8888,
  https: true,
  rules: [
    // 配置代理规则
  ],
};

六、技术优势分析

1. 与传统代理工具对比

2. 适用场景

A. 团队协作开发

配置文件可以提交到 Git 仓库，团队成员共享同一套代理规则，减少环境差异导致的问题。

B. 复杂业务逻辑测试

通过 JavaScript 脚本可以实现复杂的响应处理逻辑，如动态修改数据、模拟各种状态等。

C. 前后端联调

前后端开发者可以使用同一份配置文件，后端开发者提供接口地址，前端开发者配置本地映射。

D. 接口Mock集成

与 YApi 等 Mock 平台集成，自动将请求代理到 Mock 数据。

七、技术实现细节

1. 代理服务器实现

bproxy 基于 Node.js 的 http/https 模块实现代理服务器：

• 监听本地端口（默认 8888）
• 接收客户端请求
• 根据规则引擎匹配处理策略
• 转发或修改请求响应

2. 证书管理

• 自动生成根证书
• 动态生成目标域名证书
• 支持证书安装和信任

3. 规则引擎

规则引擎是 bproxy 的核心，负责：

• URL 模式匹配
• 规则优先级排序
• 目标解析和执行
• 响应内容处理

4. 文件监听

监听本地文件变化，触发 WebSocket 自动刷新：

• 使用 Node.js fs.watch API
• 检测文件修改事件
• 通过 WebSocket 推送刷新指令

八、项目现状

1. 开发状态

根据 GitHub 仓库信息：

• 最后更新：2024 年 5 月 28 日
• 提交次数：336 次
• 贡献者：2 人
• Star 数：277
• Fork 数：13

2. 技术债务

从代码提交记录看：

• 最近一次功能更新是 2024 年 9 月
• 项目活跃度有所下降
• 部分依赖可能需要更新

九、总结与展望

1. 技术价值

bproxy 通过 JavaScript 脚本配置的创新设计，解决了传统代理工具在团队协作和复杂场景下的痛点。其核心理念值得借鉴：

• 配置即代码
• 项目级配置管理
• 针对特定场景深度优化

2. 适用人群

• 前端开发者
• 需要团队协作的开发团队
• 需要复杂代理配置的场景

3. 未来展望

随着前端开发复杂度的提升，类似的开发工具会越来越重要。bproxy 的设计理念代表了开发者工具的一个发展方向：更灵活、更协作、更贴近开发场景。

参考资料

1. bproxy GitHub 仓库
2. bproxy 官方文档
3. bproxy 桌面应用下载