一探究竟！Whistle拦截HTTPS是如何实现的？-技术圈

导语 | 本文主要介绍Whistle的实现原理，通过这篇文章读者可以了解Whistle的具体实现过程，并且自己也可以实现一个简单的抓包调试工具。

项目Github地址：https://github.com/avwo/whistle

Whistle是基于Node实现的跨平台Web抓包调试（HTTP）代理，主要功能：

实时抓包：支持HTTP、HTTPS、HTTP2、WebSocket、TCP等常见Web请求

修改请求响应：与一般抓包调试工具采用断点的方式不同，Whistle采用类似系统host的配置规则方式

扩展功能：支持通过Node编写插件，或作为独立NPM包引入项目两种扩展方式

本文将从最基本的概念开始逐步实现Whistle功能，包含以下内容：

什么是HTTP代理

实现简单HTTP代理

完整HTTP代理架构（Whistle）

各个模块的实现原理

参考资料

一、什么是HTTP代理

代理是客户端到服务端的中转服务，其中：

不经过代理的请求：客户端和服务端直接建立连接后，即可开始交换数据

经过代理的请求：客户端不与服务端直接建立连接，而是先跟代理建立连接后，将目标服务器的地址发送给代理，通过代理再跟服务端建立连接，这里如果代理服务为HTTP Server，则称为HTTP代理。

接下来看下客户端如何将目标服务器地址传给HTTP代理，以及HTTP代理如何跟目标服务器建立连接。

二、实现简单HTTP代理

先看一个用Node实现的最简单HTTP代理：

