Add model-support for HTTP/3

pimterry · pimterry · commit e2ed9810886b · 2025-02-26T18:32:23.000+01:00
This isn't especially useful in the short term as we can't intercept
HTTP/3 yet, but it does allow us to import HARs which include HTTP/3
traffic, which have become increasingly common.
diff --git a/src/components/common/editable-status.tsx b/src/components/common/editable-status.tsx
@@ -1,6 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
+import { HttpVersion } from '../../types';
 import { styled } from '../../styles';
 
 import { TextInput } from './inputs';
@@ -28,7 +29,7 @@ function isDefaultMessage(statusMessage: string, statusCode: number | undefined)
 
 export const EditableStatus = (props: {
     className?: string,
-    httpVersion: 1 | 2,
+    httpVersion: HttpVersion,
     statusCode: number | undefined,
     statusMessage: string | undefined,
     onChange: (statusCode: number | undefined, statusMessage: string | undefined) => void
@@ -37,7 +38,7 @@ export const EditableStatus = (props: {
 
     // Undefined status message = use default. Note that the status
     // message can still be shown as _empty_, just not undefined.
-    const statusMessage = props.statusMessage === undefined || props.httpVersion === 2
+    const statusMessage = props.statusMessage === undefined || props.httpVersion >= 2
         ? getStatusMessage(statusCode)
         : props.statusMessage;
 
@@ -66,7 +67,7 @@ export const EditableStatus = (props: {
         />
 
         <TextInput
-            disabled={props.httpVersion === 2}
+            disabled={props.httpVersion >= 2}
             value={statusMessage}
             onChange={(event) => {
                 let newMessage: string | undefined = event.target.value;
diff --git a/src/components/common/http-version-pill.tsx b/src/components/common/http-version-pill.tsx
@@ -11,10 +11,6 @@ export const HttpVersionPill = styled(({ request, className }: {
 }) => request.httpVersion
     ? <Pill
         title={`The client sent this request using HTTP ${request.httpVersion}`}
-    >HTTP/{
-        request.httpVersion === '2.0'
-        ? '2'
-        : request.httpVersion
-    }</Pill>
+    >HTTP/{request.httpVersion.replace('.0', '')}</Pill>
     : null
 )``;
diff --git a/src/components/send/sent-response-headers.tsx b/src/components/send/sent-response-headers.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 
-import { RawHeaders } from '../../types';
+import {
+    RawHeaders,
+    HttpVersion
+} from '../../types';
 
 import {
     CollapsibleCardHeading,
@@ -17,7 +20,7 @@ import { CollapsingButtons } from '../common/collapsing-buttons';
 import { ExpandShrinkButton } from '../common/expand-shrink-button';
 
 export interface ResponseHeaderSectionProps extends ExpandableCardProps {
-    httpVersion: 1 | 2;
+    httpVersion: HttpVersion;
     requestUrl: URL;
     headers: RawHeaders;
 }
diff --git a/src/components/view/http/header-details.tsx b/src/components/view/http/header-details.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 
 import { styled } from '../../../styles';
-import { RawHeaders } from '../../../types';
+import { HttpVersion, RawHeaders } from '../../../types';
 import { Icon } from '../../../icons';
 import { copyToClipboard } from '../../../util/ui';
 
@@ -181,7 +181,7 @@ const getHeaderDescription = (
 };
 
 export const HeaderDetails = inject('accountStore')(observer((props: {
-    httpVersion: 1 | 2;
+    httpVersion: HttpVersion,
     headers: RawHeaders,
     requestUrl: URL,
     accountStore?: AccountStore
@@ -209,7 +209,9 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
             >
                 <CollapsibleSectionSummary>
                     <PseudoHeadersHiddenMessage>
-                        HTTP/{props.httpVersion} pseudo-headers
+                        HTTP/{
+                            props.httpVersion.toString().replace('.0', '')
+                        } pseudo-headers
                     </PseudoHeadersHiddenMessage>
                 </CollapsibleSectionSummary>
 
diff --git a/src/components/view/http/http-breakpoint-request-card.tsx b/src/components/view/http/http-breakpoint-request-card.tsx
@@ -105,8 +105,8 @@ export class HttpBreakpointRequestCard extends React.Component<RequestBreakpoint
     }
 
     @computed
-    get isHttp2() {
-        return this.props.exchange.httpVersion === 2;
+    get hasPseudoHeaders() {
+        return this.props.exchange.httpVersion >= 2;
     }
 
     @action.bound
@@ -116,7 +116,7 @@ export class HttpBreakpointRequestCard extends React.Component<RequestBreakpoint
 
         if (method === inProgressResult.method) return;
 
-        if (this.isHttp2) {
+        if (this.hasPseudoHeaders) {
             this.props.onChange({
                 method,
                 rawHeaders: withHeaderValue(inProgressResult.rawHeaders, { ':method': method })
@@ -137,7 +137,7 @@ export class HttpBreakpointRequestCard extends React.Component<RequestBreakpoint
             // Automatically update the host/H2 headers to match, if we can:
             const parsedUrl = new URL(url);
 
-            if (this.isHttp2) {
+            if (this.hasPseudoHeaders) {
                 rawHeaders = withHeaderValue(rawHeaders, {
                     ':authority': parsedUrl.host,
                     ':path': parsedUrl.pathname + parsedUrl.search,
diff --git a/src/components/view/http/http-breakpoint-response-card.tsx b/src/components/view/http/http-breakpoint-response-card.tsx
@@ -81,7 +81,7 @@ export class HttpBreakpointResponseCard extends React.Component<ResponseBreakpoi
 
     @action.bound
     onStatusChange(statusCode: number | undefined, statusMessage: string | undefined) {
-        if (this.props.exchange.httpVersion === 2) {
+        if (this.props.exchange.httpVersion >= 2) {
             const { rawHeaders } = this.props.exchange.responseBreakpoint!.inProgressResult;
             this.props.onChange({
                 statusCode: statusCode || NaN,
diff --git a/src/components/view/http/http-request-card.tsx b/src/components/view/http/http-request-card.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { HttpExchange, HtkRequest } from '../../../types';
+import { HttpExchange, HtkRequest, HttpVersion } from '../../../types';
 import { styled } from '../../../styles';
 import { PhosphorIcon } from '../../../icons';
 
@@ -90,7 +90,7 @@ const MatchedRulePill = styled(inject('uiStore')((p: {
 
 const RawRequestDetails = (p: {
     request: HtkRequest,
-    httpVersion: 1 | 2
+    httpVersion: HttpVersion
 }) => {
     const methodDocs = getMethodDocs(p.request.method);
     const methodDetails = [
diff --git a/src/components/view/http/http-response-card.tsx b/src/components/view/http/http-response-card.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { get } from 'typesafe-get';
 
-import { HtkResponse, Omit } from '../../../types';
+import { HtkResponse, HttpVersion } from '../../../types';
 import { Theme } from '../../../styles';
 
 import { ApiExchange } from '../../../model/api/api-interfaces';
@@ -34,7 +34,7 @@ import { DocsLink } from '../../common/docs-link';
 
 interface HttpResponseCardProps extends CollapsibleCardProps  {
     theme: Theme;
-    httpVersion: 1 | 2;
+    httpVersion: HttpVersion;
     requestUrl: URL;
     response: HtkResponse;
     apiExchange: ApiExchange | undefined;
diff --git a/src/components/view/http/http-trailers-card.tsx b/src/components/view/http/http-trailers-card.tsx
@@ -2,8 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { observer } from 'mobx-react';
 
-import { RawTrailers } from '../../../types';
-import { Theme } from '../../../styles';
+import { HttpVersion, RawTrailers } from '../../../types';
 
 import {
     CollapsibleCard,
@@ -13,8 +12,8 @@ import {
 import { HeaderDetails } from './header-details';
 
 interface HttpTrailersCardProps extends CollapsibleCardProps {
-    type: 'request' | 'response',
-    httpVersion: 1 | 2;
+    type: 'request' | 'response';
+    httpVersion: HttpVersion;
     requestUrl: URL;
     trailers: RawTrailers;
 }
diff --git a/src/model/filters/search-filters.ts b/src/model/filters/search-filters.ts
@@ -518,7 +518,7 @@ class HttpVersionFilter extends Filter {
     static filterSyntax = [
         new FixedStringSyntax("httpVersion"),
         new FixedStringSyntax("="), // Separate, so initial suggestions are names only
-        new StringOptionsSyntax(["1", "2"])
+        new StringOptionsSyntax(["1", "2", "3"])
     ] as const;
 
     static filterName = "httpVersion";
@@ -543,7 +543,7 @@ class HttpVersionFilter extends Filter {
 
     matches(event: CollectedEvent): boolean {
         return event.isHttp() &&
-            event.httpVersion === this.expectedVersion;
+            Math.round(event.httpVersion) === this.expectedVersion;
     }
 
     toString() {
diff --git a/src/model/http/exchange-breakpoint.ts b/src/model/http/exchange-breakpoint.ts
@@ -10,6 +10,7 @@ import {
     BreakpointRequestResult,
     BreakpointResponseResult,
     MockttpBreakpointResponseResult,
+    HttpVersion,
 } from "../../types";
 import { logError } from "../../errors";
 
@@ -69,12 +70,12 @@ export async function getRequestBreakpoint(request: MockttpBreakpointedRequest)
     );
 }
 
-export function getDummyResponseBreakpoint(httpVersion: 1 | 2) {
+export function getDummyResponseBreakpoint(httpVersion: HttpVersion) {
     const breakpoint = new ResponseBreakpoint(
         {
             statusCode: 200,
             statusMessage: undefined,
-            rawHeaders: httpVersion === 2 ? [[':status', '200']] : [],
+            rawHeaders: httpVersion >= 2 ? [[':status', '200']] : [],
         },
         stringToBuffer(''),
         stringToBuffer('')
diff --git a/src/model/http/exchange.ts b/src/model/http/exchange.ts
@@ -56,9 +56,18 @@ import {
 } from './exchange-breakpoint';
 import { UpstreamHttpExchange } from './upstream-exchange';
 
-export type HttpVersion = 2 | 1;
+const HTTP_VERSIONS = [0.9, 1.0, 1.1, 2.0, 3.0] as const;
+export type HttpVersion = typeof HTTP_VERSIONS[number];
+
 export function parseHttpVersion(version: string | undefined): HttpVersion {
-    return version === '2.0' ? 2 : 1;
+    if (version === '0.9') return 0.9;
+    if (version === '1.0' || version === '1') return 1.0;
+    if (version === '1.1') return 1.1;
+    if (version === '2.0' || version === '2') return 2.0;
+    if (version === '3.0' || version === '3') return 3.0;
+
+    console.log('Unknown HTTP version:', version);
+    return 1.1;
 }
 
 function tryParseUrl(request: InputRequest): ParsedUrl | undefined  {
@@ -224,7 +233,7 @@ export interface ViewableHttpExchange extends HTKEventBase {
     get abortMessage(): string | undefined;
     get api(): ApiExchange | undefined;
 
-    get httpVersion(): 1 | 2;
+    get httpVersion(): HttpVersion;
     get matchedRule(): { id: string, handlerStepTypes: HandlerClassKey[] } | false | undefined;
     get tags(): string[];
     get timingEvents(): TimingEvents;
diff --git a/src/model/http/har.ts b/src/model/http/har.ts
@@ -739,7 +739,7 @@ function parseHarRequest(
         timingEvents,
         tags: [],
         matchedRuleId: false,
-        httpVersion: parseHttpVersion(request.httpVersion, request.headers),
+        httpVersion: parseHarHttpVersion(request.httpVersion, request.headers),
         protocol: request.url.split(':')[0],
         method: request.method,
         url: request.url,
@@ -760,7 +760,7 @@ function parseHarRequest(
     }
 }
 
-function parseHttpVersion(
+function parseHarHttpVersion(
     versionString: string | undefined,
     headers: HarFormat.Header[]
 ) {
@@ -773,6 +773,8 @@ function parseHttpVersion(
         }
     }
 
+    if (versionString === 'h3') return '3.0';
+
     const regexMatch = /^(HTTP\/)?([\d\.]+)$/i.exec(versionString);
     if (regexMatch) {
         return regexMatch[2];
diff --git a/src/model/send/send-request-model.ts b/src/model/send/send-request-model.ts
@@ -119,7 +119,7 @@ export async function buildRequestInputFromExchange(exchange: HttpExchange): Pro
         Buffer.from('!!! ORIGINAL REQUEST BODY COULD NOT BE DECODED !!!');
 
     // For now, all sent requests are HTTP/1, so we need to make sure we convert:
-    const headers = exchange.httpVersion === 2
+    const headers = exchange.httpVersion >= 2
         ? h2HeadersToH1(exchange.request.rawHeaders)
         : exchange.request.rawHeaders;
 
diff --git a/src/types.d.ts b/src/types.d.ts
@@ -35,7 +35,11 @@ import type { ParsedUrl } from './util/url';
 
 import type { FailedTlsConnection } from './model/tls/failed-tls-connection';
 import type { TlsTunnel } from './model/tls/tls-tunnel';
-import type { HttpExchange, ViewableHttpExchange } from './model/http/exchange';
+import type {
+    HttpExchange,
+    ViewableHttpExchange,
+    HttpVersion
+} from './model/http/exchange';
 import type { WebSocketStream } from './model/websockets/websocket-stream';
 import type { RTCConnection } from './model/webrtc/rtc-connection';
 import type { RTCDataChannel } from './model/webrtc/rtc-data-channel';
@@ -219,7 +223,8 @@ export type CollectedEvent =
 export type ExchangeMessage = HtkRequest | HtkResponse;
 export type RTCStream = RTCDataChannel | RTCMediaTrack;
 
-export {
+export type {
+    HttpVersion,
     Headers,
     RawHeaders,
     Trailers,
