基于 electron 实现简单易用的抓包、mock 工具
背景
经常我们要去看一些页面所发出的请求时,经常会用到 Charles 做为抓包工具来进行接口抓取,但一方面市面是很多抓包工具都是收费或者无法二次开发的。当前我们团队大多数用的也都是 Charles,但是对于一般新手来说,单纯想抓个包或者修改和接口返回数据,直接上手 Charles 不管配置成本和学习成本都相对较高。所以我们有必要自己按照自己最爽的状态来撸一个适合自己的抓包工具。
结果
基于以上诉求,我们自己重新设计并修改了交互,搞了一个符合我们诉求,使用简单的桌面端抓包工具。本身这个插件是可以集成到 utools
里面的,但是由于很多涉及到内部的功能,我们没法通过 utools 进行发布,所以我们自己做了一个可以使用 utools 所有生态的工具箱 Rubick
。此次抓包工具也是基于 Rubick
的插件工具。
试玩地址:
Rubick: https://github.com/clouDr-f2e/rubick
抓包插件:https://github.com/clouDr-f2e/rubick-network
这次我们先不看代码,直接来看我们实现的抓包工具的效果:
支持HTTP/HTTPS请求抓取。
支持接口mock
只需要将需要mock
的接口,右击加入 mock
即可完成对接口数据的mock
动作,后续所有接口请求将会走到该mock场景:
支持代理转发
如何使用
首先我们需要clone Rubick
工具箱,他是一个基于 Electron
的类似于 utools
的工具箱,
仓库地址:Rubick: https://github.com/clouDr-f2e/rubick 然后可以本地运行:
npm i
npm run dev
之后我们会看到这样的界面:
如果熟悉 utools
的同学,可以直接略过后面的步骤了。
然后再 clone
下 rubick-network 插件,一切准备就绪后,直接复制 rubick-network
下的 plugin.json
到 rubick
输入框 选择新建插件即可看到插件信息:
然后开启插件,即可进行搜索使用!
相比 utools
而言,rubick
最大的优势是开源!!! 欢迎社区一起建设完善 rubick
。
技术实现
以后我们再来介绍一下是如何实现这样一款抓包代理工具的。在实现抓包代理工具之前,首先大家需要去自学一下关于 nodejs 实现代理 的一些知识点,这里推荐几篇不错的文章:
简单来讲就是要实现一个中间人,用户通过设置代理,网络请求就会通过中间人代理,再发往正式服务器。
这种中间人的实现方式有两种。
一种为普通的HTTP代理,通过Node.js开启一个HTTP服务,并将我们的浏览器或手机设置到该服务所在的ip和端口,那么HTTP流量就会经过该代理,从而实现数据的拦截。
对于非HTTP请求,比如HTTPS, 或其他应用层请求。可以通过在Node.js 中开启一个TCP服务,监听CONNECT请求,因为应用层也是基于传输层的,所以数据在到达应用层之前会首先经过传输层,从而我们能实现传输层数据监听。
但是对于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 = 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/rubick
相关参考:
基于 electron 实现简单易用的抓包、mock 工具的更多相关文章
- 基于RxJava2+Retrofit2简单易用的网络请求实现
代码地址如下:http://www.demodashi.com/demo/13473.html 简介 基于RxJava2+Retrofit2实现简单易用的网络请求,结合android平台特性的网络封装 ...
- 简单易用的leetcode开发测试工具(npm)
描述 最近在用es6解leetcode,当问题比较复杂时,有可能修正了新的错误,却影响了前面的流程.要用通用的测试工具,却又有杀鸡用牛刀的感觉,所以就写了个简单易用的leetcode开发测试工具,分享 ...
- wireshark抓包分析工具的使用
# wireshark抓包分析工具的使用 ## 常用抓包指令 - `ip.src==192.168.60.26 and ip.dst==111.7.187.220 and tcp.port == 80 ...
- 推荐一款简单易用线上引流测试工具:GoReplay
一. 引流测试产生背景 日常大部分的测试工作都是在测试环境下,通过模拟用户的行为来对系统进行验证,包括功能以及性能.在这个过程中,你可能会遇到以下问题: 用户访问行为比较复杂,模拟很难和用户行为一致, ...
- Wireshark抓包工具的简单使用2(抓包、查看、过滤)
在简单了解了Wireshark的界面以及各工具栏的作用后,也要掌握如何进行抓包,查询,过滤等操作 一.抓包 1.打开软件,初始界面 2.点击Caputre-->Interfaces,出现当前所有 ...
- 用Web抓包分析工具Livepool 实现本地替换开发
这是官方的介绍: LivePool 是一个基于 NodeJS,类似 Fiddler 支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷 ...
- 安全测试6_Web安全工具第二节(代理抓包分析工具)
上节课讲了浏览器及扩展,这节课继续来学习下抓包分析. 首先看下下图,了解下代理工具的原理:代理就相当于收费站一样,任何要通过的车辆必须经过它. 浏览器的代理我们可以通过设置进行手动设置代理,或者通过P ...
- Wireshark网络抓包(四)——工具
一.基本信息统计工具 1)捕获文件属性(Summary) 1. File:了解抓包文件的各种属性,例如抓包文件的名称.路径.文件所含数据包的规模等信息 2. Time:获悉抓包的开始.结束和持续时间 ...
- Charles 抓包的工具
下面是整个链接. http://www.winshy.com/2013/08/something_about_charlesproxy/?utm_source=rss Charles:移动端抓包工具安 ...
随机推荐
- .Net·如何快速上手一个项目?
阅文时长 | 0.61分钟 字数统计 | 1029.6字符 主要内容 | 1.引言&背景 2.步入正题,如何快速上手一个项目? 3.声明与参考资料 『.Net·如何快速上手一个项目?』 编写人 ...
- github祥解
github介绍 安装 仓库创建& 提交代码 代码回滚 工作区和暂存区 撤销修改 删除操作 远程仓库 分支管理 多人协作 github使用 忽略特殊文件.gitignore 为什么要用版本控制 ...
- rsync同步遇到的报错和解决办法
rsync同步遇到的报错和解决办法 科技小能手 2017-11-12 18:27:00 浏览1125 配置 code 同步 open stream file read 在同步的客户端操作: [ ...
- Docker Swarm(三)Service(服务)分配策略
Service的分配原則 預設分散至多個nodes上 使用率較低的node優先配置 使用者可自行定義此分配模式 Service分配的3種方式 Service Constraints (服务约束) 参考 ...
- ceph总结复习
一.ceph概念 Ceph是一种为优秀的性能.可靠性和可扩展性而设计的统一的.分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展. 什么是块存储/对象存 ...
- CSS 重置技术
元素默认样式显示问题 每个浏览器对不同元素都有自己的默认样式.Google Chrome 渲染正文标题.段落.列表等,与 IE 浏览器可能都有所不同.这就导致同一个页面元素在不同的浏览器中显示效果不一 ...
- linux stat函数讲解 -(转自秋水Leo)
stat函数讲解表头文件: #include <sys/stat.h> #include <unistd.h>定义函数: int stat( ...
- JQuery 基础之基本选择器
1.什么是jQuery选择器: jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名.属性名或内容对DOM元素进行快速.准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对 ...
- 十一、.net core(.NET 6)搭建ElasticSearch(ES)系列之ElasticSearch、head-master、Kibana环境搭建
搭建ElasticSearch+Kibana环境 前提条件:已经配置好JDK环境以及Nodejs环境.如果还未配置,请查看我的上一篇博客内容,有详细配置教程. 先下载ElasticSearch(以下文 ...
- AtCoder Regular Contest 121 D - 1 or 2
题目链接:点我点我 Problem Statement Snuke has a blackboard and NN candies. The tastiness of the ii-th candy ...