---
# System prepended metadata

title: 從 Wireshark、Fiddler 深入了解網路請求

---

從 Wireshark、Fiddler 深入了解網路請求
===
- [講義](https://quip.com/exlbAHYLKdTb)
- [PPT](https://cacoo.com/diagrams/FvctrUl4Zw2EWvvc/253F6?reload_rt=1625575734574_0&recover=t)

OSI 與 TCP/IP
---
- [OSI](https://zh.wikipedia.org/wiki/OSI%E6%A8%A1%E5%9E%8B) ：1984年，ISO 發布了著名的 ISO/IEC 7498 標準，它定義了網路互聯的 7 層框架，也就是開放式系統互聯參考模型。
- [TCP/IP](https://zh.wikipedia.org/wiki/TCP/IP%E5%8D%8F%E8%AE%AE%E6%97%8F) ：被視為 OSI 七層協定的簡化版，1990 年開始蓬勃發展(www/mail)。

![](https://i.imgur.com/X14Dxod.png)

> 題目：HTTP 、FTP、SMTP 在 TCP/IP 是屬於哪一層？應用層。

Wireshark 查看IP網路封包
---

![](https://i.imgur.com/Woqntdn.png)

### Wireshark 常見指令
- 尋找來源 IP：ip.src== `xxx.xxx.xxx.xxx`
- 或 ( or )：ip.src== xx.xx.xx.xx or ip.dst == xx.xx.xx.xx
- port： tcp.port == 80
- 網路請求：http.request.method=="POST"
> [Wireshark 指令表](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/895acf23-d2d9-4bf4-bd77-6a3208f0aae5/wireshark_.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAT73L2G45O3KS52Y5%2F20211025%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20211025T090608Z&X-Amz-Expires=86400&X-Amz-Signature=6b8e86a271f7915a906bbdac236a1c13cc327372d0f8d440092d727e10a3cbd1&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22wireshark%2520%25E6%258C%2587%25E4%25BB%25A4%25E8%25A1%25A8.pdf%22)

### 使用說明
1. 多張網路卡，選定使用哪張網路卡查看 IP 封包

    ![](https://i.imgur.com/FM8GCwp.png)

2. 將要查詢的 IP 輸入進搜索欄位

    ![](https://i.imgur.com/bZIdqoX.png)
    > src 來源｜dst 目的地
    > ip.src = = 104.24.162.193 or ip.dst = = 104.24.162.193
    > 
    > 假若找不到 IP，可以微調下號碼，因為 IP 浮動會一直跑。

* 不知道 IP 的情況，去 ping 你要查詢的網址

    ![](https://i.imgur.com/TICDZtO.png)

### 特定封包詳細資訊

不是所有封包都有這些資料，將視該封包性質而定。

![](https://i.imgur.com/R3uknqC.png)

![](https://i.imgur.com/2oUoJuA.png)

* **Frame** 12772: 59 bytes on wire (472 bits), 59 bytes captured (472 bits) on interface 0
實體層：網路口、光纖。
* **Ethernet II**, **Src**: ZyxelCom_cb:60@:2b (1¢:74:@d:cb:60:2b), **Dst**: Apple_ed:32:db (1c:36:bb:ed:32:db)
乙太網路、網路卡卡號、MAC 訊框。
    ![](https://i.imgur.com/F1pW8Rw.png)
* **Internet Protocol Version** 4, **Src**: 104.27.166.176, **Dst**: 10.0.0.35
哪個 IP，傳送到哪個 IP。
IPV4、IPV6 （紀錄方式不同，目前 ipv4 為主流，但 IPV4 號碼越來越少，最後可能改用 Ipv6）。
* **Transmission Control Protocol**, **Src Port**: 8@, **Dst Port**: 59411, Seq: 3211, Ack: 415, Len: 5
TCP，傳送至哪個 port。
![](https://i.imgur.com/WxU8Mo0.png)
* [ 5 **Reassembled TCP Segments** (3215 bytes) ]
封包。此有 5 個封包。
* **Hypertext Transfer Protocol**
應用層：收到網路上的資訊。
* **Line-based text data:text/html**
合併為將顯示的HTML網頁

TCP 封包
---

![](https://i.imgur.com/yVzXqfS.png)

- 每個 TCP 封包可夾帶 40~1500 Bytes Data 資料 ( 1024 Bytes，約等於 1 k )
    ![](https://i.imgur.com/i2Znkmn.png)
- 每個封包內夾帶的資訊，是十六進制的共通格式
    ![](https://i.imgur.com/tap5P3n.png)

### 假若掉封包
- 網頁畫面不齊全，可能是掉封包，這時會傳送404、500（或其他錯誤碼），這些由後端客製。
- TCP 其中一個封包弄丟，瀏覽器會再次傳輸，確定都傳輸到才會揮手結束。

> 封包只能傳送 1500 bytes，一張 15k 的圖片要透過幾個封包來傳送？10 個。

HTTPS 與 HTTP 的差異
---
HTTPS 是在傳輸層與應用層之間建立加密機制，讓駭客無法獲得明碼內容。

* HTTP 是 80 port、HTTPS 是 443 port。
* HTTP 是 應用層、HTTPS 是傳輸層。

![](https://i.imgur.com/kYsNWwi.png)

### 在 Wireshark 看 HTTP 與 HTTPS

#### HTTP
![](https://i.imgur.com/ZaW0IeK.png)

#### HTTPS
![](https://i.imgur.com/ULcneXE.png)

應用層與傳輸層間有 SSL 加密，傳輸的 POST 被加密直到應用層才被解密（在應用層解密才會看到網頁內容），因此傳輸的資訊不會被看到（封包被加密，無法從封包看到資訊）。

> 如何為網頁加上 SSL 呢？購買 SSL 憑證，有免費（[cloudflare](https://www.cloudflare.com/zh-tw/)）也有付費，付費的較難被破解。

當發出一個 GET/POST 請求時，中間過程會經過哪些傳輸協定
---
![](https://i.imgur.com/KuxuTJ9.png)

發出 get 後，經過三向交握，建立雙向溝通向對方要資料。透過 TCP 傳輸封包，傳輸完畢傳輸 200 ok，才會在瀏覽器顯示該筆資料。經過四次揮手結束。

假如中途需要圖片或是 css 等資料，再發出 HTTP 請求，伺服器接收再用 TCP 傳輸封包，下載完畢傳 200 ok。經過四次揮手結束。

![](https://i.imgur.com/zzC60TA.png)

![](https://i.imgur.com/CfpMvNX.png)

- HTTP 傳送需要綁表頭
- 發出網頁請求，是在 HTTP 應用層
- 網頁傳輸使用 TCP
- cookie 是在 HTTP 應用層

UDP 與 TCP
---

TCP 與 UDP 各有優缺，端看情境來使用。

- UDP 
    - 不需要三向握手與四次揮手，直接傳送，容易掉封包。
    - 不嚴謹、速度快，適合重視即時傳輸，掉封包也沒關係，比如直播。

    ![](https://i.imgur.com/fb9xsfR.png)

- TCP 
    - 需要經過三次握手建立雙方溝通後，才會開始彼此傳遞資料。
    - 嚴謹，速度慢。

    ![](https://i.imgur.com/uQDgNNU.png)

發送網路請求管道
---
- JS AJAX
- POSTMAN
- cURL
- 各種後端語言
- IOS/Android
- Desktop App

![](https://i.imgur.com/cQFrnnk.png)

常見問答
---
1. 一部 100 MB 影片是否能只用一個封包來進行傳送？ 
    X，一個封包最多只能傳輸 1500 bytes。
2. 如果一個網頁有 10 張圖片，是否要執行十次 TCP 三項交握來獲得？
    X，此是詢問伺服器是否在，只需詢問一次。
3. 在 post API 時，可以安心在 http 網站使用，不會被人看到資料或竄改封包
    X，http是明碼傳輸，較不安全。 
4. 如果講求傳輸速度，就算資料掉一些也不打緊的話，該用 TCP 還是 UDP 傳輸？
    UDP，不會進行三向交握，會一直傳資料。速度快、不嚴謹。
5. 只能寫 JavaScript AJAX 來撈 API 資料，無法透過其他方式來發送請求 
    X
6. 後端語言只能開啟 web 伺服器與接資料庫，無法針對 TCP/IP、UDP 來設計服務?
    X，可以利用 TCP/UDP 對接資料。
7. 如果要看 HTTP 協定傳送， Fiddler、wireshark 都可以？ 
    O
8. wireshark 每個封包都一定會有以下內容嗎？
    X，每個封包都是獨一無二，依它的特質塞不同資料。
    1. Frame、
    2. Ethernet II、
    3. Internet Protocol Version 4、
    4. Transmission Control Protocol、
    5. Hypertext Transfer Protocol

其餘補充
---
- w3c 規劃哪些 HTML、CSS、JS 該被發明。再由各家瀏覽器改版增加該功能，但不是每家瀏覽器都會跟進，因此語法不一定每家瀏覽器都支援。
- 後端語言不只是拿來開 web 伺服器，比如 node 可以不開 web 伺服器，單純開 TCP 協定進行資料傳輸或接收資料。
    開發的過程中，不僅能透過前端 JavaScript 對瀏覽器設定 Cookie，伺服器也可傳送 cookie 到 client 端。
    POST 不僅可以發送資料，也可以取得資源。 
- [跨來源資源共用（CORS）](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS)發出三向交握，後端必須在此加上CORS的程式碼。
    ![](https://i.imgur.com/fhj4sqn.png)