[2026/9/11]

[WEB App] PCAP Analyzer v1 — ブラウザ完結型 PCAP/PCAPNG パケットアナライザ & リアルタイムフィルタ

[WEB App] PCAP Analyzer v1 — ブラウザ完結型 PCAP/PCAPNG パケットアナライザ & リアルタイムフィルタ

PCAP Analyzer v1

Wireshark や tcpdump で取得したキャプチャファイル（.pcap / .pcapng）を、専用ソフトウェアをインストールすることなくブラウザ上完結で解析・可視化できる Web アプリケーションツール。

HTML5 Canvas による仮想スクロール描画と Web Worker によるバックグラウンド並列パースを採用し、数万パケット規模の大容量ファイルでもメインスレッド（UI）を凍結させることなく滑らかに閲覧・フィルタリング・構造解析が可能です。

Wireshark 互換のフィルター構文（ip.src, ip.addr, tcp.port 等）、TCP セッションのシーケンス・ACK 進行をビジュアル化する TCP Stream Flow、パケット階層構造デコード、同期 Hex Viewer、およびプロトコル比率を表示する Traffic Stats パネルを搭載しています。

スクリーンショット

パケット解析・グリッド描画画面

PCAP Analyzer v1 — パケット解析・グリッド描画画面

動画（GIF）

PCAP Analyzer v1 — 動作デモ

Sample data

サンプルデータは GitHub (MARKOFU / PCAPS) の公開パケットキャプチャリポジトリよりお借りしています。

TYPEDATA
SourceMARKOFU / PCAPS (GitHub)
Format.pcap / .pcapng
SupportEthernet II / IPv4 / TCP / UDP / DNS

特徴

  • 完全ローカル処理:
    読み込んだキャプチャデータはブラウザ上のメモリ（Web Worker / TypedArray）でのみ処理・保持され、外部サーバーへ送信されることはありません。
  • Web Worker 並列バイナリ解析:
    大容量 PCAP/PCAPNG ファイルのパースおよびフィルタ計算をバックグラウンド Worker で実行し、解析データは Transferable Objects (Float64Array) で零コピー転送。
  • Canvas 仮想スクロール描画:
    DOM 要素を大量生成せず、画面に表示される 20〜30 行分のみを HTML5 Canvas (2D) に直接高速描画。
  • Wireshark 互換リアルタイムフィルタ:
    ip.src == x.x.x.x, ip.addr == x.x.x.x, tcp, udp, dns, tcp.port == xx などの比較演算およびサマリー全文検索に対応。
  • TCP Stream Flow 可視化:
    選択したパケットの TCP セッションを抽出し、Host A / Host B 間のシーケンス番号・ACK・ペイロード長・相対時間をグラフィカルフロー表示。
  • Dynamic Resizer UI:
    上下左右の分割パネルをドラッグ操作で拡大縮小可能。DPR (DevicePixelRatio) と同期したシャープな描画を維持。
  • Packet Detail & Hex Viewer:
    Ethernet II / IPv4 / TCP / UDP ヘッダーの解析ツリー表示と、16進数＋ASCII表示のインタラクティブ Hex Viewer。

使い方

1. キャプチャファイルを読み込む

画面中央左のドラッグ＆ドロップエリアに .pcap または .pcapng ファイルをドロップするか、エリアをクリックしてファイルを選択します。 解析完了後、パケット一覧、Traffic Stats（プロトコル比率）、パケット総数が表示されます。

2. フィルタによるパケット絞り込み

上部バーの FILTER 入力欄にクエリを入力すると、Web Worker が即座にインデックス計算を行い、該当するパケットのみを画面へレンダリングします。

フィルタ構文例説明
tcp / udp / dns指定したプロトコルのみ抽出
ip.src == 192.168.0.114送信元 IP アドレスで絞り込み
ip.addr == 192.168.0.193送信元・送信先のいずれかが指定 IP のパケットを抽出
tcp.port == 21 / udp.port == 53特定のポート番号で絞り込み
SYN / GETサマリーテキスト内のキーワード部分一致

3. パケット詳細と Hex Viewer の確認

一覧から特定のパケット行をクリックすると、下部左パネルに層構造（Ethernet II / IPv4 / TCP 等）の解読データが表示され、下部右パネルには該当パケットの生のバイナリ（16進数 ＋ ASCII）が表示されます。

4. TCP Stream Flow の閲覧

TCP パケットを選択すると、右側パネル（TCP STREAM FLOW）に該当セッションのやり取りが時系列矢印グラフとして可視化されます。ACK の返答タイミングやパケット再送の有無を一目で把握できます。

フィルター構文一覧

構文パターン記述例
プロトコル指定tcp, udp, dns
送信元 IP 指定ip.src == 192.168.0.114
IP アドレス指定 (両方向)ip.addr == 63.245.209.21
TCP / UDP ポート指定tcp.port == 4844, udp.port == 53
任意キーワード検索GET, ACK,FIN, 192.168

技術スタック

  • HTML5 Canvas API — 仮想スクロールに対応した高速パケットグリッド描画エンジン
  • Web Worker & TypedArray (Float64Array) — メモリ零コピー転送を用いたバックグラウンド・パース & フィルタ検索
  • Astro — Webアプリケーション基盤

技術記事

[Astro] #139 Canvas × Web Worker で超高速ブラウザ PCAP アナライザを作る — メモリ効率化とリアルタイムフィルタリング実装記録

[Astro] #139 Canvas × Web Worker で超高速ブラウザ PCAP アナライザを作る — メモリ効率化とリアルタイムフィルタリング実装記録

ブラウザ上で動作する Wireshark 風パケットアナライザの開発ログ。Web Worker によるバイナリ解析と Float64Array バッファ転送、Canvas 2D を用いた数万パケットの仮想スクロール描画、インデックスマッピングによるリアルタイムフィルタリングのハマりポイントと実装を徹底解説。

lain-lab.com

更新履歴

  • [2026-09-10]: v1.0初回公開。
    • Web Worker による PCAP / PCAPNG バイナリ完全ローカル高速解析
    • HTML5 Canvas 仮想スクロールによる数万件パケット描画エンジン搭載
    • Wireshark 互換リアルタイムフィルタリングエンジン (ip.src, ip.addr, tcp.port 等)
    • Packet Detail レイヤー分析 (Ethernet II, IPv4, TCP, UDP)
    • Synchronized Hex Viewer (16進数 ＋ ASCII表示)
    • TCP Stream Flow 自動抽出 & シーケンス・ACK ビジュアル描画
    • Traffic Stats ドーナツチャート & プロトコル集計機能
    • 可変UIスプリッター (DPR 同期リサイズ)