Fiddler 补充(Fiddler 配置与基础操作)

2.1.1 基础介绍

Fiddler一旦启动就会自动开始工作,我们此时打开浏览器随便点击几个页面就可看到 Fiddler 抓取了许多网络包。(图六-1)

图六-1

图六-1

2.1.2 软件基本界面

接下来我们来进一步解析一些 Fiddler。

图六-2

图六-2

Fiddler 每个部分的名称已经在上图(图六),最上面是我们的工具栏,左边是我们的会话列表,左下是命令行工具,右边 HTTP request(图上我 request 多打了一个 s 抱歉),右下也就是 HTTP response。

  • 左下角的 Captuing 是 Fiddler 控制抓取的开关。
  • 会话列表:也就是我们抓到的数据都会在会话列表显示;
  • 命令行工具:我们可以进行一些过滤等操作,我们可以直接在命令里面输入 help 就会自动弹出一个页面,更多信息或者命令行命令可以从跳出的这个页面了解。
  • HTTP request:也就是我们 http 的请求信息,里面包含请求方法、http 协议、请求头(user-agent)等等;
  • HTTP response:也就服务器给我们返回的信息;

我们继续往下看这张图(图六-3):

图六-3

图六-3

  1. [#] Request 顺序
  2. [result] HTTP 状态码
  3. [protocol] 请求使用协议
  4. [Host] 请求地址域名
  5. [URL] 统一资源定位符,请求的地址
  6. [Body] 请求大小 byte
  7. [Caching] 缓存控制
  8. [Context-Type] 请求响应类型
  9. [Process] 发出请求的进程名称
  10. [Comments] 用户添加的备注
  11. [Custom]用户设置的自定义值

2.1.3 Fiddler 模拟场景

图六-4

图六-4

在 Ruels 里面可以模拟各种场景:

  1. 请求之前进行登陆验证;
  2. 对网页进行压缩,测试性能;
  3. 模拟不同客户端的请求;
  4. 模拟不同网速不同情况,测试页面容错性;
  5. 禁用缓存,方便调试服务器静态资源;
  6. Hide Image Request :隐藏图像请求(我一般开启);
  7. Hide CONNECTs:把我们的 TCP/IP 握手过滤掉,因为我们不需要看它三次握手三次挥手(我一般开启);
  8. Apply GZIP Encoding:开启页面压缩,也就是说服务器不用一次性传输很多数据,就类似在电脑上压缩文件来节约空间一样,目的是把页面压缩以达到更好的性能;

2.1.4 查看请求内容

随意双击左侧的一个网络包,右侧的 inspectors 里就可以查看请求内容,与浏览器开发者选项卡中的内容相同。(图七)

图七

图七

2.1.5 对于HTTPS网站的信息我们是无法查看的

我可以看到下面图的黄色提示(图八),别急接下来会讲到的。

图八

图八

2.2 设置

那上面所说的一些基本界面中的信息它不难,那难在哪里呢?

答:难在如何进行一个设置

那接下来我们来一起设置一下我们的 Fiddler 让它可以抓取我们的浏览器数据的数据包,后面会给同学们讲解 App 的数据包。

2.2.1 设置抓取浏览器的数据包——HTTPS 选项卡

接下来,我继续往下设置,也还是在 Tools 里面的 Options ,我们可以看到有很多的选项卡如下图(图八-2):

图八-2

图八-2

我们不仅要抓取 HTTP 的数据包,也还要抓取 HTTPS 的数据,相同手机 APP 上也是有 HTTP 和 HTTPS。所以这里我们需要它解密 HTTPS 数据流量,这里也顺便解决上面提到无法抓取 HTTPS 的问题。

所以,我们可以通过伪造 CA 证书来欺骗浏览器和服务器,从而实现 HTTPS 解密,就是把 Fiddler 伪装成为一个 HTTPS 服务器,在真正的 HTTPS 服务器面前 Fiddler 又伪装成浏览器(其实也就是在中间,不清楚的可以看上面的图一)。

我们先点击工具栏中的 Tools,然后点击 Options,如下图(图九):

图九

图九

接下来点开 HTTPS 选项卡,勾选 Decrypt HTTPS 如下图所示(图十):

图十

图十

全部选是,之后再次访问HTTPS网站就可以抓包查看了。上图(图十)的图十的提示就是我们要安装一个 CA 证书,不过这个证书是 Fiddler 自己的证书,我们选是即可,在这里 Fiddler 其实扮演的就是中间人攻击。

图十一

图十一

虽然上面提到了,那为了让大家更清晰,我这里再提一下:大家可以看上图(图十一) 理解一下,也就是我们客户端发出去的请求会由我们的 Fiddler (中间人)来捕获,由 Fiddler 的证书来进行解密,解密完成之后再由 Fiddler 的证书进行加密然后转发到服务器上面。服务器再将所请求的数据返回(加密过的),Fiddler 接收到数据之后再进行解密,解密完成之后再发数据返回给客户端(明文数据)。这也就是我们 Fiddler 在中间做的一个中间人操作。

我接下来可以看见,在 Decrypt HTTPS 下面还有一个选项,如下图(图十二):

图十二

图十二

这是让你选择抓取的对象:

  • ...from all processes:抓取所有的进程;
  • ...from browsers only:仅抓取浏览器;(这里为了方便小白入门以免抓取到其请求的信息,我们先选择“仅抓取浏览器进程”)
  • ...from non-browsers noly:抓取除浏览器进程之外的数据;
  • ...from remote clients only:仅抓取远程客户端;(当我们抓取 App 数据端的时候,就可以选择该选项)

最终我们在 HTTPS 选项卡中设置的最终版如下图所示(图十三):

图十三

图十三

2.2.2 Connections 选项卡

接下来,我们来设置一下 Connections 选项卡,点击 Connections 选项卡之后,界面如下(图十四):

图十四

图十四

这里需要设置 Fiddler 设置端口号(Fiddler listens on port)一般这里的端口号都可以设置只要不是系统的端口号冲突即可。这里,我一般设置成 8889,当然默认也是可以的。并且你也要勾选允许远程电脑进行连接(Allow remote computers to connect)如果你不勾选你的手机是连不到 Fiddler 的,也就是说你的抓包工具是抓不到你手机上的数据包的。

当你点击(Allow remote computers to connect)的时候,会弹出如下提示框(图十五):

图十五

图十五

点击确定即可,然后点击“ok”即可,操作如下动图(图十六):

图十七

图十六

截止这里,就已经设置好了,我们就可以抓取浏览器的数据了。

2.2.3 Fiddler抓包手机APP

首先需要点击Tools->options->Connections->Allow remote computers to connect

设置好之后,需要打开你的手机,在手机设置里把手机的代理设置为电脑端的IP和端口,因为不同手机的设置环境不同,这里需要你自行百度,假设我们电脑地址为192.168.1.1,在手机配置好代理之后,打开手机浏览器,输入192.168.1.1:8888,会出现如下界面

点击最下边的 FiddlerRoot centificate,下载并且安装证书。

最后浏览手机 APP百度外卖,就可以在电脑端抓包了。

2.3 简单操作 Fiddler

2.3.1 清空会话列表中的信息

方法有两种,第一种是下图的操作方法,先全选(Control + A)然后鼠标右键,选择“remove”>>> “All Sessions”即可。具体操作看下图(图十七):

图十七

图十七

第二种方法,直接上动图(图十八):

图十八

图十八

2.3.2 设置浏览器代理

上面我们简单的配置了一下 Fiddler 接下来需要配置一下我们的浏览器,使我们的浏览器通过代理来访问互联网,那我们应该如何设置呢?

这里我们需要用到 Chrome 上的一个插件,名称叫做:Proxy SwitchyOmega 这里需要到谷歌应用商店,链接:https://chrome.google.com/webstore/category/extensions?hl=zh-CN,然后输入:Proxy SwitchyOmega 即可添加该扩展程序,但考虑到大部分人不支持“科学上网”这里提供三个链接下载:

操作视频:https://www.aiyc.top/archives/450.html

推荐下载地址:https://www.aiyc.top/archives/450.html

下载地址1:https://github.com/FelisCatus/SwitchyOmega/releases

下载地址2:https://proxy-switchyomega.com/download/

s随便选择一个下载地址下载即可,安装也很简单可以直接拖拽到浏览器即可安装。一般安装成功后,都会出现在下图位置(图十九):

图十九

图十九

点击上图的红色方框里面的插件,就会出现下图所示(图二十):

图二十

图二十

点击”选项“之后就会出现如下页面(图二十一):

图二十一

图二十一

点击“新建情景模式”之后你会看见如下界面(图二十二):

图二十二

图二十二

配置信息可参考如下图片填写,然后点击创建即可(图二十三):

图十三

图二十三

点击创建之后,你会看到如下界面(图二十四):

图二十四

图二十四

接下来,我们来进一步设置,代理协议选择 HTTP 代理服务器填写 127.0.0.1 代理端口就是上面设置 Fiddler 时设置的端口,这里我设置的是 8889,所以填的也就是 8889,下图已经给出(图二十五):

图二十五

图二十五

记得修改完成之后点击“应用选项”否则你这个情景模式是无法保存的。接下来我们就可以把浏览器改成 Fiddler 的情景模式,也就是说我们可以通过 Fiddler 来抓取数据了。操作如下动图(图二十六):

图二十六

图二十六

以上就是配置好了,不过这里要注意的是,我们配置完成之后要重新启动一下 Fiddler 不然会显示未连接到互联网如下图(图二十七):

图二十七

图二十七

重启应用之后,我们可以把 Fiddler 会话列表清空,然后访问:https://www.aiyc.top/ 操作如下图(图二十八):

图二十九

图二十八

从上面的操作可以看到,我们成功抓取到了数据,那如何看里面的信息呢?

我们直接点击相应的数据即可,操作如下动图(图二十九):

图二十九

图二十九

上面我们选择 Inspectors 然后点击 Headers 我们一般使用 Raw 查看,我们还可以查看一下我网站返回的数据,操作如下动图(图三十):

图三十

图三十

之后会给大家讲解如何设置抓取 App 的手机的数据包,那这里还有一个要设置的,不过在讲如何设置之前,我们来看看为什么要设置,这里我们也是 先清空会话列表,请求百度网址,并查看返回的数据,操作如下动图(图三十一):

图三十一

图三十一

我们可以看见,给我返回的数据是乱码,如下图(图三十二):

图三十二

图三十二

那该如何解决呢?

方法一点击如下图位置的提示即可解决(图三十三):

图三十三

图三十三

不过,方法一的话,每次遇见乱码都得再点以次,这样显然不是我们想要的,我们可以再进行一步设置,如下图设置(图三十四):

图三十四

图三十四

这样就可以解决了。

2.3.3 自定义请求发送

在右边的 Composer 选项卡中,我们可以自定义请求,手动写一个,也可以从左边的会话中拖拽一个过去。

我们只需要编写简单的URL,当然还可以定制一些 user-agent

在这里插入图片描述

在这里插入图片描述

AI悦创·创造不同!
AI悦创 » Fiddler 补充(Fiddler 配置与基础操作)

Leave a Reply