作者： 極客小俊
一個把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主

Fiddler 抓包專題.png

前言

居然有人干了5年開發(fā)辨萍，抓包都不會!??

但是不要怕近忙，不要哭骄酗，跟著我學一定有收獲！ 興趣就是你最好的老師邦邦，有興趣就一定要學下去 ,卷死他們!??

溫馨提示:全程干貨安吁、內(nèi)容比較多，建議新手朋友可以先點贊+收藏再慢慢觀看! ??

Fiddler是什么?

在正式學習Fiddler之前燃辖， 我們還是要對Fiddler有一個初步的認識!

Fiddler是以web proxy代理服務器的形式工作的 , 它也是一個http協(xié)議數(shù)據(jù)抓包與調(diào)試代理工具鬼店，它能夠記錄和檢查當前你的電腦和互聯(lián)網(wǎng)之間的http消息, 也就是說可以將網(wǎng)絡(luò)傳輸發(fā)送與接受的數(shù)據(jù)包進行截獲、重發(fā)黔龟、編輯妇智、轉(zhuǎn)存等操作 還可以用來檢測網(wǎng)絡(luò)安全魂迄。 是不是感覺很強大!??

Fiddler主要能干什么?

work.png

Fiddler是一個客戶端和服務端的一個http代理工具 , 客戶端和服務端彼此之間的交流都可以被Fiddler所監(jiān)聽到!

Fiddler不僅僅是一款非常強大的抓包工具剑勾，還是一款web調(diào)試的利器

它能夠?qū)崿F(xiàn)以下功能:

1. 監(jiān)控我們瀏覽器所有的http/https的信息和流量，也就是所有的請求黍少，所有的流量都可以監(jiān)聽
2. 當監(jiān)聽截取到http請求之后蛋欣，就可以做一些查看 分析瀏覽器請求的內(nèi)容細節(jié),就可以偽造一些請求 偽造一個服務器的響應都是可以的!
3. 還可以測試網(wǎng)站的性能
4. 解密https的web會話
5. 全局航徙、局部斷點功能!

Fiddler的應用場景也很廣泛

1. 接口測試
2. 接口調(diào)試
3. 線上環(huán)境調(diào)試
4. web項目性能分析
5. 前后端bug監(jiān)測
6. 弱網(wǎng)斷網(wǎng)監(jiān)測
7. hosts配置監(jiān)測
8. mock模擬測試

要知道Fiddler作為系統(tǒng)代理，所有的來自微軟互聯(lián)網(wǎng)服務的http請求在到達目標Web服務器之前都會經(jīng)過Fiddler陷虎，同樣的到踏，所有的Http響應都會在返回客戶端之前也會經(jīng)過Fiddler。

為什么要學習Fiddler?

因為我們做開發(fā)必然要和http打交道對吧尚猿， 并且還有一些新手朋友也要學習http的相關(guān)知識窝稿，但是http的知識點比較多和雜亂,如果你沒有一個看得見摸的著的數(shù)據(jù)參照，是很難去把控http信息, 那么要理解http協(xié)議凿掂，我個人建議可以先從抓包工具開始從淺入深的形式慢慢了解http以及Fiddler這款抓包工具的使用

所以不管你是分析http還是剛剛學習http的朋友 ,都可以先學習一下Fiddler抓包工具!

并且在windows系統(tǒng)下只要一提到抓包肯定首選的就是Fiddler

總之學習了Fiddler之后伴榔，會讓你對http的理解更上一層樓!

下載Fiddler

官方下載地址

https://www.telerik.com/download/fiddler

填寫好電子郵箱和國家地區(qū) 點擊Download for windows就可以下載了

如圖

down.png

注意 這個Fiddler工具是基于.NET Framework的 ,因為Fiddler是c#開發(fā)的

如果是比較老的windows系統(tǒng)要保證運行環(huán)境!??

Fiddler的安裝方法也很簡單 獲取到安裝包之后,直接選擇安裝路徑 或 無腦下一步就可以了!??

安裝成功會顯示如下界面!

setup.png

軟件體系結(jié)構(gòu)—B/S 與 C/S架構(gòu)

