fix(mobile): don't auto-fetch remote images in artifact previews

Generated artifacts are untrusted content. A markdown artifact containing
`![img](http://127.0.0.1/...)` previously caused MarkdownImage to fetch the
URL via Image.getSize on mount, letting an attacker make the device issue
requests to arbitrary Internet or local-network services just by having the
user open the preview.

Add a `disableRemoteImages` option to MarkdownText/MarkdownImage and set it for
artifact previews. When enabled, remote (http/https) image URLs are not fetched
automatically; they render as a tap-to-open placeholder so the request only
happens on an explicit user action. Chat message rendering is unchanged.

Generated-By: PostHog Code
Task-Id: fbd4c004-e4af-482d-9eb1-d946a1990e44

Author: Gilbert09

apps/mobile/src/features/chat/components/MarkdownImage.test.tsx

@@ -0,0 +1,72 @@
+import { createElement } from "react";
+import { Image } from "react-native";
+import { act, create } from "react-test-renderer";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { openExternalUrl } from "@/lib/openExternalUrl";
+import { MarkdownImage } from "./MarkdownImage";
+
+vi.mock("@/lib/openExternalUrl", () => ({ openExternalUrl: vi.fn() }));
+
+vi.mock("@/lib/theme", () => ({
+  useThemeColors: () => ({ gray: { 9: "#777", 11: "#555" } }),
+}));
+
+vi.mock("phosphor-react-native", () => ({
+  ArrowSquareOut: (props: Record<string, unknown>) =>
+    createElement("ArrowSquareOut", props),
+  ImageBroken: (props: Record<string, unknown>) =>
+    createElement("ImageBroken", props),
+}));
+
+function render(props: {
+  url: string;
+  alt?: string;
+  disableRemoteImages?: boolean;
+}) {
+  let renderer: ReturnType<typeof create> | null = null;
+  act(() => {
+    renderer = create(createElement(MarkdownImage, props));
+  });
+  if (!renderer) throw new Error("Renderer not created");
+  return renderer as ReturnType<typeof create>;
+}
+
+describe("MarkdownImage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("fetches image size for remote images by default", () => {
+    const getSize = vi.spyOn(Image, "getSize").mockImplementation(() => {});
+    render({ url: "http://127.0.0.1/secret", alt: "x" });
+    expect(getSize).toHaveBeenCalledWith(
+      "http://127.0.0.1/secret",
+      expect.any(Function),
+      expect.any(Function),
+    );
+  });
+
+  it("does not fetch remote images when disableRemoteImages is set", () => {
+    const getSize = vi.spyOn(Image, "getSize").mockImplementation(() => {});
+    const tree = JSON.stringify(
+      render({
+        url: "http://127.0.0.1/secret",
+        alt: "sneaky",
+        disableRemoteImages: true,
+      }).toJSON(),
+    );
+    expect(getSize).not.toHaveBeenCalled();
+    // Renders a tap-to-open placeholder that shows the alt text.
+    expect(tree).toContain("sneaky");
+    expect(openExternalUrl).not.toHaveBeenCalled();
+  });
+
+  it("still fetches non-remote images even when disableRemoteImages is set", () => {
+    const getSize = vi.spyOn(Image, "getSize").mockImplementation(() => {});
+    render({
+      url: "data:image/png;base64,AAAA",
+      disableRemoteImages: true,
+    });
+    expect(getSize).toHaveBeenCalled();
+  });
+});

apps/mobile/src/features/chat/components/MarkdownImage.tsx

@@ -1,4 +1,4 @@
-import { ImageBroken } from "phosphor-react-native";
+import { ArrowSquareOut, ImageBroken } from "phosphor-react-native";
 import { useEffect, useState } from "react";
 import { ActivityIndicator, Image, Pressable, Text, View } from "react-native";
 import { openExternalUrl } from "@/lib/openExternalUrl";