const http = require('http');const { connect } = require('net');
/****************** 工具方法 ******************/const getHostPort = (host, defaultPort) => {  let port = defaultPort || 80;  const index = host.indexOf(':');  if (index !== -1) {    port = host.substring(index + 1);    host = host.substring(0, index);  }  return {host, port};};
const getOptions = (req, defaultPort) => {  // 这里假定 host 一定存在，完整实现参见 Whistle  const { host, port } = getHostPort(req.headers.host, defaultPort);  return {    hostname: host, // 指定请求域名，用于通过 DNS 获取服务器 IP 及设置请求头 host 字段    port, // 指定服务器端口    path: req.url || '/',    method: req.method,    headers: req.headers,    rejectUnauthorized: false, // 给 HTTPS 请求用的，HTTP 请求会自动忽略  };};
// 简单处理，出错直接断开，完整实现逻辑参考 Whistleconst handleClose = (req, res) => {  const destroy = (err) => { // 及时关闭无用的连接，防止内存泄露    req.destroy();    res && res.destroy();  };  res && res.on('error', destroy);  req.on('error', destroy);  req.once('close', destroy);};
/****************** 服务代码 ******************/const server = http.createServer();// 处理 HTTP 请求server.on('request', (req, res) => {  // 与服务端建立连接，透传客户端请求及服务端响应内容  const client = http.request(getOptions(req), (svrRes) => {    res.writeHead(svrRes.statusCode, svrRes.headers);    svrRes.pipe(res);  });  req.pipe(client);  handleClose(res, client);});
// 隧道代理：处理 HTTPS、HTTP2、WebSocket、TCP 等请求server.on('connect', (req, socket) => {  // 与服务端建立连接，透传客户端请求及服务端响应内容  const client = connect(getHostPort(req.url), () => {    socket.write('HTTP/1.1 200 Connection Established\r\n\r\n');    socket.pipe(client).pipe(socket);  });  handleClose(socket, client);});
server.listen(8080);

上述代码实现了一个具有转发请求功能的HTTP代理，从代码可知HTTP代理就是一个普通的HTTP Server，并监听request和connect这两个事件，客户端会通过这两个事件将目标服务器地址传过来，其中：

request：一般普通HTTP会通过该事件将目标服务器地址传过来。

connect：一般非HTTP请求，如HTTPS、HTTP/2、WebSocket、TCP等会通过该事件将目标服务器地址传过来，触发该事件的代理请求也叫隧道代理。

可以在事件里面的req.url或req.headers.host获取目标服务器的地址（host:port），再跟该服务器地址建立连接并将结果通过HTTP响应的方式返回给客户端，这里只是实现代理的最基本功能，完整的HTTP除了请求转发，至少应该还有：

查看实时抓包；

解析HTTPS请求；

修改请求响应内容；

扩展功能。

下面以Whistle为例看下如何用Node.js实现一个完整的HTTP代理。

三、完整HTTP代理架构（Whistle）

主要分五个模块：

请求接入模块

隧道代理模块

处理HTTP请求模块

规则管理模块

插件管理模块

四、具体实现原理

下面分别看下这五个模块具体是怎么实现的。

（一）请求接入模块

所有请求先会经过请求接入模块，Whistle支持四种请求接入方式：

HTTP&HTTPS直接请求：相当于配hosts或DNS的方式，将请求转发到Whistle；

HTTP代理：Whistle默认接入方式，即配系统代理或通过浏览器插件配 HTTP代理的方式；

HTTPS代理：在HTTP代理之上对代理请求进行了加密，即HTTPS Server，可以通过指定证书转成HTTP代理请求；

Socks5代理：利用npm包socksv5转成普通的TCP请求，并将TCP请求转成隧道代理请求。

实现原理：将所有请求都转成HTTP代理的隧道代理请求或HTTP请求，再解析隧道代理请求转成HTTP请求。

如何将普通tcp请求转成隧道代理请求参见：lack-proxy

下面看下如何从隧道代理请求解析出HTTP请求。

（二）隧道代理模块

关键点（HTTP请求也可以走隧道代理）：

通过匹配的全局规则判断是否要解析隧道代理请求，如果不解析，则当成普通TCP请求处理；

如果需要，则通过socket.once('data', handler) 读取请求点第一帧数据；

将第一帧数据转成字符串，通过正则/^(\w+)\s+(\S+)\s+HTTP\/1.\d$/mi是否是HTTP请求？如果是HTTP请求，再判断下是否是CONNECT请求，即隧道代理请求（隧道代理请求也可以代理隧道代理请求），如果是，则转回隧道代理方法处理，如果不是，则转到HTTP请求模块处理；

如果不是HTTP请求，则当成HTTPS请求处理，这里需要用到中间人的方式将HTTPS请求转成HTTP请求；

Whistle会先按以下顺序获取请求证书：

通过匹配的插件获取（可以通过规则 sniCallback://plugin 指定加载证书的插件）；

通过启动参数-z certDir指定目录或~/.WhistleAppData/custom_certs 加载的自定义证书；

如果没有上述两种自动证书，Whistle会自动生成一个默认的证书。

获取到证书后，再利用该证书启动一个HTTPS Server，将HTTPS请求转成HTTP请求交给HTTP请求模块处理。

（三）HTTP请求处理模块

HTTP 请求处理可以分两个阶段：

请求阶段：

匹配全局规则；

如果规则里类似whistle.xx的规则，执行对应插件钩子，获取插件规则并跟匹配的全局规则合并；

执行规则、记录状态并请求到指定服务。

响应阶段：

执行匹配插件的钩子，获取插件规则并跟匹配的全局规则合并；

执行规则、记录状态并请求返回客户端。

（四）规则管理

与传统抓包调试代理采用断点修改请求响应数据不同，Whistle采用配置规则的方式修改请求响应，采用配置方式的好处是操作简单，且可以将操作持久化存储及共享给他人，先看几个例子：

Whistle的规则管理主要两个功能：解析规则、匹配规则。

解析规则

Whistle有两类规则：

全局规则（公共规则），所有请求都会尝试匹配的规则，由以下规则组成：

界面Rules配置的规则；

文档：https://github.com/whistle-plugins/whistle.autosave/blob/master/rules.txt

界面或插件rules.txt通过@url方式引入的远程规则（要单独一行，Whistle会定时更新远程规则）。

插件规则（私有规则），即进入插件的请求（匹配的全局规则里有whistle.xxx协议）才会匹配到的规则，由以下规则组成：

文档：https://wproxy.org/whistle/plugins.html

插件reqRulesServer等hooks动态返回；

插件根目录_rules.txt等文件配置的静态规则。

匹配规则

Whistle规则的完整结构为：

文档：https://wproxy.org/whistle/mode.html

（五）插件管理

Whistle插件的功能很多，不仅具备Node的所有能力，且可以操作Whistle的所有规则（理论上可以基于插件实现一个Whistle），主要用来做以下事情：

鉴权功能

提供UI交互界面

作为请求Server（直接响应或转发并修改请求响应）

统计请求信息（查看上报/打点数据等）

设置规则（动态、静态、全局及私有规则）

获取抓包数据

编解码请求响应数据流（pipe stream功能）

扩展界面右键菜单（如：分享抓包数据）

保存并同步Rules&Values数据

自定义HTTPS请求的证书

比如：

whistle.script：实现通过自定义脚本动态设置规则

whistle.vase：提供灵活强大的mock能力

whistle.inspect：方便快速注入vConsole、eruda等页面调试工具

whistle.sni-callback：自定义证书插件

其它插件例子参见：https://github.com/whistle-plugins

Whistle是如何实现插件功能？主要遵循以下三个设计原则：

完备性

确保所有功能点都可扩展，如：请求鉴权、生成证书、获取抓包、设置规则、请求处理等。

稳定性

插件内部异常不影响其它功能，Whistle的每个插件独立进程，插件与Whistle之间通过HTTP协议交互。

Whistle是使用npm包pfork来启动插件进程，进程间的交换是直接通过Node的http模块实现的），方便开发者利用http的生态开发插件。

易用性

方便用户开发及使用。

开发：结构简单 (npm包) + 脚手架lack；

使用：安装npm包即可，用法跟内置协议一样，且可内置交互界面。

有关插件的更多细节参见：https://wproxy.org/whistle/plugins.html

事实上，Whistle除了支持插件扩展，还可以同时作为独立模块引入项目使用；除了本地开发使用，也可以基于Whistle开发出支持多人使用的开发联调协作工具，比如后面会给大家介绍其实现原理的：

基于Whistle实现的多人多环境远程抓包调试工具

Nohost：https://github.com/Tencent/nohost

基于Whistle和Nohost实现的分布式远程抓包调试工具TDE等

TDE目前只在腾讯内部使用，后续后逐步对外开源。

参考资料：

1.Github仓库：https://github.com/avwo/whistle

2.官方插件仓库：https://github.com/whistle-plugins

3.详细文档：https://wproxy.org/whistle/

作者简介

吴文斌（avenwu）

腾讯前端高级工程师

腾讯前端高级工程师，Whistle、Nohost作者，目前主要负责团队的Node服务框架及效率工具的开发维护工作。

推荐阅读

它来了，关于Golang并发编程的超详细教程！

有的放矢，远程操控中实时音视频的优化之道

TVP三周年：聚力成长，共赴新篇！

代码质量第5层-只是实现了功能

一探究竟！Whistle拦截HTTPS是如何实现的？

（一）请求接入模块

（二）隧道代理模块

（三）HTTP请求处理模块

解析规则

匹配规则

（五）插件管理