fix(mobile): enforce CSP on sandboxed MCP app HTML (port #3803) (#3836)

Author: Gilbert09

apps/mobile/src/features/mcp/sandbox/mcpAppCsp.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyCspToHtml,
+  buildCspMetaTag,
+  buildCspString,
+  escapeAttr,
+  sanitizeDomain,
+} from "./mcpAppCsp";
+
+describe("sanitizeDomain", () => {
+  it.each([
+    ["example.com", "example.com"],
+    ["*.example.com", "*.example.com"],
+    ["example.com:8080", "example.com:8080"],
+    ["' unsafe-eval; script-src *;", "unsafe-evalscript-src*"],
+    ['" onload=alert(1)', "onloadalert1"],
+    ["example.com; frame-ancestors *", "example.comframe-ancestors*"],
+    ["example .com", "example.com"],
+  ])("sanitizes %j", (input, expected) => {
+    expect(sanitizeDomain(input)).toBe(expected);
+  });
+});
+
+describe("buildCspString", () => {
+  it.each([
+    ["default-src 'none'"],
+    ["script-src 'self' 'unsafe-inline'"],
+    ["style-src 'self' 'unsafe-inline'"],
+    ["img-src 'self' data:"],
+    ["media-src 'self' data:"],
+    ["connect-src 'none'"],
+    ["frame-src 'none'"],
+    ["form-action 'none'"],
+    ["base-uri 'none'"],
+    ["object-src 'none'"],
+  ])("default policy contains %s", (directive) => {
+    expect(buildCspString()).toContain(directive);
+  });
+
+  it.each([
+    ["connect-src 'none'"],
+    ["frame-src 'none'"],
+    ["form-action 'none'"],
+    ["base-uri 'none'"],
+    ["img-src 'self' data:"],
+  ])("uses the restrictive default %s for empty metadata", (directive) => {
+    expect(buildCspString({})).toContain(directive);
+  });
+
+  it("maps connectDomains to connect-src", () => {
+    expect(
+      buildCspString({
+        connectDomains: ["api.example.com", "*.cdn.example.com"],
+      }),
+    ).toContain("connect-src api.example.com *.cdn.example.com");
+  });
+
+  it("maps resourceDomains to img/media/font/script/style-src", () => {
+    const result = buildCspString({ resourceDomains: ["cdn.example.com"] });
+    expect(result).toContain("img-src 'self' data: cdn.example.com");
+    expect(result).toContain("media-src 'self' data: cdn.example.com");
+    expect(result).toContain("font-src cdn.example.com");
+    expect(result).toContain(
+      "script-src 'self' 'unsafe-inline' cdn.example.com",
+    );
+    expect(result).toContain(
+      "style-src 'self' 'unsafe-inline' cdn.example.com",
+    );
+  });
+
+  it("omits resourceDomains from script/style-src when not declared", () => {
+    const result = buildCspString({});
+    expect(result).toContain("script-src 'self' 'unsafe-inline'");
+    expect(result).not.toMatch(/script-src 'self' 'unsafe-inline' ;/);
+  });
+
+  it("maps frameDomains to frame-src", () => {
+    expect(buildCspString({ frameDomains: ["embed.example.com"] })).toContain(
+      "frame-src embed.example.com",
+    );
+  });
+
+  it("maps baseUriDomains to base-uri", () => {
+    expect(buildCspString({ baseUriDomains: ["example.com"] })).toContain(
+      "base-uri example.com",
+    );
+  });
+
+  it("always includes form-action 'none'", () => {
+    expect(buildCspString({ connectDomains: ["api.example.com"] })).toContain(
+      "form-action 'none'",
+    );
+  });
+
+  it("sanitizes injection attempts in domains", () => {
+    const result = buildCspString({
+      connectDomains: ["example.com; script-src 'unsafe-eval'"],
+    });
+    expect(result).toContain("connect-src example.comscript-srcunsafe-eval");
+    expect(result).not.toMatch(/;\s*script-src\s+'unsafe-eval'/);
+  });
+});
+
+describe("escapeAttr", () => {
+  it.each([
+    ['hello "world"', "hello "world""],
+    ["hello 'world'", "hello 'world'"],
+    ["a & b", "a & b"],
+    ["<script>alert(1)</script>", "&lt;script&gt;alert(1)&lt;/script&gt;"],
+    ["default-src none", "default-src none"],
+  ])("escapes %j", (input, expected) => {
+    expect(escapeAttr(input)).toBe(expected);
+  });
+});
+
+describe("buildCspMetaTag", () => {
+  it("returns a valid meta tag with the default policy", () => {
+    const tag = buildCspMetaTag();
+    expect(tag).toMatch(
+      /^<meta http-equiv="Content-Security-Policy" content=".*">$/,
+    );
+    expect(tag).toContain("default-src");
+  });
+
+  it("escapes the CSP content in the attribute", () => {
+    const tag = buildCspMetaTag({ connectDomains: ["example.com"] });
+    expect(tag).toContain("connect-src example.com");
+    expect(tag).toMatch(/content="[^"]+"/);
+  });
+});
+
+describe("applyCspToHtml", () => {
+  it("prepends the CSP meta when there is no doctype", () => {
+    const out = applyCspToHtml("<html><body>hi</body></html>");
+    expect(out.startsWith(buildCspMetaTag())).toBe(true);
+  });
+
+  it("inserts the CSP meta after a leading doctype", () => {
+    const out = applyCspToHtml("<!doctype html><html><head></head></html>");
+    expect(out).toBe(
+      `<!doctype html>${buildCspMetaTag()}<html><head></head></html>`,
+    );
+  });
+
+  it("keeps leading whitespace and mixed-case doctype before the meta", () => {
+    const out = applyCspToHtml("  <!DOCTYPE html>\n<html></html>");
+    expect(out.startsWith("  <!DOCTYPE html>")).toBe(true);
+    expect(out.indexOf("<!DOCTYPE html>")).toBeLessThan(
+      out.indexOf(buildCspMetaTag()),
+    );
+  });
+});

