🤯about:net-export——分析Chromium网络问题的利器

tags
browser
dev
type
Post
summary
status
Published
slug
net-export-chromium-net-stack-debugging
date
May 22, 2023
Chromium的一大优势——拥有独立实现的Network Stack。这一设计使得Chromium浏览器与应用能轻松跨OS发行。
相比之下,IE开发使用的WinINet library是对Windows 中WinHTTP/Schannel等等的二次封装,浏览器中runtime exception排错相比更复杂,这一点在IE ETW trace providers中也有所体现。
浏览器常用的功能包括cookies/host resolver/proxy resolver/cache等等功能都封装入这一功能强大的Network Stack中,使得在Chromium环境中开发排错网络相关问题也十分容易。本文将集中介绍在Chromium中利用netlog定位解决常见的网络相关问题,以及client-side排错的一些技巧。

录制并分析Chromium NetLog

我之前的一篇文章探讨过如何定位ERR_CERT_INVALID这一缺少准确原因的证书错误,其中便利用了net-export log作为工具。Chromium Tool Chains使用体验还是很好的,但是应用的人不多。
根据Chromium的设计,绝大多数网络相关功能的事件和日志都将写入NetLog中,NetLog是Chromium中最常用的网络行为分析工具。

浏览器中捕获netlog

在Chrome/Edge 中,地址栏中直接访问about:net-export即可利用NetLog捕获工具,简单的使用步骤一般如下。
  1. 打开一个InCognito/InPrivate页面,访问about:net-export
  1. 一般而言,我倾向选择Include raw bytes with cookies and credentials,如果需要分享日志给他人,可以使用其他选项
  1. 点击Start Logging to Disk
  1. 在新的tab中复现问题,完毕后存储NetLog到本地
about:net-export
about:net-export

捕获Chromium应用程序的netlog

对于Electron/Edge WebView2 程序,可以使用命令行方式启动,添加log-net-log参数。如分析Teams的net-log的命令行如下
%LOCALAPPDATA%\\Microsoft\\Teams\\current\\Teams.exe --log-net-log=C:\\temp\\TeamsNetLog.json

分析NetLog的工具

可以直接利用Chromium提供的netlog_viewer进行分析,Fiddler也可导入并转换netlog,易于分析。
Import netlog into Fiddler
Import netlog into Fiddler

Netlog的限制——HTTP Post、Service Worker与blink缓存

相比于HAR log(integrated in developer tool)以及直接使用Fiddler HTTP 抓包,netlog更多常见场景是用于定位SSL/DNS相关的问题,而非业务场景问题
由于Netlog只会捕获Chromium Network Stack中的流量,因此,Servcie Worker的流量不一定被net log捕获。如果浏览器发出的请求是由Servcie Worker回应的,netlog中则不会出现相应的信息 —— 但Service Worker仍使用Network Stack收发信息,如果在Service Worker中使用fetch请求外部资源,在netlog中也能看到
与Service Worker的某些特定场景相似,由于blink engine会将部分页面资源缓存下来,如果浏览器发出的请求击中blink 缓存,在netlog中也不会显示。
在不同问题场景中活用不同的工具,才能最大程度获得需要的信息。

Netlog分析TLS/Certificates相关问题

在netlog viewer中加载捕获的netlog后,Events一栏包括了关键的信息,可参考如下的步骤获得TLS相关的内容。
首先可以过滤SOCKET事件,在Description一栏中找到目标站点,首次建立的TLS链接往往有最多的信息。
notion image
在右侧的事件详情中,可以着重关注如下几处:
  1. TCP_CONNECT事件展示了host相关的信息
  1. SSL_CONNECT SSL_HANDSHAKE_MESSAGE_SENT SSL_HANDSHAKE_MESSAGE_RECEIVED 事件展示TLS handshake相关的信息,包括client hello/server hello的概要和结果
  1. SSL_CERTIFICATE_RECEIVED 事件表示客户端收到的证书详情(handshake成功)
  1. SSL_ALERT_SENT SSL_HANDSHAKE_ERROR 事件包括了错误详情

检查证书相关错误

CERT_VERIFIER_TASK 事件中,搜索CERT_VERIFY_PROC_PATH_BUILT log provider, 如果站点证书有误,在此日志类型下会添加error字段,其中包括了证书错误的详细信息。
在Chromium Source中直接搜索error string 可获得相关错误的定义与类型

从netlog中解析站点证书

SSL_CERTIFICATES_RECEIVED事件下的所有内容复制保存为.cer文件,选择如下的一种方式即可将其正确解析。
notion image
  • 使用openssl.exe 解析证书;openssl.exe会随着Git一起安装,在Git的安装目录下即可找到
openssl x509 -in pathToFileYouCreated.cer -text -out decoded.txt
  • 在File Explorer中直接打开,使用Windows Certificate Viewer查看
  • 使用Windows自带工具certutil.exe 也可解析证书
certutil -dump <pathToFileYouCreated>.cer
  • 在Chromium Repo中可以找到如下脚本src/net/tools/print_certificates.py ,利用此脚本也可解析证书,但需要确保opensslder2ascii已经被加入环境变量中
注意,由于CERT_VERIFIER_JOB包括了证书链上的每一张证书,因此应分别将其保存成.cer文件,根据实际报错酌情检查每一张证书。

Sample——证书吊销导致的SSL Handshake失败

以BadSSL中提供的Revoked Certificate测试页为例,在加载此页面前开始收集net-export log
notion image
在收集的netlog中,很容易定位到错误的真正原因是ERR_CERT_DATE_INVALID ,同时错误中也提供了对应Chromium中的源码 。
notion image
由此可以定位到抛出异常的代码片段如下
for (const auto& sct_and_status : server_cert_verify_result_.scts) { if (sct_and_status.status == ct::SCT_STATUS_OK) verified_scts.push_back(sct_and_status.sct); }
revoked.badssl.com的证书导出为.cer文件,报错certificate has expired
notion image
notion image
其他badssl.com提供的样例也可通过net-export得到完整详尽的分析

Netlog分析DNS相关问题

一图胜千言
notion image
除DNS tab外,在Event中你也可以寻找HOST_RESOLVER_IMPL_JOB事件类型,来查看DNS请求的详情
notion image

Netlog分析请求优先级相关问题

碰到页面元素未按预期顺序加载的情况,如果你对Chromium Network Stack不熟悉,可以前端源码慢慢找——只不过这个过程非常痛苦。
从netlog中我们可以快速简便地分析不同页面元素的加载顺序情况,URL_REQUEST事件中的priority属性可以帮助我们确定对应元素的请求顺序。
notion image
在netlog中各个元素加载的优先级命名和developer tool中有些不同,但可以相互对应。
notion image
HTML Context中不同元素的加载优先级定义可以参阅Chromium文档,即时更新

Reference

net-export工具结合了Wireshark/NetMon一类网包工具与Fiddler/HARlog等HTTP trace的优点,可以清晰地展示网络请求在Chromium Network Stack中的详细情况,且无需额外下载,使用方便。
 

lucky_bricks © 2018 - 2024