news 2026/10/30 2:26:28

浏览器网页加载流程抓包复现

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
浏览器网页加载流程抓包复现

在进入实验室之前,我们已经浅浅学过计算机网络原理,大概了解了网络如何运行,了解TCP/IP四层模型和OSI七层模型,那么,数据从浏览器到服务器经历了哪些层?HTTP请求和响应长什么样?为什么输入网址后,浏览器能打开页面?这些问题我将通过本次的Wireshark抓包解决。

一.网页加载过程文字说明

域名经DNS翻译成IP,ARP拿到网关MAC,TCP建立连接;浏览器发送HTTP请求,服务器返回网页数据,浏览器渲染出页面,最后断开连接。

二.抓包前期环境配置

本次抓包我用到了Wireshark,我在浏览器中访问该软件官网https://www.wireshark.org/download.html,进行下载,但下载完成后我发现无法运行,于是检查后发现,我没有配置Npcap环境,于是我进行环境配置,然后成功运行Wireshark如下图。

三.抓包过程

1.右键Wireshark,以管理员身份运行程序,我电脑连接的是Wifi,所以点击Wifi
2.点击浏览器访问http://neverssl.com,等待加载完成,再次点击Wireshark左上方红色按钮,停止抓包

3.在左上角输入框里输入“tcp.port80”,将所有数据筛选,(为什么输入这个筛选,是因为,“tcp”说明我们只看tcp协议的内容,“port80”说明只看端口是80的)

【解析• No.(序号):抓包按顺序排的号码。比如你图里的 8, 12, 13, 14。
• Time(时间):从你点开始抓包,到看到这个包过了多少秒。
• Source(源地址):谁发出来的。192.168.31.237 是你自己的电脑。
• Destination(目的地址):发给谁。204.79.197.203 是微软的服务器(因为是 Windows 后台在跑证书验证)。
• Protocol(协议):这是用的什么规则,比如 TCP 或 HTTP。
• Info(信息):这个包在干什么。这是最核心的一列。】

四.抓包分析


(1)看左下角的信息,先整体看

  1. Ethernet II(数据链路层)
    • 展开它,你会看到 Src 和 Dst,这是网卡的物理地址(MAC 地址)。
  2. Internet Protocol Version 4(网络层)
    • 展开它,你会看到 Src: 192.168.31.237 和 Dst: 204.79.197.203。这就是 IP 地址,负责在网络中定位。
  3. Transmission Control Protocol(传输层)
    • 展开它,你会看到 Src Port: 55707 和 Dst Port: 80(端口),以及 Flags: 0x002 (SYN)(这就是三次握手的 SYN 标志位)。
    (2)点击第八个包,具体分析
    右键第八个包,点击跟随follow,Tcp stream,然后你就发现界面会有两种颜色(红色和蓝色),蓝色是你发给浏览器的,红色是服务器返回给你的。

    (3)再返回看三次握手

    • 第 8 号包([SYN]):我的电脑(192.168.31.237)向服务器发起请求:“我要建立连接”。
    • 第 12 号包([SYN, ACK]):服务器回复:“好的,我同意”。
    • 第 13 号包([ACK]):我的电脑回复:“收到,开始传数据”。
    • 第 14 号包(HTTP GET):我的电脑发出了具体的请求,获取网页内容。
    这样我们就完整看到了三次握手,从[SYN]—— [SYN, ACK]—— [ACK]的全过程。
    通过这次抓包复现,我能更清晰直观地感受到“域名经DNS翻译成IP,ARP拿到网关MAC,TCP建立连接;浏览器发送HTTP请求,服务器返回网页数据,浏览器渲染出页面,最后断开连接”这个过程。
    通过这一次的实操,我最大的感受是:网络安全不能只看书,必须要看到真实的数据在网卡上流动。看到那些抽象的理论变成抓包软件里真实的一行行代码,这样才真实。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/30 2:25:49

记一次 PGP 驱动残留导致的开机蓝屏修复

输对 BitLocker 48 位恢复密钥,磁盘显示已解锁,然后——蓝屏,无限循环。朋友的笔记本就这么折腾了我一整天,最后发现元凶是一个 2010 年的老软件残留驱动。这篇把从 BCD 重建到 UpperFilters 残留排查的完整过程记下来&#xff0c…

作者头像 李华
网站建设 2026/10/30 2:20:26

Lens 上手指南:从 0 到连接第一个集群,10 分钟跑通

Lens 上手指南:从 0 到连接第一个集群,10 分钟跑通 【免费下载链接】lens Lens - The way the world runs Kubernetes 项目地址: https://gitcode.com/gh_mirrors/le/lens 你是否也遇到过这样的场景:kubectl 参数忘了要翻 help 文档&a…

作者头像 李华