@@ -7,6 +7,12 @@ import { useThemeColors } from "@/lib/theme";
 interface MarkdownImageProps {
   url: string;
   alt?: string;
+  // When true, remote (http/https) images are not fetched automatically.
+  // Untrusted content (e.g. a generated artifact) could otherwise make the
+  // device issue requests to arbitrary Internet or local-network URLs just by
+  // being previewed. Instead we render a placeholder that only opens the image
+  // externally on an explicit user tap.
+  disableRemoteImages?: boolean;
 }
 
 type LoadState =
@@ -16,11 +22,21 @@ type LoadState =
 
 const MAX_HEIGHT = 320;
 
-export function MarkdownImage({ url, alt }: MarkdownImageProps) {
+function isRemoteUrl(url: string): boolean {
+  return url.startsWith("http://") || url.startsWith("https://");
+}
+
+export function MarkdownImage({
+  url,
+  alt,
+  disableRemoteImages,
+}: MarkdownImageProps) {
   const themeColors = useThemeColors();
+  const deferred = Boolean(disableRemoteImages) && isRemoteUrl(url);
   const [state, setState] = useState<LoadState>({ status: "loading" });
 
   useEffect(() => {
+    if (deferred) return;
     let cancelled = false;
     setState({ status: "loading" });
     Image.getSize(
@@ -38,7 +54,23 @@ export function MarkdownImage({ url, alt }: MarkdownImageProps) {
     return () => {
       cancelled = true;
     };
-  }, [url]);
+  }, [url, deferred]);
+
+  if (deferred) {
+    return (
+      <Pressable
+        onPress={() => openExternalUrl(url)}
+        accessibilityRole="button"
+        accessibilityLabel={alt ? `Open image: ${alt}` : "Open image"}
+        className="flex-row items-center gap-2 rounded-md border border-gray-6 bg-gray-2 px-3 py-2 active:opacity-70"
+      >
+        <ArrowSquareOut size={16} color={themeColors.gray[9]} />
+        <Text className="flex-1 text-[12px] text-gray-11" numberOfLines={1}>
+          {alt || "Tap to open image"}
+        </Text>
+      </Pressable>
+    );
+  }
 
   if (state.status === "error") {
     return (

apps/mobile/src/features/chat/components/MarkdownText.tsx

@@ -18,6 +18,11 @@ const BARE_POSTHOG_REF_PATTERN =
 
 interface MarkdownTextProps {
   content: string;
+  // When true, remote images embedded in the markdown are not fetched
+  // automatically. Set this for untrusted content (e.g. generated artifact
+  // previews) so opening the preview can't make the device issue requests to
+  // arbitrary URLs; images render as a tap-to-open placeholder instead.
+  disableRemoteImages?: boolean;
 }
 
 function HighlightedCode({
@@ -419,7 +424,10 @@ function renderInline(
   return nodes.length > 0 ? nodes : [text];
 }
 
-export function MarkdownText({ content }: MarkdownTextProps) {
+export function MarkdownText({
+  content,
+  disableRemoteImages,
+}: MarkdownTextProps) {
   const blocks = parseBlocks(content);
   const cloudRegion = useAuthStore((state) => state.cloudRegion);
   const posthogUrlOptions = useMemo<ParsePostHogUrlOptions>(
@@ -612,7 +620,12 @@ export function MarkdownText({ content }: MarkdownTextProps) {
 
           case "image":
             return block.url ? (
-              <MarkdownImage key={key} url={block.url} alt={block.alt} />
+              <MarkdownImage
+                key={key}
+                url={block.url}
+                alt={block.alt}
+                disableRemoteImages={disableRemoteImages}
+              />
             ) : null;
 
           case "hr":

apps/mobile/src/features/tasks/components/ArtifactPreview.tsx

@@ -119,7 +119,7 @@ export function ArtifactPreview({
               className="flex-1"
               contentContainerStyle={{ padding: 16 }}
             >
-              <MarkdownText content={text ?? ""} />
+              <MarkdownText content={text ?? ""} disableRemoteImages />
             </ScrollView>
           ) : (
             <WebView