上一篇文章《TrafficShark - 弱网模拟&抓包利器》介绍了TrafficShark的功能和环境搭建,TrafficShark是一个完全开源的项目,本文主要是介绍整体设计,并结合实际项目给大家展示TrafficShark的扩展和自定义设计。由于时间有限,设计还有很大的改善空间,而且还有一些问题(如https/tls/dtls抓包解析)的自动化方案未能实现。在文章的末尾留下了钉钉群二维码,对TrafficShark有兴趣的小伙伴欢迎进群一起探讨。

1. TrafficShark整体设计介绍


正如上文提到,TrafficShark主要由两大块组成:

  1. TrafficSharkService - 用于后台运行的service,负责核心的设备网络设置、抓包、记录等功能
  2. TrafficSharkConsole - 用于前台展示的Web控制台,负责展示并与TrafficSharkService通讯

TrafficSharkConsole和TrafficSharkService之间通讯主要基于thrift, thrift描述文件在traffic-shark-console项目根目录的traffic_shark_thrift.thrift中。

下面是整体的各个角色设备和示例图,详细配置请参考上一篇文章,接下来的相关实现和一些默认参数将会以下图的为准。

1.1 TrafficSharkService


TrafficSharkService项目地址在这里,主要负责以下能力:

  1. 对指定网络接口(如waln0)的指定ip(如172.24.1.100)设置相关网络环境参数(如带宽设置、丢包率设置)
  2. 对指定测试设备进行实时抓包,并把结构化的包数据放在内存中
  3. 持久化相关网络配置(network profile)

1.1.1 代码目录与文件简介

traffic-shark-service
|
|-traffic_shark_thrift: 放置thrift生成的相关序列化处理类,文件自动生成,不用编辑
|
|-tsd: trafficshark daemon核心逻辑目录
| |
| |-backends
| | |-linux.py: 封装linux下调用tc(Traffic Control)相关接口
| |
| |-protocols
| | |-coap_example.py: 自定义coap协议解释示例
| | |-http_example.py: 自定义http协议解释示例
| |
| |-scripts
| | |-runner.py: 服务启动入口
| |
| |-TsdDBQueueTask.py: 数据库异步处理任务队列
| |-TsdScapyTask.py: 基于scapy的抓包任务队列
| |-TsdThriftHandlerTask.py: thrift服务配置和thrift接口实现
| |-TsdVService.py: sparts框架的vservice类实现
| |-db_manager.py: 数据库处理相关SQL封装
| |-idmanager.py: 生成和管理唯一id类
| |-packet_to_json.py: 把包数据转换成可读json数据的处理工具函数
|
|-install.sh: trafficshark service安装脚本
|-run.sh: trafficshark service运行脚本,运行时需要加管理员权限
|-run_service.py: 运行服务的入口
|-traffic_shark_thrift.thrift: 相关接口和类型描述文件

1.1.2 项目依赖简介

  1. thrift: 用来做console与service的通讯,主要负责RPC通讯和协议处理自动化生成
  2. pyroute2: 基于netlink调用kernel的相关服务,项目中主要用来调用tc的接口
  3. scapy: 开源的很好用的包控制处理库,使用了它的抓包、协议处理能力
  4. sparts: 一个简单的服务框架,主要使用了它的thrift服务和任务能力,整个服务模型基于此框架

PS. 由于设置filter是直接使用scapy的sniff函数,filter遵循bpf格式,具体语法可参考这里

1.2 TrafficSharkConsole


TrafficSharkConsole项目地址在这里,主要负责以下能力:

  1. 通过thrift与trafficshark service通讯
  2. 控制台UI展示和事件处理

1.2.1 代码目录与文件简介

TrafficSharkConsole基于DjangoRestFramework, UI部分主要基于ReactJS, 一些通用的配置文件(如settings.py, urls.py, css等)不作详细解释, 这里主要介绍关键文件

