2022最新版🚀Fiddler抓包教程(1) 初识Fiddler+HTTP基础知识 🦞 (图文汇总)

作者： 极客小俊
一个把逻辑思维转变为代码的技术博主

Fiddler 抓包专题.png

前言

居然有人干了5年开发，抓包都不会!👿

但是不要怕，不要哭，跟着我学一定有收获！ 兴趣就是你最好的老师，有兴趣就一定要学下去 ,卷死他们!🚀

温馨提示:全程干货、内容比较多，建议新手朋友可以先点赞+收藏再慢慢观看! 😇

Fiddler是什么?

在正式学习Fiddler之前， 我们还是要对Fiddler有一个初步的认识!

Fiddler是以web proxy代理服务器的形式工作的 , 它也是一个http协议数据抓包与调试代理工具，它能够记录和检查当前你的电脑和互联网之间的http消息, 也就是说可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作 还可以用来检测网络安全。 是不是感觉很强大!🙂

Fiddler主要能干什么?

work.png

Fiddler是一个客户端和服务端的一个http代理工具 , 客户端和服务端彼此之间的交流都可以被Fiddler所监听到!

Fiddler不仅仅是一款非常强大的抓包工具，还是一款web调试的利器

它能够实现以下功能:

1. 监控我们浏览器所有的http/https的信息和流量，也就是所有的请求，所有的流量都可以监听
2. 当监听截取到http请求之后，就可以做一些查看 分析浏览器请求的内容细节,就可以伪造一些请求 伪造一个服务器的响应都是可以的!
3. 还可以测试网站的性能
4. 解密https的web会话
5. 全局、局部断点功能!

Fiddler的应用场景也很广泛

1. 接口测试
2. 接口调试
3. 线上环境调试
4. web项目性能分析
5. 前后端bug监测
6. 弱网断网监测
7. hosts配置监测
8. mock模拟测试

要知道Fiddler作为系统代理，所有的来自微软互联网服务的http请求在到达目标Web服务器之前都会经过Fiddler，同样的，所有的Http响应都会在返回客户端之前也会经过Fiddler。

为什么要学习Fiddler?

因为我们做开发必然要和http打交道对吧， 并且还有一些新手朋友也要学习http的相关知识，但是http的知识点比较多和杂乱,如果你没有一个看得见摸的着的数据参照，是很难去把控http信息, 那么要理解http协议，我个人建议可以先从抓包工具开始从浅入深的形式慢慢了解http以及Fiddler这款抓包工具的使用

所以不管你是分析http还是刚刚学习http的朋友 ,都可以先学习一下Fiddler抓包工具!

并且在windows系统下只要一提到抓包肯定首选的就是Fiddler

总之学习了Fiddler之后，会让你对http的理解更上一层楼!

下载Fiddler

官方下载地址

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

填写好电子邮箱和国家地区 点击Download for windows就可以下载了

如图

down.png

注意 这个Fiddler工具是基于.NET Framework的 ,因为Fiddler是c#开发的

如果是比较老的windows系统要保证运行环境!☺️

Fiddler的安装方法也很简单 获取到安装包之后,直接选择安装路径 或 无脑下一步就可以了!☺️

安装成功会显示如下界面!

setup.png

软件体系结构—B/S 与 C/S架构

B/S架构

在了解Fiddler原理之前，还先清楚我们web最基本的架构是什么，就是B/S架构, 它也是目前最常用的一种软件架构

B就是浏览器(Browsers) 也就是客户端 这边

S就是服务器端(Server)也就是web服务器这边

我们平常的web服务、web项目、web应用都是运行在服务端的, 那么通过绑定ip地址+端口监听的形式来接收和处理一些前端也就是客户端发起的http请求, 从而客户端通过http协议和请求就可以获取到指定服务器上的页面 文件 资源、等等..

如图

bs.jpg

举个例子

当你在浏览器地址栏上输入百度的地址之后，服务器端就会给你返回一个百度的html页面资源

总结

B/S架构就是浏览器/服务器的一种交互模式，是Browser/Server的简称。

并且这种架构的软件不需要在用户的电脑上安装任何客户端程序，只需要在用户的电脑上安装浏览器即可。

用户仅仅使用浏览器通过web服务器和数据库做交互，交互的结果将会以html网页的形式显示在浏览器上。

C/S架构 [了解]

出了我们的B/S架构，其实还有一种就是C/S架构是客户端/服务端的一种交互模式，是Client/Server的简称。它是早期常用的一种软件架构，这种架构的软件需要在用户的电脑上安装客户端程序, 有兴趣的朋友可以自行了解，这里就不过多赘述了!

我们平常在进行软件开发时，通常会根据需求在两种基本架构中进行选择!

HTTP 基础知识

学习Fiddler的时候,HTTP的知识点也是必不可少的, 所以这里必须要给大家简单的介绍一下HTTP的相关知识!

http中文意思为超文本传输协议 英文全称为Hyper Text Transfer Protocol

它是用于万维网服务器传输超文本到本地浏览器的一种传输协议