B/S架構(gòu)

在了解Fiddler原理之前，還先清楚我們web最基本的架構(gòu)是什么缠劝，就是B/S架構(gòu), 它也是目前最常用的一種軟件架構(gòu)

B就是瀏覽器(Browsers) 也就是客戶端 這邊

S就是服務器端(Server)也就是web服務器這邊

我們平常的web服務潮梯、web項目骗灶、web應用都是運行在服務端的, 那么通過綁定ip地址+端口監(jiān)聽的形式來接收和處理一些前端也就是客戶端發(fā)起的http請求, 從而客戶端通過http協(xié)議和請求就可以獲取到指定服務器上的頁面 文件 資源惨恭、等等..

如圖

bs.jpg

舉個例子

當你在瀏覽器地址欄上輸入百度的地址之后，服務器端就會給你返回一個百度的html頁面資源

總結(jié)

B/S架構(gòu)就是瀏覽器/服務器的一種交互模式耙旦，是Browser/Server的簡稱脱羡。

并且這種架構(gòu)的軟件不需要在用戶的電腦上安裝任何客戶端程序萝究，只需要在用戶的電腦上安裝瀏覽器即可。

用戶僅僅使用瀏覽器通過web服務器和數(shù)據(jù)庫做交互锉罐，交互的結(jié)果將會以html網(wǎng)頁的形式顯示在瀏覽器上帆竹。

C/S架構(gòu) [了解]

出了我們的B/S架構(gòu)，其實還有一種就是C/S架構(gòu)是客戶端/服務端的一種交互模式脓规，是Client/Server的簡稱栽连。它是早期常用的一種軟件架構(gòu)，這種架構(gòu)的軟件需要在用戶的電腦上安裝客戶端程序, 有興趣的朋友可以自行了解侨舆，這里就不過多贅述了!

我們平常在進行軟件開發(fā)時秒紧，通常會根據(jù)需求在兩種基本架構(gòu)中進行選擇!

HTTP 基礎(chǔ)知識

學習Fiddler的時候,HTTP的知識點也是必不可少的, 所以這里必須要給大家簡單的介紹一下HTTP的相關(guān)知識!

http中文意思為超文本傳輸協(xié)議 英文全稱為Hyper Text Transfer Protocol

它是用于萬維網(wǎng)服務器傳輸超文本到本地瀏覽器的一種傳輸協(xié)議

目的是保證客戶端與服務端之間的通信

什么是http請求和響應?

http的工作方式為一個簡單的客戶端請求 與 服務端響應的應答過程

它指定了客戶端發(fā)送給服務器什么樣的消息形式以及得到什么樣的消息響應

所有的www文件都必須遵循這個標準協(xié)議, 目的是提供一種發(fā)布和接收html頁面的方法

舉個例子

比如說 客戶端（瀏覽器）向服務器提交一個http請求, 那么服務器又會向客戶端這邊返回響應信息。而這些響應信息包含關(guān)于客戶端請求的狀態(tài)信息以及客戶端所需要的內(nèi)容信息挨下。

如圖

http_1.png

http協(xié)議和web之間的本質(zhì)

其實就是瀏覽器和服務器打交道的

客戶端向服務器端發(fā)送Http請求,然后服務器端向客戶端返回http響應!

http協(xié)議就是瀏覽器和服務器之間進行溝通的一種規(guī)范, 也就是以這個規(guī)范來向服務器發(fā)起請求, 服務器才會給客戶端進行正確的響應, 所以http有的時候也可以理解為是一種 規(guī)范熔恢、規(guī)則、標準

http協(xié)議是屬于應用層的協(xié)議,而且是基于TCP/IP協(xié)議的, 也就是說http通信發(fā)生在TCP/IP鏈接之上

通俗一點說http協(xié)議就是基于TCP的一種應用層協(xié)議 它不會關(guān)系數(shù)據(jù)傳輸?shù)募毠?jié)問題,也就是說你不用去關(guān)心它下層TCP的運行邏輯, 它的核心只在于用來規(guī)定客戶端和服務端的數(shù)據(jù)傳輸格式

最早http是用來向客戶端傳輸html文件內(nèi)容,默認的端口80