apps/mobile/src/features/mcp/sandbox/mcpAppCsp.ts

@@ -0,0 +1,85 @@
+import type { McpUiResourceCsp } from "@modelcontextprotocol/ext-apps/app-bridge";
+
+const DEFAULT_CSP =
+  "default-src 'none'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; media-src 'self' data:; connect-src 'none'; object-src 'none'; frame-src 'none'; form-action 'none'; base-uri 'none'";
+
+export function sanitizeDomain(domain: string): string {
+  return domain.replace(/[^a-zA-Z0-9.*:-]/g, "");
+}
+
+export function buildCspString(csp?: McpUiResourceCsp): string {
+  if (!csp) return DEFAULT_CSP;
+
+  const resourceDomains = csp.resourceDomains?.length
+    ? csp.resourceDomains.map(sanitizeDomain).join(" ")
+    : "";
+  const resourceSuffix = resourceDomains ? ` ${resourceDomains}` : "";
+
+  const directives: string[] = [
+    "default-src 'none'",
+    `script-src 'self' 'unsafe-inline'${resourceSuffix}`,
+    `style-src 'self' 'unsafe-inline'${resourceSuffix}`,
+    "object-src 'none'",
+    "form-action 'none'",
+  ];
+
+  if (csp.connectDomains?.length) {
+    directives.push(
+      `connect-src ${csp.connectDomains.map(sanitizeDomain).join(" ")}`,
+    );
+  } else {
+    directives.push("connect-src 'none'");
+  }
+
+  if (resourceDomains) {
+    directives.push(`img-src 'self' data: ${resourceDomains}`);
+    directives.push(`media-src 'self' data: ${resourceDomains}`);
+    directives.push(`font-src ${resourceDomains}`);
+  } else {
+    directives.push("img-src 'self' data:");
+    directives.push("media-src 'self' data:");
+  }
+
+  if (csp.frameDomains?.length) {
+    directives.push(
+      `frame-src ${csp.frameDomains.map(sanitizeDomain).join(" ")}`,
+    );
+  } else {
+    directives.push("frame-src 'none'");
+  }
+
+  if (csp.baseUriDomains?.length) {
+    directives.push(
+      `base-uri ${csp.baseUriDomains.map(sanitizeDomain).join(" ")}`,
+    );
+  } else {
+    directives.push("base-uri 'none'");
+  }
+
+  return directives.join("; ");
+}
+
+export function escapeAttr(str: string): string {
+  return str
+    .replace(/&/g, "&")
+    .replace(/"/g, """)
+    .replace(/'/g, "'")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
+}
+
+export function buildCspMetaTag(csp?: McpUiResourceCsp): string {
+  return `<meta http-equiv="Content-Security-Policy" content="${escapeAttr(buildCspString(csp))}">`;
+}
+
+export function applyCspToHtml(html: string, csp?: McpUiResourceCsp): string {
+  const meta = buildCspMetaTag(csp);
+  // The doctype must stay first, or the frame drops into quirks mode.
+  const doctype = html.match(/^\s*<!doctype[^>]*>/i);
+  if (doctype) {
+    return (
+      html.slice(0, doctype[0].length) + meta + html.slice(doctype[0].length)
+    );
+  }
+  return meta + html;
+}

apps/mobile/src/features/mcp/sandbox/useMcpUiResource.ts

@@ -1,5 +1,6 @@
 import {
   getToolUiResourceUri,
+  type McpUiResourceCsp,
   RESOURCE_MIME_TYPE,
 } from "@modelcontextprotocol/ext-apps/app-bridge";
 import type { Tool } from "@modelcontextprotocol/sdk/types.js";
@@ -67,7 +68,7 @@ export function useMcpUiResource({
       const permissions =
         (ui.permissions as Record<string, Record<string, unknown>>) ??
         undefined;
-      const csp = (ui.csp as Record<string, unknown> | undefined) ?? undefined;
+      const csp = ui.csp as McpUiResourceCsp | undefined;
 
       return {
         resource: { uri, html: text, csp, permissions },

apps/mobile/src/features/mcp/sandbox/useMobileAppBridge.ts

@@ -3,6 +3,7 @@ import {
   type McpUiDisplayMode,
   type McpUiHostCapabilities,
   type McpUiHostContext,
+  type McpUiResourceCsp,
 } from "@modelcontextprotocol/ext-apps/app-bridge";
 import type {
   CallToolResult,
@@ -15,6 +16,7 @@ import type { EdgeInsets } from "react-native-safe-area-context";
 import type WebView from "react-native-webview";
 import { logger } from "@/lib/logger";
 import type { ThemeColors } from "@/lib/theme";
+import { applyCspToHtml } from "./mcpAppCsp";
 import { buildMcpHostStyles } from "./mcpAppTheme";
 import { WebViewTransport } from "./webViewTransport";
 
@@ -30,8 +32,7 @@ export type Phase =
 interface UiResource {
   uri: string;
   html: string;
-  /** Opaque `McpUiResourceCsp` shape — passed through to AppBridge unchanged. */
-  csp?: Record<string, unknown>;
+  csp?: McpUiResourceCsp;
   permissions?: Record<string, Record<string, unknown>>;
 }
 
@@ -256,7 +257,7 @@ export function useMobileAppBridge(
         bridgeRef.current = bridge;
 
         await bridge.sendSandboxResourceReady({
-          html: uiResource.html,
+          html: applyCspToHtml(uiResource.html, uiResource.csp),
           csp: uiResource.csp,
           permissions: uiResource.permissions,
         });

apps/mobile/src/features/mcp/types.ts

@@ -1,6 +1,8 @@
 // Shared types for MCP server installations and marketplace templates.
 // Mirrors the PostHog cloud REST schema (see `apps/code/src/renderer/api/generated.ts`).
 
+import type { McpUiResourceCsp } from "@modelcontextprotocol/ext-apps/app-bridge";
+
 export type McpAuthType = "api_key" | "oauth" | "none";
 
 export type McpApprovalState = "approved" | "needs_approval" | "do_not_use";
@@ -105,8 +107,7 @@ export interface UpdateMcpServerInstallationOptions {
 export interface McpUiResource {
   uri: string;
   html: string;
-  /** Opaque CSP descriptor handed straight to AppBridge (`McpUiResourceCsp`). */
-  csp?: Record<string, unknown>;
+  csp?: McpUiResourceCsp;
   permissions?: Record<string, Record<string, unknown>>;
 }