chaoz的杂货铺

生命有息、学无止境、折腾不止

0%

web协议详解与抓包实战

基于 ABNF 语义定义的HTTP消息格式

维基百科

chrome Network

结构

Elements(元素面板):使用“元素”面板可以通过自由操纵DOM和CSS来重演您网站的布局和设计。

Console(控制台面板):在开发期间,可以使用控制台面板记录诊断信息,或者使用它作为 shell,在页面上与JavaScript交互

Sources(源代码面板):在源代码面板中设置断点来调试 JavaScript ,或者通过Workspaces(工作区)连接本地文件来使用开发者工具的实时编辑器

Network(网络面板):从发起网页页面请求Request后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间等),并可以根据这个进行网络性能优化

Performance(性能面板):使用时间轴面板,可以通过记录和查看网站生命周期内发生的各种事件来提高页面运行时的性能

Memory(内存面板):分析web应用或者页面的执行时间以及内存使用情况

Application(应用面板):记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、-IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等

Security(安全面板):使用安全面板调试混合内容问题,证书问题等等

Audits(审核面板):对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。比如列出所有没有用到的CSS文件等

Filters(过滤器)

domain:仅显示来自指定域的资源。您可以使用通配符()来包括多个域。例如,.com显示以.com结尾的所有域名中的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有域。

has-response-header:显示包含指定HTTP响应头信息的资源。 DevTools会在自动完成下拉菜单中自动填充它遇到的所有响应头。

is:通过is:running找出WebSocket请求。

larger-than(大于):显示大于指定大小的资源(以字节为单位)。设置值1000等效于设置值1k。

method(方法):显示通过指定的HTTP方法类型检索的资源。DevTools使用它遇到的所有HTTP方法填充下拉列表。