擴展

有興趣的朋友可以自行了解一下iso網(wǎng)絡(luò)七層模型

通俗點說http臭笆，就是在請求和響應之后叙淌，服務器端立即關(guān)閉連接，并釋放資源愁铺，這樣既保證了資源可顯示與可用性鹰霍，也吸取了TCP協(xié)議的可靠性優(yōu)點,但是缺點就無法跟蹤用戶的操作了,所以我們在后端開發(fā)的學習中才會接觸一個東西叫session和cookie技術(shù)

所以你也可以理解為http是基于請求與響應的模式, 并且是無狀態(tài)的應用層協(xié)議

http請求和響應的基本原理

任何一個http請求都只會分為兩個部分: 一個請求報文另外一個是響應報文

請求報文是客戶端按照一定的格式生成一段文本,然后發(fā)給我們的服務端, 而服務器接收到了這樣一個請求報文就會解析里面的內(nèi)容,然后做出回饋，也就是響應

響應報文也就是服務器端根據(jù)請求報文反饋給客戶端的文本信息

http請求報文 (request)基本結(jié)構(gòu)

http請求(request)也叫請求報文一個基本的http請求報文結(jié)構(gòu)分為如下幾點:

1. 請求行:就是請求方式和協(xié)議,也就是說用于描述客戶端的請求方式,例如post/get方式, 以及請求的資源名稱和HTTP協(xié)議的版本號!
2. 若干個請求頭: 這些也叫消息頭告訴服務器發(fā)送的是什么數(shù)據(jù)類型茵乱，編碼類型衅谷、請求的是哪臺主機、以及客戶端瀏覽器的一些系統(tǒng)環(huán)境 等等似将， 這些消息頭中有很多頭部字段名 和 對應的值它的格式為 name:value
3. 空白行
4. 請求正文內(nèi)容

抓包了解一下

那么我們在學習http知識的時候 就可以先直接使用Fiddler來抓取一個http請求和http響應來先看看到底是什么東西!

這樣也有助于一些新手來理解http!

我們可以通過Fiddler抓取網(wǎng)絡(luò)數(shù)據(jù)包的手段获黔，就可以看到一個基本的http請求結(jié)構(gòu)都包含哪些信息!

例如一個GET方式的請求(Request)信息 如下:

GET https://www.baidu.com/?name=zhangsan HTTP/1.1
Host: www.baidu.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: none
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

例如一個POST方式的請求(Request)信息 如下:

