基于|基于 electron 实现简单易用的抓包、mock 工具
背景
经常我们要去看一些页面所发出的请求时,经常会用到 Charles 做为抓包工具来进行接口抓取,但一方面市面是很多抓包工具都是收费或者无法二次开发的。当前我们团队大多数用的也都是 Charles,但是对于一般新手来说,单纯想抓个包或者修改和接口返回数据,直接上手 Charles 不管配置成本和学习成本都相对较高。所以我们有必要自己按照自己最爽的状态来撸一个适合自己的抓包工具。
结果
基于以上诉求,我们自己重新设计并修改了交互,搞了一个符合我们诉求,使用简单的桌面端抓包工具。本身这个插件是可以集成到 utools
里面的,但是由于很多涉及到内部的功能,我们没法通过 utools 进行发布,所以我们自己做了一个可以使用 utools 所有生态的工具箱 Rubick
。此次抓包工具也是基于 Rubick
的插件工具。
试玩地址:
Rubick: https://github.com/clouDr-f2e...
抓包插件:https://github.com/clouDr-f2e...
这次我们先不看代码,直接来看我们实现的抓包工具的效果:
支持HTTP/HTTPS请求抓取。
文章图片
支持接口mock
只需要将需要mock
的接口,右击加入 mock
即可完成对接口数据的mock
动作,后续所有接口请求将会走到该mock场景:
文章图片
支持代理转发
文章图片
如何使用
首先我们需要clone Rubick
工具箱,他是一个基于 Electron
的类似于 utools
的工具箱,
仓库地址:Rubick: https://github.com/clouDr-f2e... 然后可以本地运行:
npm i
npm run dev
之后我们会看到这样的界面:
![基于|基于 electron 实现简单易用的抓包、mock 工具](https://img.it610.com/image/info9/66b4c355152a4bb1b81875f65c0235b6.jpg)
文章图片
如果熟悉
utools
的同学,可以直接略过后面的步骤了。然后再
clone
下 rubick-network 插件,一切准备就绪后,直接复制 rubick-network
下的 plugin.json
到 rubick
输入框 选择新建插件即可看到插件信息:![基于|基于 electron 实现简单易用的抓包、mock 工具](https://img.it610.com/image/info9/39b61df3c4b84fdeaa925f8407f7fabe.jpg)
文章图片
然后开启插件,即可进行搜索使用!
![基于|基于 electron 实现简单易用的抓包、mock 工具](https://img.it610.com/image/info9/582735ab45e240f7b72bcfdfaaa96df2.jpg)
文章图片
相比
utools
而言,rubick
最大的优势是开源!!! 欢迎社区一起建设完善 rubick
。技术实现 以后我们再来介绍一下是如何实现这样一款抓包代理工具的。在实现抓包代理工具之前,首先大家需要去自学一下关于 nodejs 实现代理 的一些知识点,这里推荐几篇不错的文章:
HTTP 代理原理及实现(一)
HTTP 代理原理及实现(二)
简单来讲就是要实现一个中间人,用户通过设置代理,网络请求就会通过中间人代理,再发往正式服务器。
这种中间人的实现方式有两种。
一种为普通的HTTP代理,通过Node.js开启一个HTTP服务,并将我们的浏览器或手机设置到该服务所在的ip和端口,那么HTTP流量就会经过该代理,从而实现数据的拦截。
![基于|基于 electron 实现简单易用的抓包、mock 工具](https://img.it610.com/image/info9/f938feb80a0045c4adf2f6c86b38607d.jpg)
文章图片
对于非HTTP请求,比如HTTPS, 或其他应用层请求。可以通过在Node.js 中开启一个TCP服务,监听CONNECT请求,因为应用层也是基于传输层的,所以数据在到达应用层之前会首先经过传输层,从而我们能实现传输层数据监听。
![基于|基于 electron 实现简单易用的抓包、mock 工具](https://img.it610.com/image/info9/7e83f723eaa140ad85cf8ddc16af4051.jpg)
文章图片
但是对于CONNECT捕抓到的请求,无法获取到HTTP相关的信息,包括头信息等,这对一般的前端分析作用不大,那么想要真正监听HTTPS,还需要支持证书相关的验证。
关于证书如何生成网上也有很多教程,这里就不在赘述,可以自行百度。不过看了一圈别人的设计,自己再动手实现一个 http 代理服务就是轻而易举的事情了,但是为了更加快捷的实现功能,这里我们选择了
anyproxy
作为基础服务,站在巨人的肩膀上进行开发。anyproxy
安装后提供了一个 websocket
服务,我们只需要监听 websocket
端口对代理过来的数据进行动态展示即可:function initWs(wsPort = 8002, path = 'do-not-proxy') {
if(!WebSocket){
throw (new Error('WebSocket is not supported on this browser'));
}const wsClient = new WebSocket(`ws://localhost:${wsPort}/${path}`);
wsClient.onerror = (error) => {
console.error(error);
};
wsClient.onopen = (e) => {
console.info('websocket opened: ', e);
};
wsClient.onclose = (e) => {
console.info('websocket closed: ', e);
};
return wsClient;
}// 链接websocket
const connectWs = () => {
const wsClient = ws.initWs();
wsClient.addEventListener('message', (e) => {
const data = https://www.it610.com/article/JSON.parse(e.data);
store.commit('addRecord', data.content);
});
}
但是
anyproxy
仅仅提供 node
端的能力,所以正好 electron
可以使用 nodejs
能力,也就是我们可以借助 electron
来实现 nodejs
能力。这里由于我们是插件化的,所以参考 utools
的设计,实现方式如下:// preload.js
const AnyProxy = require('anyproxy');
const options = {
port: 8001,
webInterface: {
enable: true,
webPort: 8002
},
forceProxyHttps: true,
wsIntercept: false, // 不开启websocket代理
silent: true
};
class Network {
constructor() {
this.mockList = [];
this.proxyServer = null;
}
initNetwork(op, {
beforeSendRequest,
beforeSendResponse,
success,
onRecord,
}) {
if (op === 'start') {
if (!this.proxyServer || !this.proxyServer.recorder) {
const _this = this;
options.rule = {
*beforeSendRequest(requestDetail) {
if (beforeSendRequest) {
return beforeSendRequest(requestDetail);
}
return requestDetail
},
*beforeSendResponse (requestDetail, responseDetail) {
if (beforeSendResponse) {
return beforeSendResponse(requestDetail, responseDetail);
}
return responseDetail;
}
};
this.proxyServer = new AnyProxy.ProxyServer(options);
this.proxyServer.once('ready', () => {
console.log('启动完成');
success && success(this.proxyServer);
});
}
this.proxyServer.start();
} else {
AnyProxy.utils.systemProxyMgr.disableGlobalProxy('http');
AnyProxy.utils.systemProxyMgr.disableGlobalProxy('https');
this.proxyServer.close();
success && success();
}
}
getIPAddress() {
const interfaces = require('os').networkInterfaces();
for (const devName in interfaces) {
const iface = interfaces[devName];
for (let i = 0;
i < iface.length;
i++) {
const alias = iface[i];
if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
return alias.address;
}
}
}
}
}
只需要在
preload.js
中加上 anyproxy
服务的实现,即可完成我们的诉求!结语 什么是
rubick
?基于 electron 的工具箱,媲美 utools的开源插件,已实现 utools 大部分的 API 能力,所以可以做到无缝适配 utools 开源的插件。 之所以做这个工具箱一方面是 utools 本身并未开源,但是公司内部的工具库又无法发布到 utools 插件中,所以为了既要享受 utools 生态又要有定制化需求,我们自己参考 utools 设计,做了 Rubick.
欢迎大家给
rubick
pr 和提 issue 帮助我们完善Rubick: https://github.com/clouDr-f2e...
相关参考:
HTTP 代理原理及实现(一)
HTTP 代理原理及实现(二)
【基于|基于 electron 实现简单易用的抓包、mock 工具】Electron + Vue 实现一个代理客户端
推荐阅读
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 基于爱,才会有“愿望”当“要求”。2017.8.12