抓包工具：Wireshark 與 Charles
抓包工具讓你看到 HTTP 請求的完整細節。本篇將介紹 Wireshark 和 Charles 的使用技巧。
一、 工具比較
| 特性 | Wireshark | Charles |
|---|---|---|
| 層級 | 網路層 | 應用層 |
| 協定 | 所有網路協定 | HTTP/HTTPS |
| 介面 | 較複雜 | 較友好 |
| HTTPS | 需配置 | 容易設定 |
| 價格 | 免費 | 付費（有試用） |
| 適用 | 深度分析 | 日常開發 |
二、 Charles Proxy
2.1 安裝與設定
- 下載安裝 Charles
- 啟動 Charles（自動設定系統代理）
- 瀏覽網頁即可看到請求
2.2 HTTPS 解密
bash
# 1. 安裝 Charles 憑證
Help → SSL Proxying → Install Charles Root Certificate
# 2. 信任憑證（macOS）
Keychain Access → 找到 Charles → Trust → Always Trust
# 3. 啟用 SSL Proxying
Proxy → SSL Proxying Settings → Add
Host: * (或指定網域)
Port: 4432.3 基本過濾
# 結構視圖
View → Structure (左側樹狀結構)
# 序列視圖
View → Sequence (時間順序)
# 過濾網域
右鍵網域 → Focus
右鍵網域 → Ignore2.4 修改請求
bash
# 斷點修改
右鍵請求 → Breakpoints
# 下次請求會暫停，可修改後繼續
# 重寫規則
Tools → Rewrite
# 設置 URL 替換、標頭修改、Body 替換2.5 模擬情境
bash
# 節流
Proxy → Throttle Settings → Enable Throttling
# 預設：56k, 2G, 3G, 4G, LTE
# Map Local（本地檔案替換）
Tools → Map Local → Add
Map From: https://api.example.com/config
Map To: /path/to/local/config.json
# Map Remote（遠端替換）
Tools → Map Remote → Add
Map From: https://api.example.com/
Map To: http://localhost:3000/2.6 行動裝置設定
bash
# 1. 取得 Charles IP
Help → Local IP Address
# 2. 手機設定代理
Wi-Fi 設定 → HTTP Proxy → Manual
Server: 192.168.x.x (Charles IP)
Port: 8888
# 3. 安裝憑證
手機瀏覽器訪問 chls.pro/ssl
安裝並信任憑證三、 Wireshark
3.1 安裝
bash
# macOS
brew install wireshark
# Ubuntu
sudo apt install wireshark3.2 捕獲過濾器
選擇網路介面後，設定捕獲過濾器：
bash
# 只捕獲 HTTP/HTTPS
port 80 or port 443
# 特定主機
host api.example.com
# 特定 IP
ip.addr == 192.168.1.1003.3 顯示過濾器
捕獲後的過濾：
bash
# HTTP 請求
http.request
# HTTP 回應
http.response
# 特定方法
http.request.method == "POST"
# 特定狀態碼
http.response.code == 200
# 特定 URL
http.request.uri contains "/api"
# 特定主機
http.host == "api.example.com"
# TCP 問題
tcp.analysis.flags
# 組合過濾
http.request.method == "POST" && http.host contains "api"3.4 分析 HTTP 請求
1. 找到 HTTP 請求封包
2. 右鍵 → Follow → HTTP Stream
3. 查看完整的請求/回應對話3.5 HTTPS 解密
bash
# 方法 1：使用 SSLKEYLOGFILE（推薦）
# 1. 設定環境變數
export SSLKEYLOGFILE=~/ssl-keys.log
# 2. 啟動瀏覽器
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome
# 3. Wireshark 設定
Preferences → Protocols → TLS
(Pre)-Master-Secret log filename: ~/ssl-keys.log
# 4. 現在可以看到解密的 HTTPS 內容3.6 效能分析
bash
# 統計 HTTP 請求
Statistics → HTTP → Requests
# 回應時間
Statistics → HTTP → Packet Counter
# TCP 流分析
Statistics → Conversations → TCP
Statistics → Flow Graph四、 常見分析場景
4.1 診斷慢請求
Charles:
1. 找到慢請求
2. 查看 Timing 標籤
3. 分析 DNS、Connect、SSL、Request、Response 時間
Wireshark:
1. 過濾 http.request
2. 右鍵 → Follow TCP Stream
3. 查看 TCP 重傳、延遲4.2 驗證快取
Charles:
1. 查看 Response Headers
2. 檢查 Cache-Control、ETag
3. 重新請求看是否 304
Wireshark:
1. 過濾 http.response.code == 304
2. 查看條件請求標頭4.3 分析 API 錯誤
Charles:
1. 找到錯誤請求（紅色）
2. 查看 Request/Response 完整內容
3. 檢查錯誤訊息
Wireshark:
1. 過濾 http.response.code >= 400
2. 查看詳細回應4.4 比較請求
Charles:
1. 選擇兩個請求
2. 右鍵 → Compare
3. 查看差異
Wireshark:
1. 匯出兩個封包
2. 使用 diff 比較五、 安全注意事項
5.1 憑證安全
bash
# Charles 憑證只用於開發
# 用完後應該：
1. 移除系統信任
2. 從手機移除
3. 不要分享私鑰5.2 敏感資料
bash
# 抓包可能包含：
- 密碼
- Token
- 個人資料
- API Key
# 分享時注意：
1. 移除敏感標頭
2. 遮蔽 Cookie
3. 清理 Body 中的密碼六、 快速對照表
6.1 Charles 快捷鍵
| 快捷鍵 | 功能 |
|---|---|
| ⌘K | 清除記錄 |
| ⌘R | 重播請求 |
| ⌘E | 編輯重播 |
| ⌘D | 複製請求 |
| ⌘F | 搜尋 |
6.2 Wireshark 過濾器速查
| 過濾器 | 用途 |
|---|---|
http | 所有 HTTP |
http.request | HTTP 請求 |
http.response | HTTP 回應 |
tcp.flags.syn | TCP SYN |
tcp.analysis.retransmission | 重傳 |
總結
| 工具 | 使用場景 |
|---|---|
| Charles | 日常 API 除錯、Mock、節流 |
| Wireshark | 深度網路分析、TCP 問題 |
> **選擇建議**：
- API 開發除錯 → Charles
- 網路問題排查 → Wireshark
- 行動端測試 → Charles
進階挑戰
- 使用 Charles 對一個網站進行完整的請求分析。
- 用 Wireshark 抓取 TCP 三次握手過程。
- 研究 mitmproxy——命令列版的 Charles。