反骨仔

一个业余的 .NET Core 攻城狮

0%

05 Web 网页抓包和 Fiddler 修改包

Fiddler 不但可以捕获到 HTTP 请求和 HTTP 响应,而且可以随意修改 HTTP 请求和 HTTP 响应,比如可以修改 HTTP 请求中的 Referer 、Cookie 等。可以通过“伪造“相应信息达到相应的目的,如可以模拟用户的请求等。

通过构造请求数据,可以突破表单的限制,随意提交数据;也可以绕过 JavaScript 和表单的限制来调试;还可以拦截 HTTP 响应,修改 HTTP 相应的 Header 和 Body。

5.1 网页是如何打开的

5.1.1 一个网页的组成

一个网页是由多个组件组成的。

image-20210103005515598

5.1.2 打开一个网页,浏览器需要发送很多个请求

在浏览器中,打开一个网页的过程如下。

  1. 在浏览器输入 http://www.cnblogs.com
  2. 浏览器会发送第一个 HTTP 请求去获取页面布局的 HTML, 这个请求叫作“父请求”。然后服务器把 HTTP 响应发回给浏览器。
  3. 浏览器会分析 HTTP 响应中的 HTML 。如果发现 HTML 中引用了很多其他文件,比如图片、css 文件、js 文件等,浏览器会自动再次发送很多 HTTP 请求,去获取图片、css 文件或者 js 文件。这些 HTTP 请求 叫作“ 子请求”。
  4. 当所有子请求的响应都返回后,浏览器会把 1 个父请求加上多个子请求渲染出来。这样就形成了 一个页面,网页就在浏览器上显示出来

5.1.3 用 Fiddler 查看一个 Web 页面打开的过程

启动 Fiddler,打开浏览器,输入 www.cnblogs.com/liqingwen

image-20210103011631433

我们可以看到 Fiddler 捕获了很多 HTTP 请求,其中 http://www.cnblogs.com/liqingwen 这个URL 是父请求,其他都是子请求。等所有请求的响应都结束后,浏览器才渲染页面。

如果没有采用 AJAX 技术,则某个子请求加载速度慢将会影响整个网页的加载速度。

5.1.4 用 Fiddler 选择请求

  1. 用 Fiddler 选择子请求 。 先找到父请求,鼠标右键选择 Select -> Child Requests ,就能选中所有的子请求,或者按快捷键【C】

image-20210103011838845

image-20210116152712888

  1. 用 Fiddler 选择父请求。找到任何一个子请求 ,鼠标右键选择 Select -> Parent Requests,就能选中父请求,或者按快捷键【P】

image-20210103011918524

  1. 用 Fiddler 选择相同的请求。选择一个请求,鼠标右键选择 Select -> Duplicate Requests,就能选中相同的请求了,或者按快捷键【D】

image-20210103012003855

5.2 Web 页面简单的性能测试

如上所述,一个网页的加载速度跟父请求和子请求都是有关系的。

  1. 子请求出现了 404 或者 500 之类的错误,会严重影响整个网页的加载速度
  2. 子请求的响应速度慢也会影响网页加载的速度

我们可以使用 Fiddler 来查看打开一个网页的每个请求的响应时间和状态码。启动 Fiddler 中的 Statistics 面板可以清楚地看到每个 HTTP 请求的响应时间。

image-20210116152858295

Statistics 是一个详情和数据统计面板,显示了每条 HTTP 请求的具体统计信息,如发送和接收的字节数、发送和接收的时间,以及粗略统计的世界各地访问该服务器所花费的时间。

在 Overall Elapsed 中能看到 HTTP 响应返回所需要的响应时间。

5.3 使用 Fiddler 来查看晌应

HTTP 响应可能是一个 HTML 文档,可能是一个图片,也可能是一个 JSON。

使用 Raw 选项卡可以查看完整的 HTTP 响应,我们也可以用其他选项卡来查看。

如果 HTTP 响应的是 HTML 文档,则我们可以用 WebView 选项卡来查看。

image-20210116153124128

如果 HTTP 响应是图片,那么我们可以用 ImageView 选项卡来查看。

image-20210103012508571

如果 HTTP 响应是 JSON,我们可以通过 JSON tab 选项卡来格式化 JSON,这样查看起来更方便 。

image-20210103012559799

5.4 Fiddler 下断点,修改 HTTP 报文

Fiddler 不但能抓包,还能改包 。想要修改 HTTP 报文,就需要先下断点拦截住 HTTP 请求报文或者 HTTP 响应报文,修改后再放行。

Fiddler 既能修改 HTTP 请求报文,也能修改 HTTP 响应报文。

5.4.1 Fiddler 中设置断点修改 HTTP 请求