POST https://api.codelife.cc/stat/userHm HTTP/1.1
Host: api.codelife.cc
Connection: keep-alive
Content-Length: 48
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="100", "Google Chrome";v="100"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
Content-Type: application/json
Accept: application/json, text/plain, */*
sec-ch-ua-platform: "Windows"
version: 1.2.27
Origin: chrome-extension://mhloojimgilafopcmlcikiidgbbnelip
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

{"fp":"4c49c2fd79e1658546e4b8ad","tn":6}

怎么樣 是不是看這一大堆腦殼都大了呢 ？ 哈哈哈不要著急在验，我們慢慢來學!??????

我們先來看一張請求(Request)圖解

如圖

request_1.jpg

然后我們來逐一拆解上圖中的各個部分!

1.請求方式 (Request method)

我們常見的一些請求方式也就是POST/GET,當然還有其他的一些請求方式, 如下表:

2.URL (Uniform Resource Locator)

URL中文名為統(tǒng)一資源定位符 英文全稱Uniform Resource Locator ,

我們網(wǎng)絡(luò)中的每一信息資源都有統(tǒng)一的且在網(wǎng)上唯一的地址!

URL具體由4部分組成：協(xié)議玷氏、主機、域名腋舌、端口盏触、路徑文件、[附加資源]

URL的一般語法格式為：

protocol :// hostname[:port] / path / [?query-parameters]

1.協(xié)議 (protocol)

協(xié)議有http块饺、ftp赞辩、https、等...

2.主機名 (hostname) + 域名

主機名+域名 例如: www.xsphp.com

3.端口 (port)

端口是一個數(shù)字, 端口是可選的 省略時使用方案是服務器默認配置的端口

例如 80授艰、8080辨嗽、..

各種傳輸協(xié)議都有默認的端口號，如http協(xié)議的默認端口為80

如果URL地址省略端口淮腾，則使用默認端口號

注意

有時候出于安全或其他考慮糟需，可以在服務器配置上對端口進行重新定義屉佳，也就是采用非標準端口號，那么此時洲押，URL地址中就不能省略端口號這一項武花。

4.路徑文件 (path)

由零或多個/符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址

例如: /tpl/index.php

5.查詢參數(shù) 附加資源 (query-parameters)

這一項在URL中也是可選的 用于給動態(tài)網(wǎng)頁如 PHP/JSP/ASP/ASP.NET等后端頁面 傳遞參數(shù)的一種方式杈帐，并且如果是GET請求方法, 那么可有多個參數(shù), 它們彼此用&符號隔開体箕，每個參數(shù)的名和值用=符號隔開

語法格式: ?參數(shù)=值&參數(shù)2=值 以此類推!

例如: ?id=33&age=25&name=zhangsan

舉個例子

一個比較常見的url地址， 如下:

https://www.xxxx.net/xxxx/xxxx/xxxx/100?num=1001.2014.3001.5501

3.請消息求頭 (Request Header)

請求消息頭也叫消息頭告訴服務器發(fā)送的是什么數(shù)據(jù)類型挑童，編碼類型干旁、請求的是哪臺主機、以及客戶端瀏覽器的一些系統(tǒng)環(huán)境 等等前面已經(jīng)說過了, 并且請求頭是可以由開發(fā)人員根據(jù)需求去進行自定義的

這些消息頭中有很多頭部字段名 和 對應的值它的格式為 name:value

我們常見的一些請求頭如下表:

我們可以用Fiddler截取一個請求頭看看

如圖

request_2.png

4.空行

空白行 也就是在消息頭結(jié)束的下方怔球，會存在一個空白行, 這是必須存在的, 是由HTTP標準規(guī)定的!

5.請求體

請求體它的出現(xiàn)是要根據(jù)請求的方式不同而不同, 也就是如果是POST那么就會以鍵與值的形式進行發(fā)送, 如果是GET請求那么這里就不會包含請求正文內(nèi)容

http響應報文 (Response)基本結(jié)構(gòu)

http響應(response)也叫響應報文

其實響應報文比請求報文更加簡單, 你只要能夠搞懂請求報文 那么響應報文就很容易搞懂!

http響應(response)的一個基本結(jié)構(gòu)分為如下幾點:

1. 響應行
2. 響應頭
3. 空白行
4. 響應體

我們可以通過Fiddler抓取網(wǎng)絡(luò)數(shù)據(jù)包的手段嚼酝，就可以看到一個基本的http響應結(jié)構(gòu)都包含哪些信息!

舉個例子

Response_0.png

如果你還看不明白 那么我們先來看一張http響應(response)圖解 你就會明白了!

Response_1.jpg

然后我們來逐一拆解上圖中的各個部分!

1.響應行

響應行也叫狀態(tài)行， 上圖中響應行內(nèi)部其實包含了3個重要的信息部分:

HTTP協(xié)議的版本竟坛、HTTP狀態(tài)碼闽巩、HTTP的狀態(tài)描述

1.HTTP協(xié)議的版本現(xiàn)目前都是HTTP/1.1 版本 這個沒什么好說的!

2.HTTP狀態(tài)碼 可以用來表示網(wǎng)頁服務器端給客戶端返回的HTTP響應狀態(tài), 通常都是3位數(shù)字的代碼, 而這些常見的狀態(tài)碼又可以分為幾種提示類型: ?? 如下表

3.HTTP的狀態(tài)描述是緊跟在狀態(tài)碼后面的英文單詞

每一種具體類別狀態(tài)碼+狀態(tài)描述可以參考下表:

1xx: 提示消息類型

2xx: 成功消息類型

3xx: 重定向類型

4xx: 客戶端錯誤信息

5xx: 服務器錯誤信息

2.響應頭 (Response Header)

響應頭也叫消息報頭 也就是服務器端要告訴客戶端的一些附加信息, 但是也有可能這些響應頭是由后端開發(fā)人員進行自定義的!

而且這里的響應頭跟請消頭 很類似, 格式也基本一樣, 它的格式為 name:value

具體我這里也列舉了一些常見的響應頭 如下表:

還有更多的響應頭這里就不一一列舉了!

3.空白行

空白行也就是http規(guī)范制定的必須存在的一個空行, 空行的目的就是一種格式褥伴，也就是要告訴用戶接下來的內(nèi)容就是正文內(nèi)容了!

4.響應體

響應體也就是實際從服務器返回給客戶端的正文內(nèi)容,也可能是一些字符串谅将， 也可以是任意的格式:

響應體大多數(shù)情況下都是html漾狼、json、文本饥臂、xml 這些格式!

小結(jié)

對于http相關(guān)的的知識點 就說這么多了,對于學習fiddler足夠了

接下來你就可以愉快的學習Fiddler了??

Fiddler運行原理

Fiddler的原理簡單點說就是通過改寫HTTP代理然后讓網(wǎng)絡(luò)數(shù)據(jù)從Fiddler這邊通過 這樣子來監(jiān)控并且截取到網(wǎng)絡(luò)信息數(shù)據(jù)逊躁。當你打開Fiddler的時候, 就已經(jīng)設(shè)置好了瀏覽器的代理了。當你關(guān)閉的時候隅熙，它會自動的幫你把代理還原

之前也說過了 B/S架構(gòu)就是客戶端和服務器之間的 請求和響應, 剛剛我們也知道了Fiddler通過代理的形式來進行監(jiān)聽稽煤，它在請求和響應中起到一個什么樣的角色呢?

這里還要清楚一點的就是 瀏覽器默認走的是我們的系統(tǒng)代理

其實這里的代理監(jiān)聽 就是在 請求和響應之間插了一腳, 讓fiddler成為系統(tǒng)代理

在你安裝好Fiddler之后啟動，并可以打開菜單欄中的Tools--->options--->Connections

如下圖

fiddler_1.png

看到了吧,這里有一句Act as system proxy on startup意思就是(在啟動時充當系統(tǒng)代理),并且默認監(jiān)聽端口設(shè)置為了8888

如圖

fiddler_2.png

這里以chrome瀏覽器為例:

只要fiddler一旦啟動并開始監(jiān)聽的時候囚戚，就會默認成為系統(tǒng)代理, 所以你的網(wǎng)絡(luò)請求 也就會被fiddler所抓取到!

如圖

fiddler_3.jpg

或者如下圖一樣Fiddler就是一個中間的proxy(代理服務器)

fiddler_3-3.png

fiddler_4.png

當關(guān)閉fiddler的時候酵熙，手動設(shè)置代理選項就會被清空

所以我們才會說Fiddler是介于客戶端和服務器中間的一個角色, 監(jiān)控客戶端和服務器所有通信的過程!

小結(jié)

Fiddler是以代理WEB服務器的形式工作的,瀏覽器與服務器之間通過建立TCP連接以HTTP協(xié)議進行通信，

瀏覽器默認通過自己發(fā)送HTTP請求到服務器驰坊，本地使用代理地址:127.0.0.1, 端口:8888.

而當Fiddler開啟會自動設(shè)置系統(tǒng)代理匾二， 退出的時候它會自動注銷代理，這樣就不會影響別的程序拳芙。

但是如果Fiddler非正常退出察藐，這時可能會因為Fiddler沒有自動注銷，而會造成網(wǎng)頁無法訪問舟扎。

解決的辦法是重新啟動下Fiddler就可以了, 這也是有很多新手安裝了Fiddler之后導致一些網(wǎng)絡(luò)無法訪問的原因之一!

如果我的博客對你有幫助分飞、如果你喜歡我的博客內(nèi)容，請 “點贊” “評論” “收藏” 一鍵三連哦睹限！

如果以上內(nèi)容有任何錯誤或者不準確的地方譬猫，歡迎在下面 ?? 留個言指出、或者你有更好的想法羡疗，歡迎一起交流學習??????????