PcapEditor: 一款在线Pcap文件分析与编辑工具

PcapEditor 是一款基于Web的强大工具，旨在提供一个直观、高效的界面，用于分析、编辑和操作网络数据包捕获（.pcap）文件。它结合了强大的后端（Python + Flask + Scapy）和现代化的前端（React + Ant Design），为网络工程师、安全分析师和开发人员提供了一站式的解决方案。

• 📄 Pcap文件上传与解析: 支持上传 .pcap 和 .pcapng 文件，并在浏览器中即时展现数据包内容。
• ↔️ 可调整的分栏视图: 采用垂直分栏布局，用户可以自由调整“数据包列表”、“协议详情”和“十六进制编辑器”三个区域的宽度，以适应不同的分析需求。
• 📜 可排序的数据包列表:
  • 清晰展示每个数据包的关键信息，包括编号、时间戳、源/目标MAC地址、源/目标IP地址、VLAN ID、协议和长度。
  • 支持按列对数据包进行升序或降序排序。
• 🌳 详细的协议树分析:
  • 以树状结构清晰地展示每个数据包的协议分层。
  • 自动解析并高亮显示关键字段，如 MAC 地址、IP 地址和 VLAN ID。
  • 点击协议树节点，可在下方的十六进制视图中自动高亮显示对应的字节范围。
• ✍️ 交互式十六进制编辑器:
  • 直观显示数据包的原始十六进制和ASCII表示。
  • 支持双击单个字节进行编辑，并实时验证输入。
  • 在选择协议树节点时，自动高亮显示相关字节。
• 🕒 时间戳编辑:
  • 展示每个数据包的原始时间戳、本地时间（UTC+8）以及分解后的时间。
  • 支持直接编辑原始时间戳值，以进行精确的时间调整。
• 🗑️ 数据包删除:
  • 在数据包列表中，可以方便地删除单个数据包。
  • 操作前会进行二次确认，防止误删。
• ↩️ 撤销与重做 (Undo/Redo):
  • 支持对编辑、删除等操作进行撤销和重做。
  • 执行撤销/重做后，十六进制视图会自动高亮显示被更改的字节，让变化一目了然。
• 💾 保存与下载:
  • 所有对数据包的修改（包括内容编辑、时间戳更改、删除操作）都可以保存。
  • 用户可以将修改后的结果下载为新的 .pcap 文件。

• 后端:
  • Python 3: 作为主要的编程语言。
  • Flask: 轻量级的Web服务框架，用于构建RESTful API。
  • Scapy: 强大的数据包处理库，负责pcap文件的解析、操作和生成。
  • Flask-CORS: 处理跨域资源共享。
• 前端:
  • React: 用于构建用户界面的JavaScript库。
  • Ant Design: 一套优秀的企业级UI组件库，提供了丰富的预置组件。
  • Axios: 用于处理与后端API的HTTP通信。
  • Allotment: 用于实现可调整的分栏布局。

PcapEditor/
├── backend/         # 后端Flask应用
│   ├── app.py       # API逻辑和Scapy核心处理
│   ├── requirements.txt # Python依赖
│   └── ...
└── frontend/        # 前端React应用
    ├── public/
    ├── src/         # React组件和业务逻辑
    ├── package.json # Node.js依赖
    └── ...

1. 进入后端目录:

   cd PcapEditor/backend

2. 创建并激活虚拟环境:

   python3 -m venv venv
   source venv/bin/activate

3. 安装依赖:

   pip install -r requirements.txt

4. 启动后端服务:

   python app.py

   服务默认运行在 http://127.0.0.1:5001。

1. 进入前端目录:

   cd PcapEditor/frontend

2. 安装依赖:

   npm install

3. 启动前端开发服务器:

   npm start

   应用将在浏览器中自动打开，地址为 http://localhost:3000。

1. 确保前端和后端服务都已成功启动。
2. 在浏览器中打开 http://localhost:3000。
3. 点击“上传Pcap文件”按钮，选择一个 .pcap 或 .pcapng 文件。
4. 文件上传后，即可开始进行分析和编辑操作。
5. 完成编辑后，点击“保存文件”按钮，即可下载修改后的pcap文件。