Add settings for configuring a keylog file for Wireshark etc

This makes it possible to log all TLS keys (from Send, and all up &
downstream proxy connections) so that tools like Wireshark which
collect raw packet data can manually decrypt and inspect within
the TLS packets as well.

Author: pimterry

src/components/settings/proxy-settings-card.tsx

@@ -4,6 +4,7 @@ import { observable, action, computed } from 'mobx';
 import { observer, inject } from "mobx-react";
 
 import { styled } from '../../styles';
+import { isWindows } from '../../util/ui';
 import { WarningIcon, Icon } from '../../icons';
 
 import { isValidPortConfiguration, ProxyStore } from '../../model/proxy-store';
@@ -12,7 +13,8 @@ import {
     serverVersion,
     versionSatisfies,
     INITIAL_HTTP2_RANGE,
-    TLS_PASSTHROUGH_SUPPORTED
+    TLS_PASSTHROUGH_SUPPORTED,
+    KEY_LOG_FILE_SUPPORTED
 } from '../../services/service-versions';
 
 import { inputValidation } from '../component-utils';
@@ -23,6 +25,7 @@ import {
 } from '../common/card';
 import { ContentLabel } from '../common/text-content';
 import { Select, TextInput } from '../common/inputs';
+import { IconButton } from '../common/icon-button';
 import {
     SettingsButton,
     SettingsExplanation,
@@ -85,8 +88,29 @@ const Http2Select = styled(Select)`
     padding: 3px;
 `;
 
+const TlsKeyLogContainer = styled.div`
+    margin: 10px 0;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+`;
+
+const InputClearButton = styled(IconButton)`
+    position: absolute;
+    top: 1px;
+    right: 2px;
+`;
+
 const hostnameValidation = inputValidation(isValidHostname, "Should be a valid hostname");
 
+const isAbsoluteWindowsPath = (path: string) => /^([a-zA-Z]:[\\\/]|[\\\/])((?:[^<>:"\/\\|?*]+)[\\\/]?)*$/.test(path);
+const isAbsolutePosixPath = (path: string) => /^\/(?:[^/]+\/?)*$/.test(path);
+
+const pathValidation = inputValidation(
+    isWindows ? isAbsoluteWindowsPath : isAbsolutePosixPath,
+    "Should be a valid absolute file path"
+);
+
 @inject('proxyStore')
 @observer
 export class ProxySettingsCard extends React.Component<
@@ -160,6 +184,26 @@ export class ProxySettingsCard extends React.Component<
         tlsPassthroughConfig.splice(hostnameIndex, 1);
     }
 
+    @observable
+    tlsKeyFileInput: string = this.props.proxyStore!.keyLogFilePath || '';
+
+    @action.bound
+    setTlsKeyFilePath({ target }: React.ChangeEvent<HTMLInputElement>) {
+        this.tlsKeyFileInput = target.value;
+
+        if (!this.tlsKeyFileInput.trim()) {
+            this.props.proxyStore!.keyLogFilePath = undefined;
+        } else if (pathValidation(target)) {
+            this.props.proxyStore!.keyLogFilePath = this.tlsKeyFileInput.trim();
+        }
+    }
+
+    @action.bound
+    clearTlsKeyFilePath() {
+        this.tlsKeyFileInput = '';
+        this.props.proxyStore!.keyLogFilePath = undefined;
+    }
+
     render() {
         const { proxyStore, ...cardProps } = this.props;
         const {
@@ -169,7 +213,10 @@ export class ProxySettingsCard extends React.Component<
             http2CurrentlyEnabled,
 
             tlsPassthroughConfig,
-            currentTlsPassthroughConfig
+            currentTlsPassthroughConfig,
+
+            keyLogFilePath,
+            currentKeyLogFilePath
         } = proxyStore!;
 
         return <CollapsibleCard {...cardProps}>
@@ -184,7 +231,8 @@ export class ProxySettingsCard extends React.Component<
                 visible={
                     (this.isCurrentPortConfigValid && !this.isCurrentPortInRange) ||
                     http2Enabled !== http2CurrentlyEnabled ||
-                    !_.isEqual(tlsPassthroughConfig, currentTlsPassthroughConfig)
+                    !_.isEqual(tlsPassthroughConfig, currentTlsPassthroughConfig) ||
+                    keyLogFilePath !== currentKeyLogFilePath
                 }
             />
 
@@ -234,7 +282,7 @@ export class ProxySettingsCard extends React.Component<
                 versionSatisfies(serverVersion.value, TLS_PASSTHROUGH_SUPPORTED) && <>
                     <SettingsSubheading>
                         TLS Passthrough { !_.isEqual(tlsPassthroughConfig, currentTlsPassthroughConfig) &&
-                            <UnsavedIcon />
+                            <UnsavedIcon title="Restart app to apply changes" />
                         }
                     </SettingsSubheading>
 
@@ -259,7 +307,7 @@ export class ProxySettingsCard extends React.Component<
                 versionSatisfies(serverVersion.value, INITIAL_HTTP2_RANGE) && <>
                     <SettingsSubheading>
                         HTTP/2 Support { http2Enabled !== http2CurrentlyEnabled &&
-                            <UnsavedIcon />
+                            <UnsavedIcon title="Restart app to apply changes" />
                         }
                     </SettingsSubheading>
 
@@ -278,6 +326,41 @@ export class ProxySettingsCard extends React.Component<
                     </Http2Select>
                 </>
             }
+
+            {
+                versionSatisfies(serverVersion.value, KEY_LOG_FILE_SUPPORTED) && <>
+                    <SettingsSubheading>
+                        TLS Key Log File { keyLogFilePath !== currentKeyLogFilePath &&
+                            <UnsavedIcon title="Restart app to apply changes" />
+                        }
+                    </SettingsSubheading>
+
+                    <TlsKeyLogContainer>
+                        <TextInput
+                            placeholder={
+                                navigator.platform.startsWith('Win')
+                                    ? 'C:\\tls-keys.log'
+                                    : '/tmp/tls-keys.log'
+                            }
+                            value={this.tlsKeyFileInput}
+                            onChange={this.setTlsKeyFilePath}
+                        />
+                        { !!keyLogFilePath && <>
+                            <InputClearButton
+                                title="Unset TLS key file"
+                                icon={['fas', 'times']}
+                                onClick={this.clearTlsKeyFilePath}
+                            />
+                        </> }
+                    </TlsKeyLogContainer>
+
+                    <SettingsExplanation>
+                        If set, TLS keys for all client & server traffic will be logged to this file,
+                        allowing inspection of raw TLS packet contents & details in low-level packet
+                        inspection tools like Wireshark.
+                    </SettingsExplanation>
+                </>
+            }
         </CollapsibleCard>
     }
 

src/index.tsx

@@ -82,7 +82,7 @@ const rulesStore = new RulesStore(accountStore, proxyStore,
     }
 );
 const eventsStore = new EventsStore(proxyStore, apiStore, rulesStore);
-const sendStore = new SendStore(accountStore, eventsStore, rulesStore);
+const sendStore = new SendStore(accountStore, eventsStore, rulesStore, proxyStore);
 
 const stores = {
     accountStore,

src/model/proxy-store.ts

@@ -176,8 +176,11 @@ export class ProxyStore {
             adminServerUrl: 'http://127.0.0.1:45456'
         });
 
+        // These are persisted initially, so we know if the user updates them that we
+        // need to restart the proxy:
         this._http2CurrentlyEnabled = this.http2Enabled;
         this._currentTlsPassthroughConfig = _.cloneDeep(this.tlsPassthroughConfig);
+        this._currentKeyLogFilePath = this.keyLogFilePath;
 
         this.monitorRemoteClientConnection(this.adminClient);
 
@@ -189,7 +192,8 @@ export class ProxyStore {
                     // User configurable settings:
                     http2: this._http2CurrentlyEnabled,
                     https: {
-                        tlsPassthrough: this._currentTlsPassthroughConfig
+                        tlsPassthrough: this._currentTlsPassthroughConfig,
+                        keyLogFile: this._currentKeyLogFilePath
                     } as MockttpHttpsOptions, // Cert/Key options are set by the server
                     socks: true,
                     passthrough: this.accountStore.featureFlags.includes('raw-tunnels')
@@ -296,6 +300,13 @@ export class ProxyStore {
         return this._currentTlsPassthroughConfig;
     }
 
+    @persist @observable
+    keyLogFilePath: string | undefined = undefined;
+    private _currentKeyLogFilePath: string | undefined = this.keyLogFilePath;
+    get currentKeyLogFilePath() {
+        return this._currentKeyLogFilePath;
+    }
+
     setRequestRules = (...rules: RequestRuleData[]) => {
         const { adminStream } = this.adminClient;
 

src/model/send/send-request-model.ts

@@ -150,6 +150,7 @@ export interface RequestOptions {
     clientCertificate?: { pfx: Buffer, passphrase?: string };
     proxyConfig?: ClientProxyConfig;
     lookupOptions?: { servers?: string[] };
+    keyLogFile?: string;
 }
 
 export const RULE_PARAM_REF_KEY = '__rule_param_reference__';

src/model/send/send-store.ts

@@ -22,6 +22,7 @@ import { trackEvent } from '../../metrics';
 import { EventsStore } from '../events/events-store';
 import { RulesStore } from '../rules/rules-store';
 import { AccountStore } from '../account/account-store';
+import { ProxyStore } from '../proxy-store';
 import * as ServerApi from '../../services/server-api';
 
 import { HttpExchange } from '../http/http-exchange';
@@ -32,22 +33,25 @@ import {
     RequestInput,
     SendRequest,
     RULE_PARAM_REF_KEY,
-    sendRequestSchema
+    sendRequestSchema,
+    RequestOptions
 } from './send-request-model';
 
 export class SendStore {
 
     constructor(
         private accountStore: AccountStore,
         private eventStore: EventsStore,
-        private rulesStore: RulesStore
+        private rulesStore: RulesStore,
+        private proxyStore: ProxyStore
     ) {}
 
     readonly initialized = lazyObservablePromise(async () => {
         await Promise.all([
             this.accountStore.initialized,
             this.eventStore.initialized,
-            this.rulesStore.initialized
+            this.rulesStore.initialized,
+            this.proxyStore.initialized
         ]);
 
         if (this.accountStore.mightBePaidUser) {
@@ -166,13 +170,14 @@ export class SendStore {
                 ({ cert: cert.rawPEM })
             );
 
-            const requestOptions = {
+            const requestOptions: RequestOptions = {
                 ignoreHostHttpsErrors: passthroughOptions.ignoreHostHttpsErrors,
-                additionalCACerts: additionalCACerts,
+                additionalTrustedCAs: additionalCACerts,
                 trustAdditionalCAs: additionalCACerts, // Deprecated alias, here for backward compat
                 clientCertificate,
                 proxyConfig: getProxyConfig(this.rulesStore.proxyConfig),
-                lookupOptions: passthroughOptions.lookupOptions
+                lookupOptions: passthroughOptions.lookupOptions,
+                keyLogFile: this.proxyStore.keyLogFilePath
             };
 
             const encodedBody = await requestInput.rawBody.encodingBestEffortPromise;

src/services/service-versions.ts

@@ -85,4 +85,5 @@ export const CONNECTION_RESET_SUPPORTED = '^1.12.0';
 export const SERVER_REST_API_SUPPORTED = '^1.13.0';
 export const SERVER_SEND_API_SUPPORTED = '^1.13.0';
 export const ADVANCED_PATCH_TRANSFORMS = '^1.18.0';
-export const WILDCARD_CLIENT_CERTS = '^1.22.0';
+export const WILDCARD_CLIENT_CERTS = '^1.22.0';
+export const KEY_LOG_FILE_SUPPORTED = '^1.23.0';

src/util/ui.ts

@@ -19,7 +19,8 @@ window.addEventListener('resize', action(() => {
     windowSize.width = window.innerWidth;
 }));
 
-const isMac = navigator.platform.startsWith('Mac');
+export const isWindows = navigator.platform.startsWith('Win');
+export const isMac = navigator.platform.startsWith('Mac');
 
 export const Ctrl = isMac
     ? '⌘'