mime-type(mime类型:显示指定MIME类型的资源。 DevTools使用它遇到的所有MIME类型填充下拉列表。

mixed-content(混合内容:显示所有混合内容资源(mixed-content:all)或仅显示当前显示的内容(mixed-content:displayed)。

Scheme(协议):显示通过不受保护的HTTP(scheme:http)或受保护的HTTPS(scheme:https)检索的资源。

set-cookie-domain(cookie域):显示具有Set-Cookie头,并且其Domain属性与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie域。

set-cookie-name(cookie名):显示具有Set-Cookie头,并且名称与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有Cookie名。

set-cookie-value(cookie值):显示具有Set-Cookie头,并且值与指定值匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有cookie值。

status-code(状态码):仅显示其HTTP状态代码与指定代码匹配的资源。DevTools会在自动完成下拉菜单中自动填充它遇到的所有状态码。

Controls(控件)

使用这些选项可以控制 Network(网络)面板的外观和功能

1
2
3
4
5
6
7
Preserve log:是网络日志记录,如果勾上,页面刷新后,日志也不会消失(这功能很有用,比如页面跳转后,你想看页面跳转前发出的请求有哪些,比如查看别人网站登录请求,登录成功返回什么,登录成功后又发起了些什么请求,重定向到什么地址)

Disable cache:缓存开关

Online:网络控制

Group by frame:勾选了该选项后,会对网络请求按表单名称进行分组

Overview(概览)

这个图表显示检索资源的时间轴。如果您看到多个垂直堆叠的栏,这意味着这些资源被同时检索。

Requests Table(请求列表)

此列表列出了检索的每个资源。默认情况下,此表按时间顺序排序,也就是最早的资源在顶部。单击资源名称可以获得更多信息。提示:右键单击列表的任何标题栏可以以添加或删除信息列。

1
2
3
4
5
6
7
8
捕获屏幕
Controls 窗格包括的功能有网络日志录制、日志清理、捕获屏幕、过滤器,视图切换、保留日志开关、Cache开关、网络连接开关、网速阀值。

以捕获屏幕为例,点击摄像机按钮(捕获屏幕),重新加载页面即可捕获屏幕。

双击其中的截屏可以放大显示,在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息,并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

1
2
3
4
5
6
7
8
9
10
11
Name 资源名称,点击名称可以查看资源的详情情况,包括Headers、Preview、Response、Cookies、Timing。
Status HTTP状态码。
Type 请求的资源MIME类型。
Initiator 标记请求是由哪个对象或进程发起的(请求源)。
Parser: 请求由Chrome的HTML解析器时发起的。
Redirect:请求是由HTTP页面重定向发起的。
Script:请求是由Script脚本发起的。
Other:请求是由其他进程发起的,比如用户点击一个链接跳转到另一个页面或者在地址栏输入URL地址。
Size 从服务器下载的文件和请求的资源大小。如果是从缓存中取得的资源则该列会显示(from cache)
Time 请求或下载的时间,从发起Request到获取到Response所用的总时间。
Timeline 显示所有网络请求的可视化瀑布流(时间状态轴),点击时间轴,可以查看该请求的详细信息,点击列头则可以根据指定的字段可以排序。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Headers:与资源关联的 HTTP 标头。

Preview:JSON、图像和文本资源的预览。

Response:HTTP 响应数据(如果存在)。

Timing:资源请求生命周期的精细分解。

Headers(查看 HTTP 标头)

点击 Headers 可以显示该资源的标头。

Headers 标签可以显示资源的请求网址、HTTP 方法以及响应状态代码。 此外,该标签还会列出 HTTP 响应和请求标头、它们的值以及任何查询字符串参数

····可以自定义添加列····

点击 Cookies 标签可以查看在资源的 HTTP 请求和响应标头中传输的 Cookie 表。 只有传输 Cookie 时,此标签才可用。

下面是 Cookie 表中每一列的说明:

Name:Cookie 的名称。

Value:Cookie 的值。

Domain:Cookie 所属的域。

Path:Cookie 来源的网址路径。

Expires / Max-Age:Cookie 的 expires 或 max-age 属性的值。

Size:Cookie 的大小(以字节为单位)。

HTTP:指示 Cookie 应仅由浏览器在 HTTP 请求中设置,而无法通过 JavaScript 访问。

Secure:如果存在此属性,则指示 Cookie 应仅通过安全连接传输。

复制、保存和清除网络信息

Copy Response(复制响应)

将所选资源的HTTP响应复制到系统剪贴板。

Copy as cURL(复制为cURL)

将所选资源的网络请求作为cURL命令字符串复制到系统剪贴板。 请参阅将复制请求为cURL命令。

curl命令是一个利用URL规则在命令行下工作的文件传输工具。它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称curl为下载工具。作为一款强力工具,curl支持包括HTTP、HTTPS、ftp等众多协议,还支持POST、cookies、认证、从指定偏移处下载部分文件、用户代理字符串、限速、文件大小、进度条等特征。做网页处理流程和数据检索自动化,curl可以祝一臂之力。l

Copy All as HAR(全部复制为HAR)

将所有资源复制到系统剪贴板作为HAR数据。 HAR文件包含描述网络“瀑布”的JSON数据结构。一些第三方工具可以使用HAR文件中的数据重建网络瀑布。有关详细信息,请参阅Web性能强大工具:HTTP归档(HAR)。

Save as HAR with Content(另存为带内容的HAR)

将所有网络数据与每个页面资源一起保存到HAR文件中。 二进制资源(包括图像)被编码为Base64编码文本。

Clear Browser Cache(清除浏览器缓存)

清除浏览器高速缓存。提示:您也可以从Network Conditions(网络条件)抽屉式窗格中启用或禁用浏览器缓存。

Clear Browser Cookies(清除浏览器Cookie)

清除浏览器的Cookie。

Open in Sources Panel(在源文件面板中打开)

在Sources(源文件)面板中打开选定的资源。

在新标签页中打开所选资源。您还可以在Requests Table(请求列表)中双击资源名称。

将资源URL复制到系统剪贴板。

Save(保存)

保存所选的文本资源。仅显示在文本资源上。

Replay XHR(重新发送XHR)

重新发送所选的XMLHTTPRequest。仅显示在XHR资源上。

查看资源发起者和依赖关系

按住Shift并移动鼠标到资源上可查看它的发起者和依赖关系。这部分是你鼠标悬停的资源的target(目标)引用。

从target(目标)往上查找,第一个颜色编码为绿色的资源是target(目标)的发起者。如果存在第二个颜色编码为绿色资源,那么这个是发起者的发起者。从target(目标)向下查找,任何颜色编码为红色的资源都是target的依赖。

HTTP 协议

响应码

参考

URI与URL

URI:统一资源标示符,只是标识资源在哪里,这意味着存在多个URI可以指向该资源(例如:绝对与相对)【URI包含URL】

URI一般由三部分组成:
  1. 访问资源的命名机制。
  2. 存放资源的主机名。
  3. 资源自身的名称,由路径表示。

1
2
3
4
语法:[scheme:] scheme-specific-part 

  URI以scheme和冒号开头。Scheme用大写/小写字母开头,后面为空或者跟着更多的大写/小写字母、数字、加号、减号和点号。冒号把 scheme与scheme-specific-part分开了,并且scheme-specific-part的语法和语义(意思)由URI的名字空间决定。如下面的例子:
  http://www.cnn.com,其中http是scheme,//www.cnn.com是 scheme-specific-part,并且它的scheme与scheme-specific-part被冒号分开了。

1
2
3
4
5
绝对与相对:

  绝对的URI指以scheme(后面跟着冒号)开头的URI。(例如:mailto:jeff@javajeff.com、news:comp.lang.java.help和xyz: //whatever);绝对的URI看作是以某种方式引用某种资源,而这种方式对标识符出现的环境没有依赖。

  相对的URI不是以scheme(后面跟着冒号)开始的URI。(例如:articles/articles.html、img/aa.jpg)你可以把相对的URI看作是以某种方式引用某种资源,而这种方式依赖于标识符出现的环境。(即你在html中引用图片:./img/aa.jpg,那么它依赖的就是http)

URL:统一资源定位符,是URI的子集;它除了标识资源的位置,还提供一种定位该资源的主要访问机制(如其网络“位置”)。【即提供具体方式找到该资源(位置+方式)】

URL的格式由下列三部分组成:
  1. 第一部分,是协议或称为服务方式 (指定低层使用的协议,例如:http, https, ftp);
  2. 第二部分,是存有该资源的主机IP地址(有时也包括端口号);
  3. 第三部分,是主机资源的具体地址。如目录和文件名等。

  第一部分和第二部分之间用”://“符号隔开,第二部分和第三部分用”/“符号隔开。第一部分和第二部分是不可缺少的,第三部分有时可以省略。

三次握手四次挥手

上图中主要分为三部分:建立连接、传输数据、断开连接。

建立连接:

  三次握手即可建立TCP连接

  1、第一次握手:客户端发送syn包(seq=x)到服务器,并进入SYN_SEND状态,等待服务器确认;

  2、第二次握手:服务器收到syn包,必须确认客户的SYN(ack=x+1),同时自己也发送一个SYN包(seq=y),即SYN+ACK包,此时服务器进入SYN_RECV状态;

  3、第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=y+1),此包发送完毕,客户端和服务器进入ESTABLISHED状态,完成三次握手。

  握手过程中传送的包里不包含数据,三次握手完毕后,客户端与服务器才正式开始传送数据。理想状态下,TCP连接一旦建立,在通信双方中的任何一方主动关闭连接之前,TCP 连接都将被一直保持下去。

  为什么需要三次握手呢?

  相互确认!

数据传输:

  建立好连接后,开始传输数据。TCP数据传输牵涉到的概念很多:超时重传、快速重传、流量控制、拥塞控制等等。(这一切都是为了提供可靠的字节流服务)

断开连接:

  四次握手即可断开TCP连接

  1、第一次握手:主动关闭方发送一个FIN,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但此时主动关闭方还可以接受数据。

  2、第二次握手:被动关闭方收到FIN包后,发送一个ACK给对方,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号)。

  3、第三次握手:被动关闭方发送一个FIN,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。

  4、第四次握手:主动关闭方收到FIN后,发送一个ACK给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。

1
2
3
4
5
6
7
8
9
白话文:

  1、第一次握手,浏览器对服务器说:“煞笔,我不再给你发数据啦,但可以接受数据。”

  2、第二次握手,服务器对浏览器说:“骚货,我知道啦!”

  3、第三次握手,服务器对浏览器说:“骚货,我也不再给你发数据啦!”

  4、第四次握手,浏览器对服务器说:“煞笔,我知道啦!”

特点

HTTP协议永远都是客户端发起请求,服务器回送响应。这样就限制了使用HTTP协议,无法实现在客户端没有发起请求的时候,服务器将消息推送给客户端。、

主要特点:

  1、支持客户/服务器模式。一旦建立了运输连接(这常常称为建立了会话),浏览器端就向万维网服务器端发送HTTP请求,服务器收到请求后给出HTTP响应。
  2、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。
  3、灵活:HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
  4、HTTP 0.9和1.0使用非持续连接:限制每次连接只处理一个请求,服务器处理完客户的请求,并收到客户的应答后,即断开连接。
HTTP 1.1使用持续连接:不必为每个web对象创建一个新的连接,一个连接可以传送多个对象,采用这种方式可以节省传输时间。
  5、无状态:HTTP协议是无状态协议。即每一个HTTP请求都是独立的。万维网服务器不保存过去的请求和过去的会话记录。这就是说,同一个用户再次访问同一个服务器时,只要服务器没有进行内容的更新,服务器的响应就给出和以前被访问时相同的响应。服务器不记录曾经访问过的用户,也不记录某个用户访问过多少次。

HTTP请求

请求方法

 1、GET:向特定的资源发出请求

  2、POST:向指定资源提交数据进行处理请求(例如提交表单或者上传文件)。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。

  3、PUT:向指定资源位置上传其最新内容。

  4、DELETE:请求服务器删除Request-URI所标识的资源。

  5、HEAD: 向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回。这一方法可以在不必传输整个响应内容的情况下,就可以获取包含在响应消息头中的元信息。该方法常用于测试超链接的有效性,是否可以访问,以及最近是否更新。

  6、TRACE:请求服务器会送收到的请求信息,主要用于测试或诊断。

  7、OPTIONS:请求查询服务器的性能,或者查询与资源相关的选项和需求

  8、CONNECT: HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。(即留为将来使用)

  【注意:请求方法区分大小写;所示请求方法应为大写】

非持久连接方式

持久连接方式

参考资料

Chrome开发者工具详解(2)-Network面板
Google Chrome抓包分析详解
Chrome DevTools — Network
HTTP协议详解以及URL具体访问过程

喜欢这篇文章?打赏一下作者吧!

欢迎关注我的其它发布渠道