traffic-shark-console
|
|-traffic_shark_api: 
| |
| |-static/js
| | |-ts-api.js: 提供js层的restful接口调用异步封装
| |
| |-tsd_client.py: 负责初始化socket,并连接到trafficshark service
| |-serializers.py: 负责与thrift的类型互转的序列化类
| |-views.py: 核心实现了所有restful接口,调用trafficshark service相关接口并返回
|
|-traffic_shark_thrift: 放置thrift生成的相关序列化处理类,文件自动生成,不用编辑
|
|-traffic_shark_ui: trafficshark console的前端UI部分
| |
| |-static
| | |
| | |-css: css相关文件
| | |-image: web图片
| | |-vendor
| | | |-react: reactjs库文件
| | | |-mixin.js: mixin实现库
| | | |-react-g2.js: 集团的g2图表实现库
| | |
| | |-js
| | | |-ts-capture-general-tab.js: 抓包页-Gernal页
| | | |-ts-capture-detail-tab.js: 抓包页-Detail页
| | | |-ts-capture-example-tab.js: 抓包页-Example页,扩展UI示例,下文会有详细介绍
| | | |-ts-capture-panel.js: 抓包管理弹出框
| | | |-ts-machine-panel.js: 设备管理面板
| | | |-ts-profile-panel.js: 网络配置管理面板
| | | |-ts-setting-panel.js: 网络设置弹出框
| | | |-ts-ui.js: 整体UI入口
| | | |-ts-utils.js: 辅助工具函数
| |
| |-templates
| | |-base.html: UI主体页面框架
| | |-index.html: UI入口html页面
| |
| |-settings.py; urls.py; views.py; wsgi.py: Django框架通用文件

1.1.2 项目依赖简介

  1. reactjs: console使用的主要ui库
  2. g2: 蚂蚁打造的数据图形库,用于抓包显示
  3. django rest framework: 整体web框架

2. 扩展实战示例


目前在扩展上,TrafficShark支持2大类型的快速扩展:

  1. 自定义抓包协议扩展: 支持对私有协议的解析并展示
  2. 自定义抓包展示扩展: 支持对获取的数据包进行自定义展示

2.1 示例项目简介


本示例项目主要是在一个嵌入式芯片(esp32开发板)上,基于CoAP协议和设备服务器建立通讯的过程。 CoAP协议是一个受限的应用层协议,主要用于IoT场景,对此协议感兴趣的同学可以看这里。基于CoAP协议,可以快速的在嵌入式芯片上和云服务打通,而且通讯成本和功耗都有一定优势。

这里的示例项目是实际项目中的一个调研项目,代码不能开源出来,敬请理解

基于TrafficShark,可以在1天之内快速扩展并应用到测试项目中,这里主要扩展了对CoAP协议的支持,和对私有http包的解析。

2.1.1 抓包协议扩展

协议扩展能力完全基于scapy的Adding new protocols,可以自己添加协议解析器并绑定。在TrafficShark Service中,只需要在tsd/protocols目录中,添加任意文件,并在内部加上私有协议解析即可。

在示例代码中已有coap_example.pyhttp_examply.py两个文件,主要作用是对项目中的CoAP和私有Http协议进行解析。

在支持CoAP和Http协议前,抓包Detail页显示如下:

在支持CoAP和Http协议解析之后,抓包Detail页将能自动展示相关包字段和信息:

点开每一行还能看到协议细节内容:

2.1.2 抓包展示扩展

界面扩展同样很简单,在TrafficShark Console中要添加自定义的抓包展示扩展只需要按下面几步完成:

  1. 添加自己的ts-capture-xx-tab,并添加相应React Component,可参考traffic_shark_ui/static/js/ts-capture-example-tab.js
  2. 在ts-capture-panel.js最下方的render里,按照格式添加新的标签,参考<TrafficCaptureExampleTab>
  3. 在base.html里,把新加入的js文件添加到<head>,可参考traffic_shark_ui/templates/base.html中的Tab Example

在自己扩展的tab组件中,所有的包都在this.props.active属性中,this.props.active的值可参考下图:

完成添加后,重新加载页面,即可看到新增的Example Tab,点开后,可以看到UI:

结语


相信很多客户端同学在实际开发中,都会需要与服务端通讯。很多时候网络对我们来说就是一个黑盒,我们看不到数据在网络中的流动情况和数据的真实面貌,更不用说操纵这个黑盒,模拟各种环境来做测试。

TrafficShark项目主要也是希望能帮助大家来透视这个黑盒,方便大家模拟网络环境和抓包,同时也希望通过开源,有更多同学聚到一起把工具一点点完善,下面是这个工具的钉钉群二维码,对此项目有兴趣的欢迎入群一起交流。



评论需要翻墙 for disqus