目的是保证客户端与服务端之间的通信

什么是http请求和响应?

http的工作方式为一个简单的客户端请求 与 服务端响应的应答过程

它指定了客户端发送给服务器什么样的消息形式以及得到什么样的消息响应

所有的www文件都必须遵循这个标准协议, 目的是提供一种发布和接收html页面的方法

举个例子

比如说 客户端（浏览器）向服务器提交一个http请求, 那么服务器又会向客户端这边返回响应信息。而这些响应信息包含关于客户端请求的状态信息以及客户端所需要的内容信息。

如图

http_1.png

http协议和web之间的本质

其实就是浏览器和服务器打交道的

客户端向服务器端发送Http请求,然后服务器端向客户端返回http响应!

http协议就是浏览器和服务器之间进行沟通的一种规范, 也就是以这个规范来向服务器发起请求, 服务器才会给客户端进行正确的响应, 所以http有的时候也可以理解为是一种 规范、规则、标准

http协议是属于应用层的协议,而且是基于TCP/IP协议的, 也就是说http通信发生在TCP/IP链接之上

通俗一点说http协议就是基于TCP的一种应用层协议 它不会关系数据传输的细节问题,也就是说你不用去关心它下层TCP的运行逻辑, 它的核心只在于用来规定客户端和服务端的数据传输格式

最早http是用来向客户端传输html文件内容,默认的端口80

扩展

有兴趣的朋友可以自行了解一下iso网络七层模型

通俗点说http，就是在请求和响应之后，服务器端立即关闭连接，并释放资源，这样既保证了资源可显示与可用性，也吸取了TCP协议的可靠性优点,但是缺点就无法跟踪用户的操作了,所以我们在后端开发的学习中才会接触一个东西叫session和cookie技术

所以你也可以理解为http是基于请求与响应的模式, 并且是无状态的应用层协议

http请求和响应的基本原理

任何一个http请求都只会分为两个部分: 一个请求报文另外一个是响应报文

请求报文是客户端按照一定的格式生成一段文本,然后发给我们的服务端, 而服务器接收到了这样一个请求报文就会解析里面的内容,然后做出回馈，也就是响应

响应报文也就是服务器端根据请求报文反馈给客户端的文本信息

http请求报文 (request)基本结构

http请求(request)也叫请求报文一个基本的http请求报文结构分为如下几点:

1. 请求行:就是请求方式和协议,也就是说用于描述客户端的请求方式,例如post/get方式, 以及请求的资源名称和HTTP协议的版本号!
2. 若干个请求头: 这些也叫消息头告诉服务器发送的是什么数据类型，编码类型、请求的是哪台主机、以及客户端浏览器的一些系统环境 等等， 这些消息头中有很多头部字段名 和 对应的值它的格式为 name:value
3. 空白行
4. 请求正文内容

抓包了解一下

那么我们在学习http知识的时候 就可以先直接使用Fiddler来抓取一个http请求和http响应来先看看到底是什么东西!

这样也有助于一些新手来理解http!

我们可以通过Fiddler抓取网络数据包的手段，就可以看到一个基本的http请求结构都包含哪些信息!

例如一个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中文名为统一资源定位符 英文全称Uniform Resource Locator ,

我们网络中的每一信息资源都有统一的且在网上唯一的地址!

URL具体由4部分组成：协议、主机、域名、端口、路径文件、[附加资源]

URL的一般语法格式为：

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

1.协议 (protocol)

协议有http、ftp、https、等...

2.主机名 (hostname) + 域名

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

3.端口 (port)

端口是一个数字, 端口是可选的 省略时使用方案是服务器默认配置的端口

例如 80、8080、..

各种传输协议都有默认的端口号，如http协议的默认端口为80

如果URL地址省略端口，则使用默认端口号

注意

有时候出于安全或其他考虑，可以在服务器配置上对端口进行重新定义，也就是采用非标准端口号，那么此时，URL地址中就不能省略端口号这一项。

4.路径文件 (path)

由零或多个/符号隔开的字符串，一般用来表示主机上的一个目录或文件地址

例如: /tpl/index.php

5.查询参数 附加资源 (query-parameters)

这一项在URL中也是可选的 用于给动态网页如 PHP/JSP/ASP/ASP.NET等后端页面 传递参数的一种方式，并且如果是GET请求方法, 那么可有多个参数, 它们彼此用&符号隔开，每个参数的名和值用=符号隔开

语法格式: ?参数=值&参数2=值 以此类推!

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

举个例子

一个比较常见的url地址， 如下:

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

3.请消息求头 (Request Header)

请求消息头也叫消息头告诉服务器发送的是什么数据类型，编码类型、请求的是哪台主机、以及客户端浏览器的一些系统环境 等等前面已经说过了, 并且请求头是可以由开发人员根据需求去进行自定义的

这些消息头中有很多头部字段名 和 对应的值它的格式为 name:value

我们常见的一些请求头如下表:

我们可以用Fiddler截取一个请求头看看

