Address response bodies by response id instead of a filesystem path

The body commands took a path from the client, so a token holder could
read any file the process could. They now take a response id and resolve
the location themselves, and the UI never sees a path at all: the desktop
host asks the backend where the file is, and the bridge fetches
/responses/:id/body.

Ephemeral responses (GraphQL introspection) never reach the database, so
resolution falls back to the path send writes them to.

apps/yaak-client/components/HttpResponsePane.tsx

@@ -8,6 +8,7 @@ import { useCopyHttpResponse } from "../hooks/useCopyHttpResponse";
 import { useHttpResponseEvents } from "../hooks/useHttpResponseEvents";
 import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useResponseBodyBytes, useResponseBodyText } from "../hooks/useResponseBodyText";
+import { useResponseBodyUrl } from "../hooks/useResponseBodyUrl";
 import { useResponseViewMode } from "../hooks/useResponseViewMode";
 import { useSaveResponse } from "../hooks/useSaveResponse";
 import { useTimelineViewMode } from "../hooks/useTimelineViewMode";
@@ -409,14 +410,13 @@ function EnsureCompleteResponse({
   Component,
 }: {
   response: HttpResponse;
-  Component: ComponentType<{ bodyPath: string }>;
+  Component: ComponentType<{ url: string }>;
 }) {
-  if (response.bodyPath === null) {
-    return <div>Empty response body</div>;
-  }
+  // Wait until the response has been fully-downloaded before asking for it
+  const complete = response.state === "closed";
+  const bodyUrl = useResponseBodyUrl(complete ? response : null);
 
-  // Wait until the response has been fully-downloaded
-  if (response.state !== "closed") {
+  if (!complete || bodyUrl.isPending) {
     return (
       <EmptyStateText>
         <LoadingIcon />
@@ -424,7 +424,15 @@ function EnsureCompleteResponse({
     );
   }
 
-  return <Component bodyPath={response.bodyPath} />;
+  if (bodyUrl.error) {
+    return <Banner color="danger">{String(bodyUrl.error)}</Banner>;
+  }
+
+  if (bodyUrl.data == null) {
+    return <div>Empty response body</div>;
+  }
+
+  return <Component url={bodyUrl.data} />;
 }
 
 function HttpSvgViewer({ response }: { response: HttpResponse }) {

apps/yaak-client/components/responseViewers/AudioViewer.tsx

@@ -1,29 +1,29 @@
 import { useEffect, useState } from "react";
-import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
-  bodyPath?: string;
+  /** A URL the host resolved, for a body it already stored. */
+  url?: string;
   data?: Uint8Array;
   mimeType?: string;
 }
 
-export function AudioViewer({ bodyPath, data, mimeType }: Props) {
+export function AudioViewer({ url, data, mimeType }: Props) {
   const [src, setSrc] = useState<string>();
 
   useEffect(() => {
-    if (bodyPath) {
-      setSrc(platform.files.url(bodyPath));
+    if (url) {
+      setSrc(url);
     } else if (data) {
       // The type matters here in a way it doesn't for an image: a media element goes by what
       // the blob declares rather than sniffing it, so an Ogg labelled as MP3 won't play
       const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "audio/mpeg" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [url, data, mimeType]);
 
   // oxlint-disable-next-line jsx-a11y/media-has-caption
   return <audio className="w-full" controls src={src} />;

apps/yaak-client/components/responseViewers/ImageViewer.tsx

@@ -1,10 +1,10 @@
 import classNames from "classnames";
 import { useEffect, useState } from "react";
-import { platform } from "@yaakapp-internal/platform";
 
 type Props = { className?: string; mimeType?: string } & (
   | {
-      bodyPath: string;
+      /** A URL the host resolved, for a body it already stored. */
+      url: string;
     }
   | {
       data: ArrayBuffer;
@@ -13,21 +13,21 @@ type Props = { className?: string; mimeType?: string } & (
 
 export function ImageViewer({ className, mimeType, ...props }: Props) {
   const [src, setSrc] = useState<string>();
-  const bodyPath = "bodyPath" in props ? props.bodyPath : null;
+  const url = "url" in props ? props.url : null;
   const data = "data" in props ? props.data : null;
 
   useEffect(() => {
-    if (bodyPath != null) {
-      setSrc(platform.files.url(bodyPath));
+    if (url != null) {
+      setSrc(url);
     } else if (data != null) {
       const blob = new Blob([data], { type: mimeType ?? "image/png" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [url, data, mimeType]);
 
   return (
     <img

apps/yaak-client/components/responseViewers/PdfViewer.tsx

@@ -6,7 +6,6 @@ import { useMemo, useRef, useState } from "react";
 import { Document, Page } from "react-pdf";
 import { useContainerSize } from "@yaakapp-internal/ui";
 import { fireAndForget } from "../../lib/fireAndForget";
-import { platform } from "@yaakapp-internal/platform";
 
 fireAndForget(
   import("react-pdf").then(({ pdfjs }) => {
@@ -18,7 +17,8 @@ fireAndForget(
 );
 
 interface Props {
-  bodyPath?: string;
+  /** A URL the host resolved, for a body it already stored. */
+  url?: string;
   data?: Uint8Array;
 }
 
@@ -27,7 +27,7 @@ const options = {
   standardFontDataUrl: "/standard_fonts/",
 };
 
-export function PdfViewer({ bodyPath, data }: Props) {
+export function PdfViewer({ url, data }: Props) {
   const containerRef = useRef<HTMLDivElement>(null);
   const [numPages, setNumPages] = useState<number>();
 
@@ -36,8 +36,8 @@ export function PdfViewer({ bodyPath, data }: Props) {
   // During render, not in an effect: an effect leaves the first paint with no file, and
   // `Document` renders its "Failed to load PDF file" state for that frame before recovering
   const src = useMemo(() => {
-    if (bodyPath) {
-      return platform.files.url(bodyPath);
+    if (url) {
+      return url;
     }
     if (data) {
       // Create a copy to avoid "Buffer is already detached" errors
@@ -45,7 +45,7 @@ export function PdfViewer({ bodyPath, data }: Props) {
       return { data: new Uint8Array(data) };
     }
     return undefined;
-  }, [bodyPath, data]);
+  }, [url, data]);
 
   const onDocumentLoadSuccess = ({ numPages: nextNumPages }: PDFDocumentProxy): void => {
     setNumPages(nextNumPages);

apps/yaak-client/components/responseViewers/VideoViewer.tsx

@@ -1,28 +1,28 @@
 import { useEffect, useState } from "react";
-import { platform } from "@yaakapp-internal/platform";
 
 interface Props {
-  bodyPath?: string;
+  /** A URL the host resolved, for a body it already stored. */
+  url?: string;
   data?: Uint8Array;
   mimeType?: string;
 }
 
-export function VideoViewer({ bodyPath, data, mimeType }: Props) {
+export function VideoViewer({ url, data, mimeType }: Props) {
   const [src, setSrc] = useState<string>();
 
   useEffect(() => {
-    if (bodyPath) {
-      setSrc(platform.files.url(bodyPath));
+    if (url) {
+      setSrc(url);
     } else if (data) {
       // As in AudioViewer: a media element trusts the declared type instead of sniffing
       const blob = new Blob([new Uint8Array(data)], { type: mimeType ?? "video/mp4" });
-      const url = URL.createObjectURL(blob);
-      setSrc(url);
-      return () => URL.revokeObjectURL(url);
+      const objectUrl = URL.createObjectURL(blob);
+      setSrc(objectUrl);
+      return () => URL.revokeObjectURL(objectUrl);
     } else {
       setSrc(undefined);
     }
-  }, [bodyPath, data, mimeType]);
+  }, [url, data, mimeType]);
 
   // oxlint-disable-next-line jsx-a11y/media-has-caption
   return <video className="w-full" controls src={src} />;