【计算机网络】深入解析 HTTP 协议的概念、工作原理和通过 Fiddler 抓包查看 HTTP 请求/响应的协议格式

发布于:2025-03-10 ⋅ 阅读:(17) ⋅ 点赞:(0)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述


网络原理— HTTP


1. 什么是HTTP?


HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议:

HTTP 往往是基于传输层的 TCP 协议实现的 (HTTP1.0,HTTP1.1,HTTP2.0 均为TCP,HTTP3基于UDP实现)


我们平时打开一个网站,就是通过HTTP协议来传输数据的:

在这里插入图片描述

当我们在浏览器中输入一个搜狗搜索的"网址"(URL)时:
在这里插入图片描述

  • 浏览器就给搜狗的服务器发送了一个HTTP请求
  • 搜狗的服务器返回了一个HTTP响应

这个响应结果被浏览器解析之后,就展示成我们看到的页面内容.

  • 这个过程中浏览器可能会给服务器发送多个HTTP请求,服务器会对应返回多个响应;
  • 这些响应里就包含了页面HTML, CSS, JavaScript, 图片字体等信息;

所谓"超文本"的含义,就是传输的内容不仅仅是文本(比如html,css这个就是文本),还可以是一些其他的资源,比如图片,视频,音频等二进制的数据.


2. 理解"应用层协议"


我们已经学过TCP/IP,已经知道目前数据能从客户端进程,经过路径,选择 跨网络 传送到 服务器端进程 [IP+Port]

可是,仅仅把数据从A点传送到B点就完了吗?

这就好比,在淘宝上买了一部手机:

  • 卖家[客户端] 把手机通过 顺丰[传送+路径选择] 送到 买家[服务器] 手里就完了吗?

  • 当然不是,买家还要使用这款产品;

  • 在买家使用之后,给卖家打分评论。

所以,我们把数据从 A端 传送到 B端 ,TCP/IP 解决的是顺丰的功能,两端还要对数据进行加工处理或者使用;

因此,我们还需要一层协议,不关心通信细节,关心应用细节!这层协议叫做应用层协议

一般情况下,应用是有不同的场景的,所以应用层协议是有不同种类的,其中经典协议之一的 HTTP 就是其中的佼佼者。

再回到我们刚刚说的买手机的例子:

  • 顺丰相当于[TCP/IP]的功能,

  • 那么买回来的手机都附带了说明书【产品介绍,使用介绍,注意事项等】;

  • 该说明书指导用户该如何使用手机,此时的说明书可以理解为用户层协议


3. 理解HTTP协议的工作过程


当我们在浏览器中输入一个"网址,此时浏览器就会给对应的服务器发送一个HTTP请求.

对方服务器收到这个请求之后,经过计算处理,就会返回一个HTTP响应.

在这里插入图片描述

事实上,当我们访问一个网站的时候,可能涉及不止一次HTTP请求/响应交互过程

可以通过 chrome 的开发者工具观察到这个详细的过程:

  • 通过F12打开 chrome 的开发者工具,切换到Network标签页;

  • 然后刷新页面即可看到如下图效果,每一条记录都是一次HTTP请求/响应:

在这里插入图片描述

注意:

  • 当前搜狗主页是通过 https 来进行通信的,
  • https 是在 http 基础之上做了一个加密解密的工作,后面再介绍.

4. 通过抓包工具 fiddler 查看 HTTP协议格式


HTTP 是一个文本格式的协议;

可以通过Chrome开发者工具或者Fiddler抓包,分析HTTP请求/响应的细节;


4.1 抓包工具的使用


以Fiddler为例:Fiddler下载地址

可以使用搜狗浏览器下载,避免下载时发生其他应用捆绑下载;

安装过程比较简单,一路next即可


接下来,设置 fiddler ,让它支持 HTTPS:

在这里插入图片描述


在这里插入图片描述

值得一提,在首次安装 fiddler 并且勾选上面的选项时,会弹出是否信任 fiddler 的根安全证书,一定要点 yes ,否则只能卸载并且重新安装;


显示请求的原始数据:

在这里插入图片描述


如果要放大请求中的字体,可以用记事本打开:

在这里插入图片描述


上面是查看请求的原始数据,下面就是查看响应的原始数据:

在这里插入图片描述


在响应的详细信息(右下角)的框中出现乱码,是因为这些信息是经过压缩后的数据;

如果要看完整的详细信息,就点击Response body is encoded. Click to decode这个黄色按钮:

在这里插入图片描述

点开后,响应信息解压缩,可以通过文本打开进一步查看信息;


在这里插入图片描述


4.2 抓包工具的原理


Fiddler相当于一个"代理":

  • 浏览器访问 sogou.com 时,就会把HTTP请求先发给 Fiddler
  • Fiddler 再把请求转发给 sogou 的服务器
  • 当 sogou 服务器返回数据时,Fiddler 拿到返回数据,再把数据交给浏览器

在这里插入图片描述
因此 Fiddler 对于浏览器和sogou服务器之间交互的数据细节,都是非常清楚的.


4.3 抓包结果


以下是一个HTTP请求/响应的抓包结果


HTTP请求

在这里插入图片描述


首行:

  • [方法]+[url]+[版本]

Header (请求头):

  • 请求的属性,冒号分割的键值对
  • 每组属性之间使用\n分隔;
  • 遇到空行表示 Header 部分结束

Body:

  • 空行后面的内容都是Body;
  • Body允许为空字符串.
  • 如果Body存在,则在Header中会有一个Content-Length属性来标识 Body 的长度;

HTTP响应

在这里插入图片描述

首行:

  • [版本号]+[状态码]+[状态码解释]

Header (响应头):

  • 请求的属性,冒号分割的键值对;
  • 每组属性之间使用\n分隔;
  • 遇到空行表示 Header 部分结束

Body:

  • 空行后面的内容都是Body;
  • Body允许为空字符串.
  • 如果Body存在,则在Header中会有一个Content-Length属性来标识 Body 的长度;
  • 如果服务器返回了一个 html页面,那么html页面内容就是在body中.

4.4 协议格式总结


在这里插入图片描述

思考问题:为什么HTTP报文中要存在 "空行" ?

  • 因为HTTP协议并没有规定报头部分的键值对有多少个;

  • 空行就相当于是"报头的结束标记",或者是"报头和正文之间的分隔符";

  • HTTP在传输层依赖TCP协议,TCP是面向字节流的

  • 如果没有这个空行,就会出现"粘包问题".


在这里插入图片描述

在这里插入图片描述