Published on

Capturing QUIC and HTTP/3 with net-export logs on Chromium Browsers

Authors
  • Name
    Naito Oshima
    Twitter

Overview

This article will show you how to capture network logs with net-export of Chromium-based Microsoft Edge or Google Chrome. And you can the log using netlog-viewer. I will not explain the details of QUIC, HTTP/3, net-export parameters, etc.

Background

In 2021, QUIC was standardized by IETF as a new transport protocol. RFC 9000

In this article, I would like to check the capture of HTTP/3 based on QUIC, using the net-export logging functionality that comes as standard with Chromium Edge. Since this is a Chromium feature, it is also possible to use the same method in Google Chrome. FYI, previous Google QUIC might be used as well as the current QUIC.

Preparation

1. capture -> open in Viewer

You can capture net-export's network logs as the following article said. If you use Microsoft Edge, you should replace chrome://net-export to edge://net-export.

Troubleshoot Chrome network issues

After got logs, open the saved JSON file with netlog-viewer - https://netlog-viewer.appspot.com/.

2. netlog-viewer : Alt-Svc tab

Let's start with the Alt-Svc tab in the left panel of netlog-viewer.

In order to communicate via HTTP/3, it is necessary to know whether the server side supports HTTP/3. You can check this with the Alt-Svc response header (RFC 7838).

You can also omit checking up to this period by specifying max-age in ma as in Alt-Svc (MDN Web). You can see the information of the confirmed mappings here.

Generally, HTTP/3 QUIC usually uses the UDP port 443, but since the port number is not specified in the specification, it is specified in the Alt-Svc response header, such as h3=":443"; or h3-29=":443";. Chromium remembers which sites support QUIC based on this header, alleviating the overhead of Alt-Svc pre-checking. header to alleviate the overhead of Alt-Svc pre-checking.

Additional Reference : Pre-checking by Alt-Svc header

For example, let's access https://quic.nginx.org/, which is a demo site of nginx with HTTP3 support. Then, the first part of the resource loading access should be accessed with HTTP/2 protocol. Moreover, in the response header, there is an alt-svc header. And then, some subsequent HTTP/3 accesses within the same site.

Next, you should try accessing the demo site https://quic.nginx.org/ again with caching disabled in DevTools. Then, the HTTP/2 access request is changed to HTTP/3 access. This is because the browser remembers the contents of the Alt-svc header as described above, and because it was within the max-age, it was possible to perform HTTP/3 access from the beginning.

3. netlog-viewer : QUIC tab

Next, open the QUIC tab in the left panel of netlog-viewer. In the upper part, you can see information about QUIC such as Supported Versions.

In this case, we will use the QUIC sessions at the bottom to check the captcha. For example, h3-Q050 in the Version section indicates the aforementioned Google QUIC, and draft29 indicates the draft 29-based HTTP/3 called h3-29. You can also see the Peer address and Connection ID.

If you click on the View live QUIC sessions link, you can see the network log for each of the QUICs listed, but this time, try opening the link for one of the Connection IDs in the table instead of clicking there. Specifically, try clicking on the link for one Connection ID of www.google.co.jp:443.

4. netlog-viewer : Events tab filtered by the above Connection ID

You will then be taken to the Events tab filtered by the Connection ID you clicked on above.

Specifically, you should see a detailed network log on the right side regarding the QUIC session for the Connection ID you selected for type:QUIC_SESSION. Scroll down and take a look.

For example, the HTTP3_HEADERS_SENT and HTTP3_HEADERS_DECODED events allow you to see each request and response header after decoding. If the filter "type:QUIC_SESSION <Connection ID>" at the top is removed, various other events can also be checked, including UDP_SOCKET, QUIC_STREAM_FACTORY_JOB, HTTP_STREAM_JOB, HTTP_STREAM_JOB_CONTROLLER and URL_REQUEST. Please try poking around the various source types.

Although we won't go into too much detail this time, it is possible to check os_error and net_error, for example, depending on the source and event conditions, although only simple error codes are available.

For your information, the list of log source types shown on the left side can be found in the Chromium repository net_log_source_type_list.h, and the list of each event type displayed on the right side is net_log_event_type_list.h.

5. NetLog of net-export that can actually be viewed by other than netlog-viewer

NetLog of edge://net-export and chrome://net-export can actually be viewed in Fiddler Classic by downloading the Fiddler NetLog extension.

Moreover, NetLog for QUIC communication is also available on qvis, a visualization tool for QUIC and HTTP/3 qlogs, since NetLog supports the qlog format.

  1. open the qvis site https://qvis.quictools.info/#/files.
  2. You can check the NetLog json obtained by net-export by importing it from the Upload file field of Option 2.

Introduction of other methods

A. Network tab of the Developer Tools

Another way to capture the network data is to use the Network panel of the DevTools (Developer Tools) in Edge or Chrome.

B. Viewing with Wireshark using SSLKEYLOGFILE

There is another way using SSLKEYLOGFILE environment variable and Wireshark.

This method is to specify the SSLKEYLOGFILE environment variable in advance before capturing, capture the communication from Microsoft Edge or Google Chrome, and decrypt it with Wireshark using the file containing the output key. Since it is not possible to decrypt a packet even if only the server's private key is available, the packet is decrypted using the SSLKEYLOGFILE output by the Edge client to be acquired.