The nextHopProtocol
read-only property is a string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301).
When a proxy is used, if a tunnel connection is established, this property returns the ALPN Protocol ID of the tunneled protocol. Otherwise, this property returns the ALPN Protocol ID of the first hop to the proxy.
The nextHopProtocol
property can have the following values:
- A string representing the network protocol used to fetch the resource, as identified by the ALPN Protocol ID (RFC7301). Typical values are:
"http/0.9"
"http/1.0"
"http/1.1"
"h2"
"h2c"
"h3"
- An empty string if the resource is a cross-origin request and no
Timing-Allow-Origin
HTTP response header is used.
The nextHopProtocol
property can be used to see resources that don't use the HTTP/2 or HTTP/3 protocols.
Example using a PerformanceObserver
, which notifies of new resource
performance entries as they are recorded in the browser's performance timeline. Use the buffered
option to access entries from before the observer creation.
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach((entry) => {
const protocol = entry.nextHopProtocol;
if (protocol && !(protocol === "h2" || protocol === "h3")) {
console.log(`${entry.name} uses ${protocol}.`);
}
});
});
observer.observe({ type: "resource", buffered: true });
Example using Performance.getEntriesByType()
, which only shows resource
performance entries present in the browser's performance timeline at the time you call this method:
const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
const protocol = entry.nextHopProtocol;
if (protocol && !(protocol === "h2" || protocol === "h3")) {
console.log(`${entry.name} uses ${protocol}.`);
}
});
If the value of the nextHopProtocol
property is an empty string, the resource might be a cross-origin request. To expose cross-origin network protocol information, the Timing-Allow-Origin
HTTP response header needs to be set.
For example, to allow https://developer.mozilla.org
to see network protocol information, the cross-origin resource should send: