fix(SEC-WEB-32+34): Add input maxLength limits + API request timeout

SEC-WEB-32: Added maxLength to form inputs (names: 100, descriptions: 500, emails: 254) in WorkspaceSettings, TeamSettings, InviteMember components. SEC-WEB-34: Added AbortController timeout (30s default, configurable) to apiRequest and apiPostFormData in API client. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-06 18:11:00 -06:00
parent 14b547d468
commit 014264c592
8 changed files with 320 additions and 80 deletions
--- a/apps/web/src/lib/api/client.test.ts
+++ b/apps/web/src/lib/api/client.test.ts
@@ -10,6 +10,7 @@ import {
  fetchCsrfToken,
  getCsrfToken,
  clearCsrfToken,
+  DEFAULT_API_TIMEOUT_MS,
 } from "./client";

 // Mock fetch globally
@@ -718,4 +719,84 @@ describe("API Client", (): void => {
      });
    });
  });
+
+  describe("Request timeout", (): void => {
+    it("should export a default timeout constant of 30000ms", (): void => {
+      expect(DEFAULT_API_TIMEOUT_MS).toBe(30_000);
+    });
+
+    it("should pass an AbortController signal to fetch", async (): Promise<void> => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ data: "ok" }),
+      });
+
+      await apiRequest("/test");
+
+      const callArgs = mockFetch.mock.calls[0]![1] as RequestInit;
+      expect(callArgs.signal).toBeDefined();
+      expect(callArgs.signal).toBeInstanceOf(AbortSignal);
+    });
+
+    it("should abort and throw timeout error when request exceeds timeoutMs", async (): Promise<void> => {
+      // Mock fetch that never resolves, simulating a hanging request
+      mockFetch.mockImplementationOnce(
+        (_url: string, init: RequestInit) =>
+          new Promise((_resolve, reject) => {
+            if (init.signal) {
+              init.signal.addEventListener("abort", () => {
+                reject(new DOMException("The operation was aborted.", "AbortError"));
+              });
+            }
+          })
+      );
+
+      await expect(apiRequest("/slow-endpoint", { timeoutMs: 50 })).rejects.toThrow(
+        "Request to /slow-endpoint timed out after 50ms"
+      );
+    });
+
+    it("should allow disabling timeout with timeoutMs=0", async (): Promise<void> => {
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ data: "ok" }),
+      });
+
+      const result = await apiRequest<{ data: string }>("/test", { timeoutMs: 0 });
+      expect(result).toEqual({ data: "ok" });
+    });
+
+    it("should clear timeout after successful request", async (): Promise<void> => {
+      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+
+      mockFetch.mockResolvedValueOnce({
+        ok: true,
+        json: () => Promise.resolve({ data: "ok" }),
+      });
+
+      await apiRequest("/test");
+
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+
+    it("should clear timeout after failed request", async (): Promise<void> => {
+      const clearTimeoutSpy = vi.spyOn(global, "clearTimeout");
+
+      mockFetch.mockResolvedValueOnce({
+        ok: false,
+        statusText: "Not Found",
+        status: 404,
+        json: () =>
+          Promise.resolve({
+            code: "NOT_FOUND",
+            message: "Not found",
+          }),
+      });
+
+      await expect(apiRequest("/test")).rejects.toThrow("Not found");
+      expect(clearTimeoutSpy).toHaveBeenCalled();
+      clearTimeoutSpy.mockRestore();
+    });
+  });
 });
--- a/apps/web/src/lib/api/client.ts
+++ b/apps/web/src/lib/api/client.ts
@@ -28,11 +28,16 @@ export interface ApiResponse<T> {
  };
 }

+/** Default timeout for API requests in milliseconds (30 seconds) */
+export const DEFAULT_API_TIMEOUT_MS = 30_000;
+
 /**
 * Options for API requests with workspace context
 */
 export interface ApiRequestOptions extends RequestInit {
  workspaceId?: string;
+  /** Request timeout in milliseconds. Defaults to 30000 (30s). Set to 0 to disable. */
+  timeoutMs?: number;
  _isRetry?: boolean; // Internal flag to prevent infinite retry loops
 }

@@ -94,60 +99,91 @@ async function ensureCsrfToken(): Promise<string> {
 */
 export async function apiRequest<T>(endpoint: string, options: ApiRequestOptions = {}): Promise<T> {
  const url = `${API_BASE_URL}${endpoint}`;
-  const { workspaceId, _isRetry, ...fetchOptions } = options;
+  const { workspaceId, timeoutMs, _isRetry, ...fetchOptions } = options;

-  // Build headers with workspace ID if provided
-  const baseHeaders = (fetchOptions.headers as Record<string, string> | undefined) ?? {};
-  const headers: Record<string, string> = {
-    "Content-Type": "application/json",
-    ...baseHeaders,
-  };
+  // Set up abort controller for timeout
+  const timeout = timeoutMs ?? DEFAULT_API_TIMEOUT_MS;
+  const controller = new AbortController();
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;

-  // Add workspace ID header if provided (recommended over query string)
-  if (workspaceId) {
-    headers["X-Workspace-Id"] = workspaceId;
+  if (timeout > 0) {
+    timeoutId = setTimeout(() => {
+      controller.abort();
+    }, timeout);
  }

-  // Add CSRF token for state-changing requests (POST, PUT, PATCH, DELETE)
-  const method = (fetchOptions.method ?? "GET").toUpperCase();
-  const isStateChanging = ["POST", "PUT", "PATCH", "DELETE"].includes(method);
-
-  if (isStateChanging) {
-    const token = await ensureCsrfToken();
-    headers["X-CSRF-Token"] = token;
+  // Merge with any caller-provided signal
+  const callerSignal = fetchOptions.signal;
+  if (callerSignal) {
+    callerSignal.addEventListener("abort", () => {
+      controller.abort();
+    });
  }

-  const response = await fetch(url, {
-    ...fetchOptions,
-    headers,
-    credentials: "include", // Include cookies for session
-  });
+  try {
+    // Build headers with workspace ID if provided
+    const baseHeaders = (fetchOptions.headers as Record<string, string> | undefined) ?? {};
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...baseHeaders,
+    };

-  if (!response.ok) {
-    const error: ApiError = await response.json().catch(
-      (): ApiError => ({
-        code: "UNKNOWN_ERROR",
-        message: response.statusText || "An unknown error occurred",
-      })
-    );
-
-    // Handle CSRF token mismatch - refresh token and retry once
-    if (
-      response.status === 403 &&
-      (error.code === "CSRF_ERROR" || error.message.includes("CSRF")) &&
-      !_isRetry
-    ) {
-      // Refresh CSRF token
-      await fetchCsrfToken();
-
-      // Retry the request with new token
-      return apiRequest<T>(endpoint, { ...options, _isRetry: true });
+    // Add workspace ID header if provided (recommended over query string)
+    if (workspaceId) {
+      headers["X-Workspace-Id"] = workspaceId;
    }

-    throw new Error(error.message);
-  }
+    // Add CSRF token for state-changing requests (POST, PUT, PATCH, DELETE)
+    const method = (fetchOptions.method ?? "GET").toUpperCase();
+    const isStateChanging = ["POST", "PUT", "PATCH", "DELETE"].includes(method);

-  return response.json() as Promise<T>;
+    if (isStateChanging) {
+      const token = await ensureCsrfToken();
+      headers["X-CSRF-Token"] = token;
+    }
+
+    const response = await fetch(url, {
+      ...fetchOptions,
+      headers,
+      credentials: "include", // Include cookies for session
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      const error: ApiError = await response.json().catch(
+        (): ApiError => ({
+          code: "UNKNOWN_ERROR",
+          message: response.statusText || "An unknown error occurred",
+        })
+      );
+
+      // Handle CSRF token mismatch - refresh token and retry once
+      if (
+        response.status === 403 &&
+        (error.code === "CSRF_ERROR" || error.message.includes("CSRF")) &&
+        !_isRetry
+      ) {
+        // Refresh CSRF token
+        await fetchCsrfToken();
+
+        // Retry the request with new token
+        return await apiRequest<T>(endpoint, { ...options, _isRetry: true });
+      }
+
+      throw new Error(error.message);
+    }
+
+    return await (response.json() as Promise<T>);
+  } catch (err: unknown) {
+    if (err instanceof DOMException && err.name === "AbortError") {
+      throw new Error(`Request to ${endpoint} timed out after ${String(timeout)}ms`);
+    }
+    throw err;
+  } finally {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+  }
 }

 /**
@@ -222,49 +258,73 @@ export async function apiDelete<T>(endpoint: string, workspaceId?: string): Prom
 export async function apiPostFormData<T>(
  endpoint: string,
  formData: FormData,
-  workspaceId?: string
+  workspaceId?: string,
+  timeoutMs?: number
 ): Promise<T> {
  const url = `${API_BASE_URL}${endpoint}`;
  const headers: Record<string, string> = {};

-  // Add workspace ID header if provided
-  if (workspaceId) {
-    headers["X-Workspace-Id"] = workspaceId;
+  // Set up abort controller for timeout
+  const timeout = timeoutMs ?? DEFAULT_API_TIMEOUT_MS;
+  const controller = new AbortController();
+  let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+  if (timeout > 0) {
+    timeoutId = setTimeout(() => {
+      controller.abort();
+    }, timeout);
  }

-  // Add CSRF token for state-changing request
-  const token = await ensureCsrfToken();
-  headers["X-CSRF-Token"] = token;
-
-  const response = await fetch(url, {
-    method: "POST",
-    headers,
-    body: formData,
-    credentials: "include",
-  });
-
-  if (!response.ok) {
-    const error: ApiError = await response.json().catch(
-      (): ApiError => ({
-        code: "UNKNOWN_ERROR",
-        message: response.statusText || "An unknown error occurred",
-      })
-    );
-
-    // Handle CSRF token mismatch - refresh token and retry once
-    if (
-      response.status === 403 &&
-      (error.code === "CSRF_ERROR" || error.message.includes("CSRF"))
-    ) {
-      // Refresh CSRF token
-      await fetchCsrfToken();
-
-      // Retry the request with new token (recursive call)
-      return apiPostFormData<T>(endpoint, formData, workspaceId);
+  try {
+    // Add workspace ID header if provided
+    if (workspaceId) {
+      headers["X-Workspace-Id"] = workspaceId;
    }

-    throw new Error(error.message);
-  }
+    // Add CSRF token for state-changing request
+    const token = await ensureCsrfToken();
+    headers["X-CSRF-Token"] = token;

-  return response.json() as Promise<T>;
+    const response = await fetch(url, {
+      method: "POST",
+      headers,
+      body: formData,
+      credentials: "include",
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      const error: ApiError = await response.json().catch(
+        (): ApiError => ({
+          code: "UNKNOWN_ERROR",
+          message: response.statusText || "An unknown error occurred",
+        })
+      );
+
+      // Handle CSRF token mismatch - refresh token and retry once
+      if (
+        response.status === 403 &&
+        (error.code === "CSRF_ERROR" || error.message.includes("CSRF"))
+      ) {
+        // Refresh CSRF token
+        await fetchCsrfToken();
+
+        // Retry the request with new token (recursive call)
+        return await apiPostFormData<T>(endpoint, formData, workspaceId, timeoutMs);
+      }
+
+      throw new Error(error.message);
+    }
+
+    return await (response.json() as Promise<T>);
+  } catch (err: unknown) {
+    if (err instanceof DOMException && err.name === "AbortError") {
+      throw new Error(`Request to ${endpoint} timed out after ${String(timeout)}ms`);
+    }
+    throw err;
+  } finally {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId);
+    }
+  }
 }