Merge branch 'socks'

Author: pimterry

src/components/common/duration-pill.tsx

@@ -5,6 +5,7 @@ import { TimingEvents } from '../../types';
 import { observableClock } from '../../util/observable';
 
 import { Pill } from './pill';
+import { formatDuration } from '../../util/text';
 
 function sigFig(num: number, figs: number): string {
     return num.toFixed(figs);
@@ -41,11 +42,5 @@ export const DurationPill = observer((p: DurationPillProps) => {
 
     if (duration === undefined) return null;
 
-    return <Pill className={p.className}>{
-        duration < 100 ? sigFig(duration, 1) + 'ms' : // 22.3ms
-        duration < 1000 ? sigFig(duration, 0) + 'ms' : // 999ms
-        duration < 5000 ? sigFig(duration / 1000, 2) + ' seconds' : // 3.04 seconds
-        duration < 9900 ? sigFig(duration / 1000, 1) + ' seconds' : // 8.2 seconds
-        sigFig(duration / 1000, 0) + ' seconds' // 30 seconds
-    }</Pill>;
+    return <Pill className={p.className}>{formatDuration(duration)}</Pill>;
 });

src/components/intercept/config/frida-config.tsx

@@ -394,7 +394,8 @@ class FridaConfig extends React.Component<{
         this.props.activateInterceptor({
             action: 'intercept',
             hostId: host.id,
-            targetId
+            targetId,
+            enableSocks: this.props.accountStore!.featureFlags.includes('raw-tunnels')
         })
         .catch((e) => alertActivationError(`intercept ${targetId}`, e))
         .then(() => {

src/components/view/http/http-details-pane.tsx

@@ -462,7 +462,7 @@ export class HttpDetailsPane extends React.Component<{
             // reset when we switch between exchanges:
             key={`${this.cardProps.webSocketMessages.key}-${this.props.exchange.id}`}
             streamId={this.props.exchange.id}
-            streamType='WebSocket'
+            cardHeading='WebSocket Messages'
 
             editorNode={this.props.streamMessageEditor}
 

src/components/view/raw-tunnel-details-pane.tsx

@@ -0,0 +1,97 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as portals from 'react-reverse-portal';
+import { inject, observer } from 'mobx-react';
+
+import { getReadableIP } from '../../model/network';
+import { RawTunnel } from '../../model/raw-tunnel';
+import { UiStore } from '../../model/ui/ui-store';
+
+import { formatDuration } from '../../util/text';
+import { getReadableSize } from '../../util/buffer';
+
+import { MediumCard } from '../common/card';
+
+import { ContentLabelBlock, Content, CopyableMonoValue } from '../common/text-content';
+import { PaneScrollContainer } from './view-details-pane';
+import { StreamMessageListCard } from './stream-message-list-card';
+import { SelfSizedEditor } from '../editor/base-editor';
+
+@inject('uiStore')
+@observer
+export class RawTunnelDetailsPane extends React.Component<{
+    tunnel: RawTunnel,
+    streamMessageEditor: portals.HtmlPortalNode<typeof SelfSizedEditor>,
+    isPaidUser: boolean,
+    uiStore?: UiStore
+}> {
+    render() {
+        const { tunnel } = this.props;
+
+        const sourceDetailParts = getReadableIP(tunnel.remoteIpAddress).split(' ');
+        const sourceIp = sourceDetailParts[0];
+        const sourceDetails = sourceDetailParts.slice(1).join(' ');
+
+        const packetCardProps = this.props.uiStore!.viewCardProps['rawTunnelPackets'];
+
+        const packetsListCard = <StreamMessageListCard
+            isPaidUser={this.props.isPaidUser}
+            {...packetCardProps}
+
+            streamId={tunnel.id}
+            cardHeading='Raw Data'
+            streamLabel={tunnel.upstreamHostname}
+            editorNode={this.props.streamMessageEditor}
+            filenamePrefix={`Raw Tunnel ${tunnel.upstreamHostname} ${tunnel.upstreamPort} ${tunnel.id}`}
+            messages={tunnel.packets}
+        />;
+
+        if (packetCardProps.expanded) return packetsListCard;
+
+        return <PaneScrollContainer>
+            <MediumCard>
+                <header>
+                    <h1>Raw Tunnel</h1>
+                </header>
+
+                <ContentLabelBlock>Details</ContentLabelBlock>
+                <Content>
+                    <p>
+                        This connection was not intercepted by HTTP Toolkit, as it contains
+                        an unrecognized non-HTTP protocol, so was tunnelled directly to its destination.
+                    </p>
+                </Content>
+                <Content>
+                    <p>
+                        The connection was made from <CopyableMonoValue>{
+                            sourceIp
+                        }:{
+                            tunnel.remotePort
+                        }</CopyableMonoValue> { sourceDetails } to <CopyableMonoValue>{
+                            tunnel.upstreamHostname
+                        }:{
+                            tunnel.upstreamPort
+                        }</CopyableMonoValue>.
+                    </p>
+                </Content>
+            </MediumCard>
+            { packetsListCard }
+            {
+                !tunnel.isOpen() &&
+                <MediumCard>
+                    <header>
+                        <h1>Connection Closed</h1>
+                    </header>
+                    <Content>
+                        This tunnel was closed {
+                            tunnel.timingEvents.disconnectTimestamp
+                            ? <>after {formatDuration(
+                                tunnel.timingEvents.disconnectTimestamp - tunnel.timingEvents.connectTimestamp
+                            )}</> : <></>
+                        }.
+                    </Content>
+                </MediumCard>
+            }
+        </PaneScrollContainer>;
+    }
+}

src/components/view/rtc/rtc-data-channel-card.tsx

@@ -29,7 +29,7 @@ export const RTCDataChannelCard = observer(({
     // reset when we switch between traffic:
     key={dataChannel.id}
     streamId={dataChannel.id}
-    streamType='DataChannel'
+    cardHeading='DataChannel Messages'
     streamLabel={dataChannel.label}
 
     editorNode={streamMessageEditor}

src/components/view/stream-message-list-card.tsx

@@ -34,14 +34,12 @@ function getFilename(
     }.${extension}`;
 }
 
-export type StreamType = 'WebSocket' | 'DataChannel';
-
 @observer
 export class StreamMessageListCard extends React.Component<ExpandableCardProps & {
     isPaidUser: boolean,
     filenamePrefix: string,
     streamId: string,
-    streamType: StreamType,
+    cardHeading: string,
     streamLabel?: string,
     messages: ReadonlyArray<StreamMessage>,
     editorNode: portals.HtmlPortalNode<typeof SelfSizedEditor>
@@ -59,7 +57,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
     render() {
         const {
             streamId,
-            streamType,
+            cardHeading,
             streamLabel,
             messages,
             isPaidUser,
@@ -88,7 +86,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
                         icon={['fas', 'download']}
                         title={
                             isPaidUser
-                                ? "Save these message as a file"
+                                ? "Save these messages as a file"
                                 : "With Pro: Save these messages as a file"
                         }
                         disabled={!isPaidUser}
@@ -115,7 +113,7 @@ export class StreamMessageListCard extends React.Component<ExpandableCardProps &
                 <CollapsibleCardHeading
                     onCollapseToggled={onCollapseToggled}
                 >
-                    { streamType } messages
+                    { cardHeading }
                 </CollapsibleCardHeading>
             </header>
             <StreamMessagesList expanded={!!expanded}>

src/components/view/stream-message-rows.tsx

@@ -66,13 +66,15 @@ export const StreamMessageCollapsedRow = React.memo((p: {
             )
         }
     </CollapsedStreamContent>
-    {
-        p.message.isBinary &&
-            <Pill color={warningColor}>Binary</Pill>
-    }
-    <Pill>
-        { getReadableSize(p.message.content.byteLength) }
-    </Pill>
+    <RowTags>
+        {
+            p.message.isBinary &&
+                <Pill color={warningColor}>Binary</Pill>
+        }
+        <Pill>
+            { getReadableSize(p.message.content.byteLength) }
+        </Pill>
+    </RowTags>
 </CollapsedStreamRowContainer>);
 
 const MessageArrow = styled(React.memo((p: {
@@ -141,6 +143,12 @@ const CollapsedStreamContent = styled(ContentMonoValue)`
     padding: 3px 0 4px;
 `;
 
+const RowTags = styled.div`
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+`;
+
 interface MessageEditorRowProps {
     streamId: string,
     message: StreamMessage,

src/components/view/view-event-list.tsx

@@ -15,7 +15,8 @@ import {
     RTCStream,
     FailedTlsConnection,
     RTCConnection,
-    TlsTunnel
+    TlsTunnel,
+    RawTunnel
 } from '../../types';
 import { UiStore } from '../../model/ui/ui-store';
 
@@ -381,6 +382,13 @@ const EventRow = observer((props: EventRowProps) => {
             style={style}
             event={event}
         />;
+    } else if (event.isRawTunnel()) {
+        return <RawTunnelRow
+            index={index}
+            isSelected={isSelected}
+            style={style}
+            event={event}
+        />;
     } else {
         throw new UnreachableCheck(event);
     }
@@ -708,6 +716,35 @@ const BuiltInApiRow = observer((p: {
     </TrafficEventListRow>
 });
 
+const RawTunnelRow = observer((p: {
+    index: number,
+    event: RawTunnel,
+    isSelected: boolean,
+    style: {}
+}) => {
+    const { event } = p;
+
+    const connectionTarget = event.upstreamHostname
+        ? `${event.upstreamHostname}:${event.upstreamPort}`
+        : 'unknown destination';
+
+    return <TlsListRow
+        role="row"
+        aria-label={`Non-HTTP connection to ${connectionTarget}`}
+        aria-rowindex={p.index + 1}
+        data-event-id={event.id}
+        tabIndex={p.isSelected ? 0 : -1}
+
+        className={p.isSelected ? 'selected' : ''}
+        style={p.style}
+    >
+        {
+            event.isOpen() &&
+                <ConnectedSpinnerIcon />
+        } Non-HTTP connection to { connectionTarget }
+    </TlsListRow>
+});
+
 const TlsRow = observer((p: {
     index: number,
     tlsEvent: FailedTlsConnection | TlsTunnel,

src/components/view/view-page.tsx

@@ -13,15 +13,15 @@ import {
 import { observer, disposeOnUnmount, inject } from 'mobx-react';
 import * as portals from 'react-reverse-portal';
 
-import { WithInjected, CollectedEvent, HttpExchangeView } from '../../types';
+import { WithInjected, CollectedEvent, HttpExchangeView, RawTunnel } from '../../types';
 import { NARROW_LAYOUT_BREAKPOINT, styled } from '../../styles';
 import { useHotkeys, isEditable, windowSize, AriaCtrlCmd, Ctrl } from '../../util/ui';
 import { debounceComputed } from '../../util/observable';
 import { UnreachableCheck, unreachableCheck } from '../../util/error';
 
 import { SERVER_SEND_API_SUPPORTED, serverVersion, versionSatisfies } from '../../services/service-versions';
 
-import { UiStore } from '../../model/ui/ui-store';
+import { ExpandableViewCardKey, UiStore } from '../../model/ui/ui-store';
 import { ProxyStore } from '../../model/proxy-store';
 import { EventsStore } from '../../model/events/events-store';
 import { RulesStore } from '../../model/rules/rules-store';
@@ -45,6 +45,7 @@ import { TlsTunnelDetailsPane } from './tls/tls-tunnel-details-pane';
 import { RTCDataChannelDetailsPane } from './rtc/rtc-data-channel-details-pane';
 import { RTCMediaDetailsPane } from './rtc/rtc-media-details-pane';
 import { RTCConnectionDetailsPane } from './rtc/rtc-connection-details-pane';
+import { RawTunnelDetailsPane } from './raw-tunnel-details-pane';
 
 interface ViewPageProps {
     className?: string;
@@ -142,6 +143,19 @@ const EDITOR_KEYS = [
 ] as const;
 type EditorKey = typeof EDITOR_KEYS[number];
 
+const paneExpansionRequirements: { [key in ExpandableViewCardKey]: (event: CollectedEvent) => boolean } = {
+    requestBody: (event: CollectedEvent) =>
+        event.isHttp() &&
+        (event.hasRequestBody() || !!event.downstream.requestBreakpoint),
+    responseBody: (event: CollectedEvent) =>
+        event.isHttp() &&
+        (event.hasResponseBody() || !!event.downstream.responseBreakpoint),
+    webSocketMessages: (event: CollectedEvent) =>
+        event.isWebSocket() && event.wasAccepted,
+    rawTunnelPackets: (event: CollectedEvent) =>
+        event.isRawTunnel()
+};
+
 @inject('eventsStore')
 @inject('proxyStore')
 @inject('uiStore')
@@ -279,33 +293,14 @@ class ViewPage extends React.Component<ViewPageProps> {
             }
 
             const { expandedViewCard } = this.props.uiStore;
-            if (!expandedViewCard) return;
-
-            const selectedHttpExchange = this.selectedExchange;
-
-            // If you have a pane expanded, and select an event with no data
-            // for that pane, then disable the expansion:
-            if (
-                !selectedHttpExchange ||
-                (
-                    expandedViewCard === 'requestBody' &&
-                    !selectedHttpExchange.hasRequestBody() &&
-                    !selectedHttpExchange.downstream.requestBreakpoint
-                ) ||
-                (
-                    expandedViewCard === 'responseBody' &&
-                    !selectedHttpExchange.hasResponseBody() &&
-                    !selectedHttpExchange.downstream.responseBreakpoint
-                ) ||
-                (
-                    expandedViewCard === 'webSocketMessages' &&
-                    !(selectedHttpExchange.isWebSocket() && selectedHttpExchange.wasAccepted)
-                )
-            ) {
-                runInAction(() => {
-                    this.props.uiStore.expandedViewCard = undefined;
-                });
-                return;
+            if (expandedViewCard) {
+                // If you have a pane expanded, and select an event with no data
+                // for that pane, then disable the expansion:
+                if (!paneExpansionRequirements[expandedViewCard](selectedEvent)) {
+                    runInAction(() => {
+                        this.props.uiStore.expandedViewCard = undefined;
+                    });
+                }
             }
         }));
 
@@ -404,6 +399,12 @@ class ViewPage extends React.Component<ViewPageProps> {
                 answerEditor={this.editors.response}
                 navigate={this.props.navigate}
             />
+        } else if (this.selectedEvent.isRawTunnel()) {
+            rightPane = <RawTunnelDetailsPane
+                tunnel={this.selectedEvent}
+                streamMessageEditor={this.editors.streamMessage}
+                isPaidUser={isPaidUser}
+            />
         } else {
             throw new UnreachableCheck(this.selectedEvent);
         }