pacmap

PacMap은 그래프 기반 네트워크 트래픽 시각화 도구로, 실시간 캡처 및 PCAP 재생을 지원하며, 무엇이 변경되었는지, 어떤 트래픽이 노이즈인지, 다음에 무엇을 검사해야 할지 파악하는 데 도움을 줍니다.

네트워크 동작을 위한 Git이라고 생각하면 됩니다: 네트워크 상태를 스냅샷, 차이(diff), 재생할 수 있습니다.

입력 모드

PacMap은 두 가지 워크플로를 지원합니다:

• 실시간 캡처 — 로컬 인터페이스에서 현재 발생하는 상황을 검사합니다.
• PCAP 재생 — 저장된 .pcap 또는 .pcapng 파일을 업로드하고 시간에 따라 패킷 흐름을 재생합니다.

설치

저장소 루트에서:

python3 -m venv venv
source venv/bin/activate
pip install websockets scapy
npm install --prefix client

Windows에서는 일반적인 Python 워크플로를 사용하여 venv를 만들고 활성화한 다음 동일한 패키지를 설치합니다. Windows에서 패킷 캡처를 하려면 Npcap이 필요합니다.

실시간 캡처

저장소 루트에서 PacMap을 시작합니다:

npm start -- --iface en0

일반적인 인터페이스 예시:

• macOS Wi-Fi: en0
• Linux 이더넷: eth0
• Linux Wi-Fi: wlan0
• Windows Wi-Fi/이더넷: Scapy에 표시되는 Npcap 인터페이스 이름을 사용합니다

다음을 엽니다:

http://127.0.0.1:5176

그런 다음 제어 도크를 사용하여 실시간 캡처를 시작합니다.

원시 패킷 캡처는 일반적으로 상승된 로컬 권한이 필요합니다. macOS/Linux에서:

sudo npm start -- --iface en0

Windows에서는 터미널을 관리자로 실행합니다.

PCAP 재생

웹 앱을 열고 소스를 PCAP 재생으로 전환한 다음 .pcap 또는 .pcapng 파일을 업로드합니다. 그런 다음 다음을 사용합니다:

• 재생 / 일시 중지 / 다시 시작
• 속도 제어
• 타임라인 스크러버
• 원시/해결된 IP 및 MAC 레이블을 위한 레이블 모드 컨트롤

재생은 브라우저에서 실행되며 Python 캡처 서버가 실행 중일 필요가 없습니다.

재생에는 대화, 엔드포인트, 프로토콜 분석, 이름 확인 및 I/O 타임라인 활동에 대한 조사 패널이 포함됩니다.

파일 제한: 100MB 및 100,000 패킷. 지원되지 않는 프레임은 건너뛰고 UI에 개수가 표시됩니다.

현재 재생 지원:

• 기존 .pcap 및 기본 .pcapng
• 일반적인 이더넷, 원시 IP, Linux cooked 및 루프백 캡처
• IPv4 및 IPv6 패킷
• TCP, UDP, DNS 및 기타 IP 패킷

디스플레이 필터

실시간 캡처와 재생 모두 Wireshark 스타일의 디스플레이 필터 막대를 지원합니다. 필터를 입력하고 Enter 키를 눌러 적용하고, 필드를 지우고 Enter 키를 눌러 제거합니다.

지원되는 구문:

tcp          udp          dns          http         arp
ip.addr == 192.168.1.10
ip.src == 10.0.0.1
ip.dst == 8.8.8.8
tcp.port == 443
udp.port == 53
port == 80
ip.src == 10.0.0.1 && ip.dst == 8.8.8.8

복합 필터(&&)는 두 개의 필드 필터를 결합합니다. 필터를 적용하면 그래프가 일치하는 노드와 엣지로 좁혀지고, 필터를 지우면 현재 캡처 창의 전체 뷰로 복원됩니다.

경로 추적

복합 필터 ip.src == X && ip.dst == Y는 경로 추적을 활성화합니다. PacMap은 전체 캡처에 걸쳐 BFS를 실행하여 두 엔드포인트 간의 홉 체인을 찾습니다. 제어 도크 아래에 각 홉에 대한 패킷 및 바이트 수와 함께 각 홉을 보여주는 패널이 나타나고, 중간 노드가 그래프에서 강조 표시됩니다.

체크포인트

체크포인트는 현재 네트워크 상태(노드, 엣지, 트래픽 볼륨)를 특정 시점에 스냅샷합니다.

• 수동 체크포인트: 필터 막대에서 체크포인트를 클릭하여 현재 상태를 사용자 지정 레이블과 함께 저장합니다.
• 자동 체크포인트: 앱이 새 호스트 검색 또는 외부 연결 이벤트 시 자동으로 체크포인트를 생성할 수 있습니다(제어 도크에서 구성 가능).
• 차이(diff): 기록 패널에서 두 체크포인트를 선택하여 비교합니다. 추가, 제거 및 변경된 노드와 엣지가 그래프에서 강조 표시되고 diff 패널에 나열됩니다.
• 창 비교: 타임라인 스크러버를 사용하여 시간 범위를 선택하고 저장된 체크포인트 기준선과 비교합니다.

체크포인트는 localStorage에 pacmap_checkpoints 키로 저장됩니다(최대 50개 항목).

로컬 도우미가 필요한 이유는?

브라우저는 호스트 네트워크 트래픽을 직접 스니핑하거나 권한이 필요한 패킷 캡처를 시작할 수 없습니다. PacMap은 실시간 캡처를 위해 Scapy를 사용하는 로컬 Python WebSocket 도우미를 사용하고, 패킷 요약을 React 앱으로 스트리밍합니다:

ws://127.0.0.1:8765

PCAP 재생은 다릅니다. 브라우저가 업로드된 파일을 읽고 실시간 패킷 액세스 없이 동일한 그래프 시각화를 재사용합니다.

개발

프론트엔드만:

cd client
npm install
npm run dev

프로덕션 빌드:

npm run build

캡처 서버만:

source venv/bin/activate
python3 server.py --iface en0

문제 해결

• UI에 캡처 서버가 오프라인이라고 표시되면 server.py가 실행 중이 아니거나 WebSocket 포트를 사용할 수 없는 것입니다.
• 캡처가 실패하면 인터페이스 이름을 확인하고 필요한 로컬 권한으로 실행하십시오.
• 실시간 노드가 나타나지 않으면 일반적인 브라우징, ping 8.8.8.8, DNS 조회 또는 기타 네트워크 활동으로 트래픽을 생성하십시오.
• PCAP이 로드될 때 건너뛴 패킷이 많으면 지원되지 않는 링크 유형, 암호화/비IP 트래픽 또는 PacMap이 아직 요약하지 못하는 패킷 유형일 수 있습니다.

기술 스택

• React + Vite
• Three.js
• Python WebSocket 서버
• Scapy 패킷 캡처