如图

request_2.png

4.空行

空白行 也就是在消息头结束的下方，会存在一个空白行, 这是必须存在的, 是由HTTP标准规定的!

5.请求体

请求体它的出现是要根据请求的方式不同而不同, 也就是如果是POST那么就会以键与值的形式进行发送, 如果是GET请求那么这里就不会包含请求正文内容

http响应报文 (Response)基本结构

http响应(response)也叫响应报文

其实响应报文比请求报文更加简单, 你只要能够搞懂请求报文 那么响应报文就很容易搞懂!

http响应(response)的一个基本结构分为如下几点:

1. 响应行
2. 响应头
3. 空白行
4. 响应体

我们可以通过Fiddler抓取网络数据包的手段，就可以看到一个基本的http响应结构都包含哪些信息!

举个例子

Response_0.png

如果你还看不明白 那么我们先来看一张http响应(response)图解 你就会明白了!

Response_1.jpg

然后我们来逐一拆解上图中的各个部分!

1.响应行

响应行也叫状态行， 上图中响应行内部其实包含了3个重要的信息部分:

HTTP协议的版本、HTTP状态码、HTTP的状态描述

1.HTTP协议的版本现目前都是HTTP/1.1 版本 这个没什么好说的!

2.HTTP状态码 可以用来表示网页服务器端给客户端返回的HTTP响应状态, 通常都是3位数字的代码, 而这些常见的状态码又可以分为几种提示类型: 🙂 如下表

3.HTTP的状态描述是紧跟在状态码后面的英文单词

每一种具体类别状态码+状态描述可以参考下表:

1xx: 提示消息类型

2xx: 成功消息类型

3xx: 重定向类型

4xx: 客户端错误信息

5xx: 服务器错误信息

2.响应头 (Response Header)

响应头也叫消息报头 也就是服务器端要告诉客户端的一些附加信息, 但是也有可能这些响应头是由后端开发人员进行自定义的!

而且这里的响应头跟请消头 很类似, 格式也基本一样, 它的格式为 name:value

具体我这里也列举了一些常见的响应头 如下表:

还有更多的响应头这里就不一一列举了!

3.空白行

空白行也就是http规范制定的必须存在的一个空行, 空行的目的就是一种格式，也就是要告诉用户接下来的内容就是正文内容了!

4.响应体

响应体也就是实际从服务器返回给客户端的正文内容,也可能是一些字符串， 也可以是任意的格式:

响应体大多数情况下都是html、json、文本、xml 这些格式!

小结

对于http相关的的知识点 就说这么多了,对于学习fiddler足够了

接下来你就可以愉快的学习Fiddler了🤗

Fiddler运行原理

Fiddler的原理简单点说就是通过改写HTTP代理然后让网络数据从Fiddler这边通过 这样子来监控并且截取到网络信息数据。当你打开Fiddler的时候, 就已经设置好了浏览器的代理了。当你关闭的时候，它会自动的帮你把代理还原

之前也说过了 B/S架构就是客户端和服务器之间的 请求和响应, 刚刚我们也知道了Fiddler通过代理的形式来进行监听，它在请求和响应中起到一个什么样的角色呢?

这里还要清楚一点的就是 浏览器默认走的是我们的系统代理

其实这里的代理监听 就是在 请求和响应之间插了一脚, 让fiddler成为系统代理

在你安装好Fiddler之后启动，并可以打开菜单栏中的Tools--->options--->Connections

如下图

fiddler_1.png

看到了吧,这里有一句Act as system proxy on startup意思就是(在启动时充当系统代理),并且默认监听端口设置为了8888

如图

fiddler_2.png

这里以chrome浏览器为例:

只要fiddler一旦启动并开始监听的时候，就会默认成为系统代理, 所以你的网络请求 也就会被fiddler所抓取到!

如图

fiddler_3.jpg

或者如下图一样Fiddler就是一个中间的proxy(代理服务器)

fiddler_3-3.png

fiddler_4.png

当关闭fiddler的时候，手动设置代理选项就会被清空

所以我们才会说Fiddler是介于客户端和服务器中间的一个角色, 监控客户端和服务器所有通信的过程!

小结

Fiddler是以代理WEB服务器的形式工作的,浏览器与服务器之间通过建立TCP连接以HTTP协议进行通信，

浏览器默认通过自己发送HTTP请求到服务器，本地使用代理地址:127.0.0.1, 端口:8888.

而当Fiddler开启会自动设置系统代理， 退出的时候它会自动注销代理，这样就不会影响别的程序。

但是如果Fiddler非正常退出，这时可能会因为Fiddler没有自动注销，而会造成网页无法访问。

解决的办法是重新启动下Fiddler就可以了, 这也是有很多新手安装了Fiddler之后导致一些网络无法访问的原因之一!

如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “评论” “收藏” 一键三连哦！

如果以上内容有任何错误或者不准确的地方，欢迎在下面 👇 留个言指出、或者你有更好的想法，欢迎一起交流学习❤️❤️❤️❤️❤️