@agent-native/dispatch 0.15.29 → 0.16.2

package/src/routes/pages/browser-connect.spec.tsx

@@ -0,0 +1,137 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import BrowserConnectRoute from "./browser-connect.js";
+
+const browserConnect = vi.hoisted(() => ({
+  mutateAsync: vi.fn(),
+  sendMessage: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: () => ({
+    mutateAsync: browserConnect.mutateAsync,
+    isPending: false,
+  }),
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) =>
+    ({
+      "dispatch.pages.browserConnectTitle": "Connect browser chat",
+      "dispatch.pages.browserConnectDescription": "Description",
+      "dispatch.pages.browserConnectInvalid": "Invalid request",
+      "dispatch.pages.browserConnectConnected": "Connected",
+      "dispatch.pages.browserConnectConnecting": "Connecting",
+      "dispatch.pages.browserConnectButton": "Connect",
+      "dispatch.pages.browserConnectOpenFromExtension": "Open from extension",
+      "dispatch.pages.browserConnectFailed": "Connection failed",
+    })[key] ?? key,
+}));
+
+const extensionId = "abcdefghijklmnopabcdefghijklmnop";
+const nonce = "browser-chat-nonce-1234567890";
+
+describe("BrowserConnectRoute", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    browserConnect.mutateAsync.mockReset();
+    browserConnect.sendMessage.mockReset();
+    browserConnect.sendMessage.mockImplementation(
+      (
+        _extensionId: string,
+        _message: Record<string, unknown>,
+        callback: (response: { ok: boolean }) => void,
+      ) => callback({ ok: true }),
+    );
+    vi.stubGlobal("chrome", {
+      runtime: {
+        sendMessage: browserConnect.sendMessage,
+      },
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("requires an explicit click before sending a one-time session to the exact extension", async () => {
+    browserConnect.mutateAsync.mockResolvedValue({
+      startPath: "/_agent-native/embed/start?ticket=one-time-ticket",
+      expiresAt: 1_900_000_000_000,
+      parentOrigin: `chrome-extension://${extensionId}`,
+      remoteDevice: {
+        id: "remote-device-example",
+        token: "anr_example",
+      },
+      relayBaseUrl: "https://dispatch.example.com",
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            `/browser-connect?extensionId=${extensionId}&nonce=${nonce}`,
+          ]}
+        >
+          <BrowserConnectRoute />
+        </MemoryRouter>,
+      );
+    });
+    expect(browserConnect.mutateAsync).not.toHaveBeenCalled();
+
+    await act(async () => {
+      container.querySelector("button")?.click();
+    });
+
+    expect(browserConnect.mutateAsync).toHaveBeenCalledWith({
+      extensionId,
+      nonce,
+    });
+    expect(browserConnect.sendMessage).toHaveBeenCalledWith(
+      extensionId,
+      {
+        type: "browser-chat.session.v1",
+        nonce,
+        startPath: "/_agent-native/embed/start?ticket=one-time-ticket",
+        dispatchOrigin: window.location.origin,
+        expiresAt: "2030-03-17T17:46:40.000Z",
+        remoteDevice: {
+          id: "remote-device-example",
+          token: "anr_example",
+        },
+        relayBaseUrl: "https://dispatch.example.com",
+      },
+      expect.any(Function),
+    );
+    expect(container.textContent).toContain("Connected");
+  });
+
+  it("fails closed on malformed connection parameters", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            "/browser-connect?extensionId=wildcard&nonce=too-short",
+          ]}
+        >
+          <BrowserConnectRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Invalid request");
+    expect(container.querySelector("button")).toBeNull();
+  });
+});

package/src/routes/pages/browser-connect.tsx

