@assistant-ui/react 0.15.24 → 0.15.26

package/src/mcp-apps/McpAppRenderer.tsx

@@ -1,13 +1,7 @@
 "use client";
 
-import {
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ReactNode,
-} from "react";
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect";
 import type {
   McpAppMetadata,
   TextMessagePart,
@@ -204,7 +198,7 @@ function InlineRenderer({
   const opts = resolvePartOptions(rendererOptions, part);
   const app = getMcpAppFromToolPart(part);
   const cachedAppRef = useRef<McpAppMetadata | undefined>(undefined);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (app != null) cachedAppRef.current = app;
   }, [app]);
   const appForRender = app ?? cachedAppRef.current;

package/src/mcp-apps/app-frame.test.tsx

@@ -31,6 +31,44 @@ describe("McpAppFrame", () => {
     cleanup();
   });
 
+  it("enforces the resource CSP before rendering widget HTML", () => {
+    let sandboxProps: SandboxHostProps | undefined;
+    sandboxHostMock.mockImplementation((props: SandboxHostProps) => {
+      sandboxProps = props;
+      return null;
+    });
+
+    render(
+      <McpAppFrame
+        app={{ resourceUri: "ui://example/widget" }}
+        resource={{
+          uri: "ui://example/widget",
+          mimeType: MCP_APP_MIME_TYPE,
+          html: '<!doctype html><script src="https://cdn.example/app.js"></script>',
+          meta: {
+            csp: {
+              connectDomains: ["https://api.example"],
+              resourceDomains: ["https://cdn.example"],
+            },
+          },
+        }}
+      />,
+    );
+
+    expect(sandboxProps?.content.html).toContain(
+      'http-equiv="Content-Security-Policy"',
+    );
+    expect(sandboxProps?.content.html).toContain(
+      "connect-src 'self' https://api.example",
+    );
+    expect(sandboxProps?.content.html).toContain(
+      "script-src 'self' 'unsafe-inline' https://cdn.example",
+    );
+    expect(
+      sandboxProps?.content.html.indexOf("Content-Security-Policy"),
+    ).toBeLessThan(sandboxProps?.content.html.indexOf("<script") ?? 0);
+  });
+
   it("keeps bridge options scoped to committed renders", async () => {
     let committedCreateBridge: SandboxHostProps["createBridge"] | null = null;
     sandboxHostMock.mockImplementation((props: SandboxHostProps) => {

package/src/mcp-apps/app-frame.tsx

@@ -1,11 +1,7 @@
 "use client";
 
-import {
-  type MutableRefObject,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-} from "react";
+import { type MutableRefObject, useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../utils/useIsomorphicLayoutEffect";
 import { type McpAppBridge, createMcpAppBridge } from "./bridge";
 import {
   SandboxHost,
@@ -19,6 +15,7 @@ import type {
   McpAppHostContext,
 } from "./types";
 import { isRecord } from "@assistant-ui/core/internal";
+import { applyMcpAppCsp } from "./csp";
 
 const DEFAULT_PRODUCT = "assistant-ui-mcp-app";
 const INIT_TIMEOUT_MS = 5000;
@@ -190,7 +187,7 @@ export function McpAppFrame({
     input,
     output,
   });
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     liveRef.current = {
       handlers,
       hostInfo,
@@ -313,7 +310,7 @@ export function McpAppFrame({
 
   return (
     <SandboxHost
-      content={{ html: resource.html }}
+      content={{ html: applyMcpAppCsp(resource.html, resource.meta?.csp) }}
       contentKey={
         app.serverId ? `${app.serverId} ${resource.uri}` : resource.uri
       }

package/src/mcp-apps/csp.test.ts

@@ -0,0 +1,112 @@
+// @vitest-environment jsdom
+
+import { describe, expect, it } from "vitest";
+import { applyMcpAppCsp, buildMcpAppCsp } from "./csp";
+
+const getPolicyMeta = (html: string) =>
+  new DOMParser()
+    .parseFromString(applyMcpAppCsp(html), "text/html")
+    .head.querySelector('meta[http-equiv="Content-Security-Policy"]');
+
+const expectPolicyBeforeScript = (html: string) => {
+  const policyIndex = html.indexOf("Content-Security-Policy");
+  const scriptIndex = html.indexOf("<script");
+  expect(policyIndex).toBeGreaterThanOrEqual(0);
+  expect(scriptIndex).toBeGreaterThanOrEqual(0);
+  expect(policyIndex).toBeLessThan(scriptIndex);
+};
+
+describe("MCP App CSP", () => {
+  it("uses restrictive defaults when the resource omits CSP metadata", () => {
+    expect(buildMcpAppCsp()).toBe(
+      "default-src 'none'; " +
+        "script-src 'self' 'unsafe-inline'; " +
+        "style-src 'self' 'unsafe-inline'; " +
+        "connect-src 'none'; " +
+        "img-src 'self' data:; " +
+        "font-src 'self'; " +
+        "media-src 'self' data:; " +
+        "frame-src 'none'; " +
+        "base-uri 'self'; " +
+        "object-src 'none'; " +
+        "form-action 'none'",
+    );
+  });
+
+  it("allows only valid declared origins", () => {
+    const policy = buildMcpAppCsp({
+      connectDomains: [
+        "https://api.example",
+        "wss://events.example:8443",
+        "https://api.example; default-src *",
+      ],
+      resourceDomains: ["https://*.cdn.example", "wss://assets.example"],
+      frameDomains: ["https://video.example/path"],
+      baseUriDomains: ["https://base.example"],
+    });
+
+    expect(policy.split("; ")).toContain(
+      "connect-src 'self' https://api.example wss://events.example:8443",
+    );
+    expect(
+      buildMcpAppCsp({
+        resourceDomains: ["https://*.cdn.example", "wss://assets.example"],
+      }),
+    ).toContain("script-src 'self' 'unsafe-inline' https://*.cdn.example");
+    expect(
+      buildMcpAppCsp({ resourceDomains: ["wss://assets.example"] }),
+    ).toContain("script-src 'self' 'unsafe-inline';");
+    expect(
+      buildMcpAppCsp({ frameDomains: ["https://video.example/path"] }),
+    ).toContain("frame-src 'none'");
+    expect(
+      buildMcpAppCsp({ baseUriDomains: ["https://base.example"] }),
+    ).toContain("base-uri https://base.example");
+  });
+
+  it("falls back to the restrictive policy for malformed metadata", () => {
+    expect(
+      buildMcpAppCsp({
+        connectDomains: "https://api.example" as unknown as string[],
+      }),
+    ).toContain("connect-src 'none'");
+  });
+
+  it("places the policy after a doctype and before executable content", () => {
+    const html =
+      '\uFEFF<!-- license --><!doctype html><script src="https://cdn.example/app.js"></script>';
+    const secured = applyMcpAppCsp(html);
+
+    expect(secured.startsWith("<!-- license --><!doctype html><meta ")).toBe(
+      true,
+    );
+    expectPolicyBeforeScript(secured);
+  });
+
+  it.each([
+    "<!--><script>run()</script>-->",
+    "<!---><script>run()</script>",
+    "<!-- license --!><script>run()</script>",
+  ])("places the policy before scripts after HTML comment closers", (html) => {
+    expectPolicyBeforeScript(applyMcpAppCsp(html));
+  });
+
+  it.each([
+    '<?xml version="1.0"?><!doctype html><script>run()</script>',
+    "<!foo><!doctype html><script>run()</script>",
+  ])("preserves standards mode after leading bogus comments", (html) => {
+    const secured = applyMcpAppCsp(html);
+    const document = new DOMParser().parseFromString(secured, "text/html");
+
+    expect(secured.indexOf("<!doctype html><meta ")).toBeGreaterThan(0);
+    expect(document.compatMode).toBe("CSS1Compat");
+    expectPolicyBeforeScript(secured);
+  });
+
+  it.each([
+    "\u00a0<script>run()</script>",
+    "\uFEFF\uFEFF<script>run()</script>",
+  ])("keeps the policy in head before non-HTML whitespace", (html) => {
+    expect(getPolicyMeta(html)).not.toBeNull();
+  });
+});

package/src/mcp-apps/csp.ts

@@ -0,0 +1,124 @@
+import type { McpAppResourceCSP } from "./types";
+
+const isAllowedOrigin = (value: string, allowWebSocket: boolean): boolean => {
+  const scheme = allowWebSocket ? /^(?:https?|wss?):\/\//i : /^https?:\/\//i;
+  if (!scheme.test(value) || /[\s;'"`,]/.test(value)) {
+    return false;
+  }
+
+  try {
+    const url = new URL(value.replace("://*.", "://wildcard."));
+    return (
+      url.username === "" &&
+      url.password === "" &&
+      url.pathname === "/" &&
+      url.search === "" &&
+      url.hash === ""
+    );
+  } catch {
+    return false;
+  }
+};
+
+const getAllowedOrigins = (
+  values: unknown,
+  allowWebSocket = false,
+): string[] =>
+  Array.isArray(values)
+    ? [
+        ...new Set(
+          values.filter(
+            (value): value is string =>
+              typeof value === "string" &&
+              isAllowedOrigin(value, allowWebSocket),
+          ),
+        ),
+      ]
+    : [];
+
+const directive = (name: string, values: readonly string[]) =>
+  `${name} ${values.join(" ")}`;
+
+export const buildMcpAppCsp = (csp?: McpAppResourceCSP): string => {
+  const connectDomains = getAllowedOrigins(csp?.connectDomains, true);
+  const resourceDomains = getAllowedOrigins(csp?.resourceDomains);
+  const frameDomains = getAllowedOrigins(csp?.frameDomains);
+  const baseUriDomains = getAllowedOrigins(csp?.baseUriDomains);
+
+  return [
+    "default-src 'none'",
+    directive("script-src", ["'self'", "'unsafe-inline'", ...resourceDomains]),
+    directive("style-src", ["'self'", "'unsafe-inline'", ...resourceDomains]),
+    directive(
+      "connect-src",
+      connectDomains.length > 0 ? ["'self'", ...connectDomains] : ["'none'"],
+    ),
+    directive("img-src", ["'self'", "data:", ...resourceDomains]),
+    directive("font-src", ["'self'", ...resourceDomains]),
+    directive("media-src", ["'self'", "data:", ...resourceDomains]),
+    directive("frame-src", frameDomains.length > 0 ? frameDomains : ["'none'"]),
+    directive(
+      "base-uri",
+      baseUriDomains.length > 0 ? baseUriDomains : ["'self'"],
+    ),
+    "object-src 'none'",
+    "form-action 'none'",
+  ].join("; ");
+};
+
+const findDoctypeEnd = (html: string): number => {
+  let offset = 0;
+
+  while (offset < html.length) {
+    const whitespace = html.slice(offset).match(/^[\t\n\f\r ]+/)?.[0];
+    if (whitespace) {
+      offset += whitespace.length;
+      continue;
+    }
+    if (html.startsWith("<!--", offset)) {
+      if (html.startsWith("<!-->", offset)) {
+        offset += 5;
+        continue;
+      }
+      if (html.startsWith("<!--->", offset)) {
+        offset += 6;
+        continue;
+      }
+      const commentEnd = html.indexOf("-->", offset + 4);
+      const bangCommentEnd = html.indexOf("--!>", offset + 4);
+      if (commentEnd === -1 && bangCommentEnd === -1) return 0;
+      offset =
+        bangCommentEnd !== -1 &&
+        (commentEnd === -1 || bangCommentEnd < commentEnd)
+          ? bangCommentEnd + 4
+          : commentEnd + 3;
+      continue;
+    }
+    if (html.slice(offset, offset + 9).toLowerCase() === "<!doctype") {
+      break;
+    }
+    if (html.startsWith("<?", offset) || html.startsWith("<!", offset)) {
+      const bogusCommentEnd = html.indexOf(">", offset + 2);
+      if (bogusCommentEnd === -1) return 0;
+      offset = bogusCommentEnd + 1;
+      continue;
+    }
+    break;
+  }
+
+  if (html.slice(offset, offset + 9).toLowerCase() !== "<!doctype") {
+    return offset;
+  }
+  const end = html.indexOf(">", offset + 9);
+  return end === -1 ? 0 : end + 1;
+};
+
+export const applyMcpAppCsp = (
+  html: string,
+  csp?: McpAppResourceCSP,
+): string => {
+  const normalizedHtml = html.charCodeAt(0) === 0xfeff ? html.slice(1) : html;
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${buildMcpAppCsp(csp)}">`;
+  const insertionPoint = findDoctypeEnd(normalizedHtml);
+  return `${normalizedHtml.slice(0, insertionPoint)}${meta}${normalizedHtml.slice(insertionPoint)}`;
+};

package/src/mcp-apps/types.ts

@@ -14,6 +14,7 @@ export type McpAppResourceCSP = {
   connectDomains?: string[];
   resourceDomains?: string[];
   frameDomains?: string[];
+  baseUriDomains?: string[];
   [k: string]: unknown;
 };
 

package/src/model-context/frame/AssistantFrame.test.ts

@@ -237,6 +237,51 @@ describe("AssistantFrame Integration", () => {
     unsubscribe();
   });
 
+  it("rejects a tool call the frame drops while it is disposed", async () => {
+    vi.mocked(iframeWindow.postMessage).mockImplementation((data: any) => {
+      Promise.resolve().then(() => {
+        messageHandlers.get("iframe")?.({
+          data,
+          source: parentWindow,
+          origin: window.location.origin,
+        } as MessageEvent);
+      });
+    });
+    vi.mocked(window.removeEventListener).mockImplementation(
+      (event: string, handler: any) => {
+        if (event === "message" && messageHandlers.get("iframe") === handler) {
+          messageHandlers.delete("iframe");
+        }
+      },
+    );
+    const registry = new ModelContextRegistry();
+    const toolExecute = vi.fn().mockResolvedValue("result");
+    registry.addTool({
+      toolName: "search",
+      parameters: z.object({}),
+      execute: toolExecute,
+    });
+    AssistantFrameProvider.addModelContextProvider(registry);
+    const host = new AssistantFrameHost(iframeWindow);
+    await vi.waitFor(() => {
+      expect(host.getModelContext().tools?.search).toBeDefined();
+    });
+
+    const result = host.getModelContext().tools!.search!.execute!(
+      {},
+      {} as any,
+    );
+    AssistantFrameProvider.dispose();
+
+    await expect(result).rejects.toThrow(
+      "AssistantFrameProvider has been disposed",
+    );
+    expect(toolExecute).not.toHaveBeenCalled();
+    expect(host.getModelContext().tools).toBeUndefined();
+
+    host.dispose();
+  });
+
   it("should handle multiple providers", async () => {
     // Setup multiple providers
     const registry1 = new ModelContextRegistry();

package/src/model-context/frame/SPEC_AssistantFrame.md

@@ -78,6 +78,7 @@ All messages are wrapped with a channel identifier to avoid conflicts with other
 2. **Tool Execution**
    - `tool-call`: Parent requests tool execution in iframe (where tools are defined)
    - `tool-result`: Iframe returns execution result or error to parent
+   - `provider-disposed`: Iframe tells the parent it was disposed, so the parent rejects tool calls the iframe will not answer
 
 #### Serialization