Merge pull request #4 from JS00001/main

add support for formdata

Author: JS00001

bridge/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "HTTP Interceptor",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "identifier": "com.http-interceptor.js00001",
   "build": {
     "beforeDevCommand": "npm run dev",

shared/lib/index.ts

@@ -5,14 +5,21 @@ export const RED = '🔴';
 export const GREEN = '🟢';
 export const YELLOW = '🟡';
 
+type ParsedRequestParams = {
+  queryParams: Record<string, any>;
+  postData: Record<string, any>;
+  postDataType: 'json' | 'form-data' | null;
+};
+
 /**
  * Take a CDP request, and convert both its query params and post data
  * into a combined object
  */
 export const getRequestParams = (request: Protocol.Network.Request) => {
-  const reqParams = {
+  const reqParams: ParsedRequestParams = {
     queryParams: {},
     postData: {},
+    postDataType: null,
   };
 
   // Get URL params and store them
@@ -22,9 +29,22 @@ export const getRequestParams = (request: Protocol.Network.Request) => {
 
   // Get the post data and store it
   if (request.hasPostData && request.postData) {
-    const data = parseJSON(request.postData);
-    if (!data) return reqParams;
-    reqParams.postData = data;
+    const jsonPayload = parseJSON(request.postData);
+
+    if (jsonPayload) {
+      reqParams.postDataType = 'json';
+      reqParams.postData = jsonPayload;
+      return reqParams;
+    }
+
+    // We need to handle multipart form data if the body is not already a JSON payload
+    const boundary = getBoundary(request);
+
+    if (boundary) {
+      const formData = parseFormData(request.postData, boundary);
+      reqParams.postDataType = 'form-data';
+      reqParams.postData = formData;
+    }
   }
 
   return reqParams;
@@ -108,3 +128,50 @@ export const formatError = (errorText?: string) => {
 
   return `(failed) ${errorText}`;
 };
+
+/**
+ * Parse multipart-form data
+ */
+export const parseFormData = (data: string, boundary: string) => {
+  const fields: Record<string, string> = {};
+  const parts = data.split(`--${boundary}`).filter((p) => p.trim() && p.trim() !== '--');
+
+  for (const part of parts) {
+    const [rawHeaders, ...rest] = part.split('\r\n\r\n');
+    if (!rawHeaders || !rest.length) continue;
+
+    const nameMatch = rawHeaders.match(/name="([^"]+)"/);
+    if (!nameMatch) continue;
+
+    const name = nameMatch[1];
+    const value = rest.join('\r\n\r\n').replace(/\r\n$/, ''); // remove trailing newline
+    fields[name] = value;
+  }
+
+  return fields;
+};
+
+/**
+ * Turn an object back into form-data
+ */
+export const assembleFormData = (fields: Record<string, string>, boundary: string) => {
+  let body = '';
+
+  for (const [name, value] of Object.entries(fields)) {
+    body += `--${boundary}\r\n`;
+    body += `Content-Disposition: form-data; name="${name}"\r\n\r\n`;
+    body += `${value}\r\n`;
+  }
+  body += `--${boundary}--\r\n`;
+  return body;
+};
+
+/**
+ * Check if a request is a multipart form data request, if so, return the
+ * boundary
+ */
+export const getBoundary = (request: Protocol.Network.Request) => {
+  const contentType = request.headers['Content-Type'] ?? request.headers['content-type'] ?? '';
+  const boundary = contentType.split('boundary=')[1];
+  return boundary;
+};

ui/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import classNames from "classnames";
-import { CellTowerIcon, CommandIcon, GearIcon } from "@phosphor-icons/react";
+import { CellTowerIcon, GearIcon } from "@phosphor-icons/react";
 
 import useRouter from "@ui/store/router";
 
@@ -15,12 +15,7 @@ export default function Sidebar() {
         route: "/intercept" as const,
         isActive: router.pathname.startsWith("/intercept"),
       },
-      {
-        icon: CommandIcon,
-        label: "Shortcuts",
-        route: "/shortcuts" as const,
-        isActive: router.pathname.startsWith("/shortcuts"),
-      },
+
       {
         icon: GearIcon,
         label: "Settings",

ui/components/event-viewer/PayloadView.tsx

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 
 import { NetworkEvent } from "@shared/types";
 import type { DataType } from "@shared/types";
-import { getRequestParams } from "@shared/lib";
+import { assembleFormData, getBoundary, getRequestParams } from "@shared/lib";
 import JsonViewer from "@ui/components/json-viewer";
 import { useNetworkEventStore } from "@shared/stores/network-event";
 
@@ -23,8 +23,11 @@ export default function PayloadView({ event, editable = false }: PayloadViewProp
   const showOnlyQueryParams = !hasPostData && hasQueryParams;
 
   const sections = useMemo(() => {
+    const requestPayloadTitle =
+      requestParams.postDataType === "json" ? "Request Payload" : "Form Data";
+
     if (showOnlyPostData) {
-      return [{ title: "Request Payload", data: requestParams.postData, editable }];
+      return [{ title: requestPayloadTitle, data: requestParams.postData, editable }];
     }
 
     if (showOnlyQueryParams) {
@@ -39,7 +42,7 @@ export default function PayloadView({ event, editable = false }: PayloadViewProp
       },
       {
         editable,
-        title: "Request Payload",
+        title: requestPayloadTitle,
         data: requestParams.postData,
       },
     ];
@@ -52,13 +55,18 @@ export default function PayloadView({ event, editable = false }: PayloadViewProp
     if (isPostData) {
       lodash.set(requestParams.postData, path, value);
 
+      const boundary = getBoundary(event.request);
+
+      // If this request is a multipart form data request, we need to reassemble the form data, otherwise
+      // just use the stringified JSON
+      const postData = boundary
+        ? assembleFormData(requestParams.postData, boundary)
+        : JSON.stringify(requestParams.postData);
+
       updateRequest({
         tabId: event.tabId,
         requestId: event.requestId,
-        request: {
-          ...request,
-          postData: JSON.stringify(requestParams.postData),
-        },
+        request: { ...request, postData },
       });
     }
   };

ui/components/json-viewer/Group.tsx

@@ -10,8 +10,8 @@ export default function Group({ nodeKey, expanded, level, value }: GroupProps) {
 
   return (
     <div style={{ paddingLeft: level * 16 }} className="w-full hover:bg-primary-50 -ml-4">
-      <p className="truncate text-gray-800 w-full">
-        <span className="mr-2 text-[12px]">{arrow}</span>
+      <p className="truncate text-gray-800 w-full text-[11px]">
+        <span className="mr-2">{arrow}</span>
         <span className="text-fuchsia-800 shrink-0">{nodeKey}</span>
         {nodeKey && <span className="mr-2">:</span>}
         {value}

ui/components/json-viewer/Node.tsx

@@ -94,12 +94,15 @@ export default function Node({ nodeKey, path, data, level, editable, onChange }:
   }[dataType];
 
   const containerClasses = classNames("w-full flex items-center hover:bg-primary-50");
-  const valueClasses = classNames("truncate resize-none w-auto caret-black", textColor);
+  const valueClasses = classNames(
+    "truncate resize-none w-auto caret-black text-[11px]",
+    textColor
+  );
 
   return (
     <div style={{ paddingLeft: level * 16 }} className={containerClasses}>
-      <p className="text-fuchsia-800 shrink-0">{nodeKey}</p>
-      <p className="text-gray-800 mr-2">:</p>
+      <p className="text-fuchsia-800 shrink-0 text-[11px]">{nodeKey}</p>
+      <p className="text-gray-800 mr-2 text-[11px]">:</p>
 
       {dataType === "string" && <StringQuotation />}
 

ui/pages/shortcuts.tsx

@@ -1,12 +1,10 @@
 import Settings from '@ui/pages/settings';
 import Intercept from '@ui/pages/intercept';
-import Shortcuts from '@ui/pages/shortcuts';
 
 export type Route = keyof typeof Routes;
 
 const Routes = {
   '/intercept': Intercept,
-  '/shortcuts': Shortcuts,
   '/settings': Settings,
 } as const;