@@ -0,0 +1,143 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconBrowserCheck, IconPlugConnected } from "@tabler/icons-react";
+import { useState } from "react";
+import { useSearchParams } from "react-router";
+
+import { Button } from "../../components/ui/button.js";
+import {
+  browserChatExtensionIdSchema,
+  browserChatNonceSchema,
+} from "../../lib/browser-chat-protocol.js";
+
+interface BrowserChatSessionResult {
+  startPath: string;
+  expiresAt: number;
+  parentOrigin: string;
+  remoteDevice: {
+    id: string;
+    token: string;
+  };
+  relayBaseUrl: string;
+}
+
+interface ChromeRuntimeApi {
+  lastError?: { message?: string };
+  sendMessage(
+    extensionId: string,
+    message: Record<string, unknown>,
+    callback: (response?: { ok?: boolean; error?: string }) => void,
+  ): void;
+}
+
+function sendBrowserChatSession(
+  extensionId: string,
+  message: Record<string, unknown>,
+): Promise<void> {
+  const runtime = (
+    globalThis as typeof globalThis & {
+      chrome?: { runtime?: ChromeRuntimeApi };
+    }
+  ).chrome?.runtime;
+  if (!runtime) {
+    return Promise.reject(new Error("extension-unavailable"));
+  }
+
+  return new Promise((resolve, reject) => {
+    runtime.sendMessage(extensionId, message, (response) => {
+      const runtimeError = runtime.lastError?.message;
+      if (runtimeError) {
+        reject(new Error(runtimeError));
+      } else if (response?.ok !== true) {
+        reject(new Error("extension-rejected"));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+export function meta() {
+  return [{ title: "Dispatch" }];
+}
+
+export default function BrowserConnectRoute() {
+  const t = useT();
+  const [searchParams] = useSearchParams();
+  const extensionId = searchParams.get("extensionId") ?? "";
+  const parsedExtensionId = browserChatExtensionIdSchema.safeParse(extensionId);
+  const nonce = browserChatNonceSchema.safeParse(searchParams.get("nonce"));
+  const requestIsValid = parsedExtensionId.success && nonce.success;
+  const [connected, setConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const createSession = useActionMutation<
+    BrowserChatSessionResult,
+    { extensionId: string; nonce: string }
+  >("create-browser-chat-session", {});
+
+  const connect = async () => {
+    if (!requestIsValid) return;
+    setError(null);
+    try {
+      const session = await createSession.mutateAsync({
+        extensionId,
+        nonce: nonce.data,
+      });
+      await sendBrowserChatSession(extensionId, {
+        type: "browser-chat.session.v1",
+        nonce: nonce.data,
+        startPath: session.startPath,
+        dispatchOrigin: window.location.origin,
+        expiresAt: new Date(session.expiresAt).toISOString(),
+        remoteDevice: session.remoteDevice,
+        relayBaseUrl: session.relayBaseUrl,
+      });
+      setConnected(true);
+    } catch (cause) {
+      setError(
+        cause instanceof Error && cause.message === "extension-unavailable"
+          ? t("dispatch.pages.browserConnectOpenFromExtension")
+          : t("dispatch.pages.browserConnectFailed"),
+      );
+    }
+  };
+
+  return (
+    <main className="grid min-h-screen place-items-center bg-background p-6">
+      <div className="w-full max-w-sm rounded-2xl border bg-card p-6 text-center shadow-sm">
+        <IconBrowserCheck size={36} className="mx-auto text-muted-foreground" />
+        <h1 className="mt-4 text-lg font-semibold text-foreground">
+          {t("dispatch.pages.browserConnectTitle")}
+        </h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t("dispatch.pages.browserConnectDescription")}
+        </p>
+        {!requestIsValid ? (
+          <p className="mt-4 text-sm text-destructive">
+            {t("dispatch.pages.browserConnectInvalid")}
+          </p>
+        ) : connected ? (
+          <p className="mt-4 text-sm font-medium text-foreground">
+            {t("dispatch.pages.browserConnectConnected")}
+          </p>
+        ) : (
+          <Button
+            className="mt-5 w-full gap-2"
+            onClick={() => void connect()}
+            disabled={createSession.isPending}
+          >
+            <IconPlugConnected size={16} />
+            {createSession.isPending
+              ? t("dispatch.pages.browserConnectConnecting")
+              : t("dispatch.pages.browserConnectButton")}
+          </Button>
+        )}
+        {error ? (
+          <p className="mt-3 text-sm text-destructive" role="alert">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </main>
+  );
+}

package/src/server/lib/browser-extension-allowlist.spec.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  isBrowserExtensionIdAllowed,
+  resolveAllowedBrowserExtensionIds,
+} from "./browser-extension-allowlist.js";
+
+const extensionId = "abcdefghijklmnopabcdefghijklmnop";
+
+describe("browser extension allowlist", () => {
+  it("combines exact configured and environment ids", () => {
+    expect(
+      resolveAllowedBrowserExtensionIds(
+        [extensionId, extensionId],
+        "ponmlkjihgfedcbaponmlkjihgfedcba",
+      ),
+    ).toEqual(new Set([extensionId, "ponmlkjihgfedcbaponmlkjihgfedcba"]));
+  });
+
+  it("fails loudly for invalid entries instead of producing an empty list", () => {
+    expect(() =>
+      resolveAllowedBrowserExtensionIds([], "not-an-extension-id"),
+    ).toThrow("invalid Chrome extension id");
+    expect(() =>
+      resolveAllowedBrowserExtensionIds(
+        Array.from({ length: 65 }, (_, index) => {
+          const suffix = index
+            .toString(16)
+            .padStart(2, "0")
+            .replace(/[0-9a-f]/g, (digit) =>
+              "abcdefghijklmnop".charAt("0123456789abcdef".indexOf(digit)),
+            );
+          return `${"a".repeat(30)}${suffix}`;
+        }),
+      ),
+    ).toThrow("cannot exceed 64");
+  });
+
+  it("requires an exact production allowlist match", () => {
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [extensionId],
+        nodeEnv: "production",
+        requestOrigin: "https://dispatch.example.com",
+      }),
+    ).toBe(true);
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "production",
+        requestOrigin: "http://localhost:8092",
+      }),
+    ).toBe(false);
+  });
+
+  it("allows unpacked extension ids only from a loopback non-production app", () => {
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "development",
+        requestOrigin: "http://localhost:8092",
+      }),
+    ).toBe(true);
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "development",
+        requestOrigin: "https://dispatch.example.com",
+      }),
+    ).toBe(false);
+  });
+});