Fiddler 本身是一个代理服务器, Fiddler 可以设置断点,拦截住 HTTP 请求,修改 HTTP 请求后再放行。

image-20210103012725500

设置好断点后,你可以修改 HTTP 请求的任何信息,包括 Host 、Cookie 或者表单中的数据。设置断点有以下两种方法。

第一种叫全局断点 。启动 Fiddler,单击菜单栏中的 Rules -> Automatic Breakpoint -> Before Requests,或者使用快捷键【F11】,这种方法会拦截所有的会话。

image-20210103012922141

要想取消全局断点,可以单击 Rules -> Automatic Breakpoint -> Disabled,或者使用快捷键【Shift+F11】。

第二种叫单个断点。己知某个请求 的 URL 地址,这时候只需要针对这一个请求打断点调试,其他的请求不拦截。

在 Fiddler 左下角的 QuickExec 命令行中输入命令“ bpu www.baidu.com ”,这种方法只会拦截 www.baidu.com

image-20210103013113062

要想消除单个断点,可以在命令行 中输入命令“ bpu ” 。

5.4.2 实例:Fiddler 修改 HTTP 请求

浏览器想访问 http://www.163.com,可以通过 Fiddler 修改 HTTP 请求,让浏览器去访问 www.cnblogs.com/liqingwen。

  1. 启动 Fiddler ,在菜单栏中单击 Rules -> Automatic Breakpoint -> Before Requests
  2. 打开浏览器 ,输入“ www.163.com ”,这时候会发现任务栏上的 Fiddler 图标在闪烁 ,说明 Fiddler 拦截住了 HTTP 请求
  3. 回到 Fiddler 界面,在菜单栏中单击 Rules -> Automatic Breakpoint -> Disable (因为己经拦截住想要 的 HTTP 请求了,其他 HTTP 请求就不需要拦截了)
  4. 被拦截的 HTTP 请求有一个红色的 T 图标,选中需要修改的 HTTP 请求 ,选中“ Inspectors"面板,使用 Raw 选项卡(必须要在 Raw 选项卡下才能修改)
  5. 把 URL 修改为“ www.cnblogs.com/liqingwen”,同时把 HOST 修改为“www.cnblogs.com”,然后单击绿色的“Run to Completion”按钮放行

image-20210103013644127

  1. 回到浏览器,此时我们会发现浏览器打开的是 cnblogs 的页面了

如果单击黄色按钮“ Break on Response",则会继续拦截这个 HTTP 请求的响应。

5.4.3 Fiddler 中设置断点修改 HTTP 响应

当然 Fiddler 中也能修改 HTTP 响应。拦截住 HTTP 响应,修改 HTTP 响应后再放行。

image-20210103014135725

设置断点,拦截 HTTP 响应也有 2 种方法,具体如下。

第一种是全局断点。启动 Fiddler,单击 Rules -> Automatic Breakpoint -> After Response。这种方法会中断所有的会话。

要想取消全局断点,可以单击 Rules -> Automatic Breakpoint -> Disabled 。

第二种是单个断点。 在命令行 中输入命令“ bpafter www.baidu.com" 。 这种方法只会中断 www.baidu.com

要想消除单个断点,可以在命令行中输入命令“ hpafter”。

5.4.4 Fiddler 修改网页的标题

【实例】用户访问 一个网页,通过 Fiddler 修改响应的方法修改网页的标题 。具体操作步骤如下

  1. 启动 Fiddler,在左下角的 QuickExec 命令行中输入“ bpafter https://www.cnblogs.com/liqingwen/p/7087990.html"

image-20210116155038805

image-20210103014509409

  1. 打开浏览器,输入“ https://www.cnblogs.com/liqingwen/p/7087990.html

  2. 在 Fiddler 中选中“https://www.cnblogs.com/liqingwen/p/7087990.html“,选中“Inspectors ”面板,Response 下使用 Raw 选项卡(必须要在 Raw 选项卡下才能修改)。

  3. 修改 HTML 代码为 <title>我修改了这里</title>,然后单击 Run to Completion 放行

image-20210103014905572

  1. 在浏览器中查看网页的标题

5.4.5 伪造 Referer

如果没有 Referer,有些网站会认为是盗链。我们现在使用 Fiddler 来伪造一个 Referer:

  1. 启动 Fiddler,设置一个全局断点,在菜单栏中单击 Rules -> Automatic Breakpoint -> Before Requests
  2. 打开浏览器,输入 https://img3.laibafile.cn/p/m/280148719.png
  3. 这时候,Fiddler 会拦截到该请求。在 Raw 选项卡上修改 HTTP 请求,添加一个 Refere:www.tianya.cn

image-20210103015256721

  1. 单击绿色的 Run to Completion 按钮放行,我们发现浏览器中能看到真正的图片。

参考

  • 《HTTP 抓包实战》