package/src/server/lib/browser-extension-allowlist.ts

@@ -0,0 +1,58 @@
+const CHROME_EXTENSION_ID = /^[a-p]{32}$/;
+const MAX_BROWSER_EXTENSION_IDS = 64;
+
+export function resolveAllowedBrowserExtensionIds(
+  configIds: readonly string[] = [],
+  envValue = process.env.AGENT_NATIVE_BROWSER_EXTENSION_IDS,
+): Set<string> {
+  const ids = [...configIds, ...(envValue?.split(",") ?? [])]
+    .map((value) => value.trim())
+    .filter(Boolean);
+  const invalid = ids.find((value) => !CHROME_EXTENSION_ID.test(value));
+  if (invalid) {
+    throw new Error(
+      "Browser extension allowlist contains an invalid Chrome extension id.",
+    );
+  }
+  const uniqueIds = new Set(ids);
+  if (uniqueIds.size > MAX_BROWSER_EXTENSION_IDS) {
+    throw new Error(
+      `Browser extension allowlist cannot exceed ${MAX_BROWSER_EXTENSION_IDS} ids.`,
+    );
+  }
+  return uniqueIds;
+}
+
+function isLoopbackOrigin(value: string | undefined): boolean {
+  if (!value) return false;
+  try {
+    const url = new URL(value);
+    return (
+      (url.protocol === "http:" || url.protocol === "https:") &&
+      (url.hostname === "localhost" ||
+        url.hostname === "127.0.0.1" ||
+        url.hostname === "[::1]")
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function isBrowserExtensionIdAllowed(options: {
+  extensionId: string;
+  configIds?: readonly string[];
+  envValue?: string;
+  nodeEnv?: string;
+  requestOrigin?: string;
+}): boolean {
+  if (!CHROME_EXTENSION_ID.test(options.extensionId)) return false;
+  const configured = resolveAllowedBrowserExtensionIds(
+    options.configIds,
+    options.envValue,
+  );
+  if (configured.has(options.extensionId)) return true;
+
+  return (
+    options.nodeEnv !== "production" && isLoopbackOrigin(options.requestOrigin)
+  );
+}