fix(viewer): render rich parts same-origin with a nonce'd CSP

Rich parts (markdown/diff/terminal/mermaid) render in opaque-origin
sandboxed srcdoc iframes. On Chrome 149 a field-trial experiment defers
layout in opaque-origin srcdoc iframes specifically: every measurement
(scrollHeight/offsetHeight/getBoundingClientRect) reads 0 until layout
eventually lands — and for off-screen frames it may never land — so the
in-frame bridge reports 0 and the part renders blank/collapsed. The
fixed-timer reporting (and #85's single re-parse) can't reliably catch
the late layout; it's a timing race that differs on every refresh.

Fix: remove the actual trigger by rendering rich parts same-origin
(sandbox="allow-scripts allow-same-origin") — same-origin srcdoc frames
lay out synchronously — and preserve the #65 isolation with a per-document
nonce CSP: script-src 'nonce-<n>' instead of 'unsafe-inline', with the
nonce only on the trusted bridge script. An injected <script> (sanitizer
regression) lacks the nonce and is blocked by CSP, so the same-origin
access can't be abused. Drops the now-unnecessary re-parse workaround.
HTML parts (/s/:id) are intentionally unchanged.

Verified on Chrome/149.0.0.0: rich parts render identically on every
reload (deterministic); no CSP violations.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: kiluazen

AGENTS.md

@@ -51,11 +51,11 @@ consciously, not as a side effect):
   wraps an html part (CDN-allowlist CSP + the postMessage bridge: resize,
   sendPrompt, openLink) and injects any opted-in kits (`kits.ts`).
   `renderSandboxedPart` wraps markup the viewer rendered
-  to a string (markdown/mermaid/diff/terminal) under a tighter CSP (no
-  `connect-src`, no CDN) — see `viewer/src/SandboxedPart.tsx`. Image and trace
-  parts stay native because they have no HTML sink (the viewer renders them with
-  text nodes / `<img>` / JSX). No agent markup is ever set as `innerHTML` in the
-  trusted viewer origin.
+  to a string (markdown/mermaid/diff/terminal) under a tighter CSP (nonce-only
+  bridge script, no `connect-src`, no CDN) — see
+  `viewer/src/SandboxedPart.tsx`. Image and trace parts stay native because
+  they have no HTML sink (the viewer renders them with text nodes / `<img>` /
+  JSX). No agent markup is ever set as `innerHTML` in the trusted viewer origin.
 - `server/themes.ts` — theme registry (github/gruvbox/one), runtime-agnostic so
   both server and viewer import it. One `Palette` per light/dark per theme; the
   viewer-chrome vars and the html-part `--color-*` tokens are both _derived_
@@ -96,10 +96,12 @@ consciously, not as a side effect):
   render with Solid text nodes / element attributes**, which escape by
   construction (image, trace). String-building in the viewer is fine — a string
   is not a DOM sink; danger only starts when it reaches the DOM, which must
-  happen at an opaque origin. When you add a part kind, pick (a) or (b); never a
-  third way. The iframes are sandboxed without `allow-same-origin` (opaque
-  origin) and `connect-src`-free for rich parts (no exfil even if contained
-  script runs); never weaken this.
+  happen inside a sandboxed iframe. When you add a part kind, pick (a) or (b);
+  never a third way. HTML-part iframes stay sandboxed without
+  `allow-same-origin` (opaque origin). Rich `srcdoc` iframes use
+  `allow-same-origin` to avoid Chrome's opaque-origin srcdoc layout bug, so
+  their CSP must stay nonce-only for scripts and `connect-src`-free; never
+  weaken this.
 - WebKit quirk in sandboxed iframes: ResizeObserver's initial callback may not
   fire and `documentElement.scrollHeight` ratchets to viewport height — the
   bridge reports `body.scrollHeight` on `load` plus staggered timers. Don't

e2e/diff.spec.ts

@@ -21,9 +21,12 @@ test("a diff part renders a highlighted diff inside a sandbox iframe", async ({
   await page.goto(server.url);
   const card = page.locator(".card:not(#whatsNew)").first();
 
-  // the diff renders in an opaque-origin sandbox iframe (no allow-same-origin),
-  // so a @pierre/diffs DOM-building regression can't reach the board
-  await expect(card.locator("iframe.diffframe")).toHaveAttribute("sandbox", "allow-scripts");
+  // the diff renders in a sandbox iframe. It is same-origin to avoid Chrome
+  // 149's opaque-origin srcdoc layout bug; CSP blocks all non-nonced scripts.
+  await expect(card.locator("iframe.diffframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
   const frame = card.frameLocator("iframe.diffframe");
 
   // the @pierre/diffs SSR fragment mounts in a declarative shadow root; its

e2e/markdown.spec.ts

@@ -28,10 +28,12 @@ test("a markdown part renders typed prose with a highlighted code block", async
   await page.goto(server.url);
   const card = page.locator(".card");
 
-  // markdown renders inside an opaque-origin sandbox iframe (defense in depth:
-  // even a markdown-it/shiki regression can't reach the board). The sandbox has
-  // NO allow-same-origin — that's the isolation guarantee.
-  await expect(card.locator("iframe.mdframe")).toHaveAttribute("sandbox", "allow-scripts");
+  // markdown renders inside a sandbox iframe. It is same-origin to avoid Chrome
+  // 149's opaque-origin srcdoc layout bug; CSP blocks all non-nonced scripts.
+  await expect(card.locator("iframe.mdframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
   const md = card.frameLocator("iframe.mdframe");
 
   // structured typography inside the frame

e2e/mermaid.spec.ts

@@ -18,9 +18,12 @@ test("a mermaid part renders a diagram as inline SVG in the viewer", async ({ pa
   const card = page.locator(".card:not(#sessionThread)");
   const mermaid = card.locator(".mermaidpart");
 
-  // the diagram renders inside an opaque-origin sandbox iframe — a second
-  // boundary behind mermaid's DOMPurify. No allow-same-origin.
-  await expect(mermaid.locator("iframe.mermaidframe")).toHaveAttribute("sandbox", "allow-scripts");
+  // the diagram renders inside a sandbox iframe. It is same-origin to avoid
+  // Chrome 149's opaque-origin srcdoc layout bug; CSP blocks non-nonced scripts.
+  await expect(mermaid.locator("iframe.mermaidframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
   const frame = mermaid.frameLocator("iframe.mermaidframe");
 
   const svg = frame.locator("svg");

e2e/terminal.spec.ts

@@ -17,9 +17,12 @@ test("a terminal part renders ANSI in a sandbox iframe, escaping raw HTML", asyn
   await page.goto(server.url);
   const card = page.locator(".card:not(#whatsNew)").first();
 
-  // terminal output renders inside an opaque-origin sandbox iframe — ansi_up's
-  // escaping is no longer the only thing between agent text and the board
-  await expect(card.locator("iframe.termframe")).toHaveAttribute("sandbox", "allow-scripts");
+  // terminal output renders inside a sandbox iframe. It is same-origin to avoid
+  // Chrome 149's opaque-origin srcdoc layout bug; CSP blocks non-nonced scripts.
+  await expect(card.locator("iframe.termframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
   const frame = card.frameLocator("iframe.termframe");
 
   // SGR escape became an inline-styled span (a color), not literal text

e2e/viewer.spec.ts

@@ -112,7 +112,7 @@ test("comment typed in the composer round-trips to the API", async ({ page, serv
   await input.press("Enter");
 
   // renders in the thread (via SSE) and is persisted server-side. The comment
-  // text renders inside its own opaque-origin sandbox iframe.
+  // text renders inside its own sandbox iframe.
   await expect(card.frameLocator(".cmtframe").locator("body")).toContainText("ship it");
   await expect(card.locator(".cmt .who")).toHaveText("you");
   await expect
@@ -226,8 +226,11 @@ test("a comment containing raw HTML is sandboxed and escaped, never a live node"
   await input.fill("<img src=x onerror=alert(1)> hi");
   await input.press("Enter");
 
-  // the comment renders inside an opaque-origin sandbox iframe...
-  await expect(card.locator(".cmtframe")).toHaveAttribute("sandbox", "allow-scripts");
+  // the comment renders inside a sandbox iframe with nonce-gated scripts.
+  await expect(card.locator(".cmtframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
   const frame = card.frameLocator(".cmtframe");
   // ...with the raw HTML escaped to text, never a live <img>
   await expect(frame.locator("img")).toHaveCount(0);

server/surfacePage.ts

@@ -131,7 +131,7 @@ const SVG_DEFS = `<svg width="0" height="0" style="position:absolute" aria-hidde
 
 // Bridge to the host viewer: sendPrompt/openLink mirror Claude's widget
 // globals, and a ResizeObserver reports content height so the parent can
-// size the sandboxed (opaque-origin) iframe.
+// size the sandboxed iframe.
 const BRIDGE_JS = `
 window.sendPrompt = function (text) {
   parent.postMessage({ __sideshow: true, type: 'send-prompt', text: String(text) }, '*');
@@ -177,34 +177,56 @@ if (window.ResizeObserver) {
 export const escapeHtml = (s: string) =>
   s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 
+function randomNonce(): string {
+  const bytes = new Uint8Array(16);
+  const webCrypto = (
+    globalThis as typeof globalThis & {
+      crypto: { getRandomValues(array: Uint8Array): Uint8Array };
+    }
+  ).crypto;
+  webCrypto.getRandomValues(bytes);
+  const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const a = bytes[i]!;
+    const b = bytes[i + 1];
+    const c = bytes[i + 2];
+    out += alphabet[a >> 2];
+    out += alphabet[((a & 3) << 4) | ((b ?? 0) >> 4)];
+    out += b === undefined ? "=" : alphabet[((b & 15) << 2) | ((c ?? 0) >> 6)];
+    out += c === undefined ? "=" : alphabet[c & 63];
+  }
+  return out;
+}
+
 // Wrap one html part in the themed, sandboxed document the iframe loads. The
 // board's color tokens (theme-dependent) are injected first so the static base
 // + kit resolve against them; `theme` defaults to the github preset.
 // CSP for a rich part (markdown/mermaid/diff). These render markup our own
 // libraries produced — they never load CDN scripts and never need the network,
-// so the policy is *tighter* than an html part's: only the inline bridge runs,
-// and there is no `connect-src`, so even if a sanitizer regression let agent
-// markup execute, the script is boxed into an opaque origin with no way to
-// phone home. `img-src origin` lets inline markdown images at <origin>/a/:id
-// load (the iframe is opaque-origin, so `'self'` matches nothing — same reason
-// buildCsp adds it explicitly).
-function buildRichCsp(origin: string): string {
+// so the policy is *tighter* than an html part's: only the nonce-bearing bridge
+// runs, and there is no `connect-src`. The frame uses allow-same-origin to avoid
+// Chrome 149's opaque-origin srcdoc layout bug, so injected scripts must not be
+// able to run at all. `img-src origin` lets inline markdown images at
+// <origin>/a/:id load without making the board origin a script/connect source.
+function buildRichCsp(origin: string, nonce: string): string {
   return [
     `default-src 'none'`,
-    `script-src 'unsafe-inline'`,
+    `script-src 'nonce-${nonce}'`,
     `style-src 'unsafe-inline'`,
     `img-src https: data: blob: ${origin}`,
     `font-src data:`,
   ].join("; ");
 }
 
 // Wrap pre-rendered, *untrusted* markup (markdown HTML, a mermaid SVG, a diff's
-// SSR output) in the same opaque-origin sandbox html parts get. The markup was
-// built as a STRING in the trusted viewer (string building is not a DOM sink),
-// and only becomes live DOM here, inside the iframe — so a markdown-it / shiki /
-// mermaid / DOMPurify / @pierre-diffs sanitizer bypass can no longer reach the
-// board. `css` is the part-specific stylesheet (prose/diff/mermaid rules);
-// chrome theme vars come from viewerThemeCss so the part matches the viewer.
+// SSR output) in a sandboxed iframe document. The markup was built as a STRING
+// in the trusted viewer (string building is not a DOM sink), and only becomes
+// live DOM here, inside a document whose CSP allows only the nonce-bearing
+// bridge script — so a markdown-it / shiki / mermaid / DOMPurify /
+// @pierre-diffs sanitizer bypass can no longer run script in the board origin.
+// `css` is the part-specific stylesheet (prose/diff/mermaid rules); chrome
+// theme vars come from viewerThemeCss so the part matches the viewer.
 export function renderSandboxedPart(doc: {
   body: string;
   css: string;
@@ -213,12 +235,13 @@ export function renderSandboxedPart(doc: {
 }): string {
   const theme =
     typeof doc.theme === "string" || doc.theme == null ? themeById(doc.theme) : doc.theme;
+  const nonce = randomNonce();
   return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<meta http-equiv="Content-Security-Policy" content="${buildRichCsp(doc.origin)}">
+<meta http-equiv="Content-Security-Policy" content="${buildRichCsp(doc.origin, nonce)}">
 <!-- srcdoc's base URL is about:srcdoc, so relative URLs (e.g. a markdown
      image at /a/:id) would not resolve; pin the base to the server origin.
      img-src in buildRichCsp allows that origin. (html parts don't need this —
@@ -228,7 +251,7 @@ export function renderSandboxedPart(doc: {
 </head>
 <body>
 ${doc.body}
-<script>${BRIDGE_JS}</script>
+<script nonce="${nonce}">${BRIDGE_JS}</script>
 </body>
 </html>`;
 }

test/surfacePage.test.ts

@@ -26,6 +26,12 @@ function cspDirectives(doc: string): Record<string, string[]> {
   return out;
 }
 
+function bridgeNonce(doc: string): string {
+  const m = /<script nonce="([^"]+)">/.exec(doc);
+  assert.ok(m, "bridge script must carry a nonce");
+  return m![1]!;
+}
+
 // The CDN allowlist html parts may load from. This is a deliberate, fixed set —
 // the test pins it so widening it (a new origin, a wildcard) is a conscious edit
 // that updates this list, never an accident.
@@ -130,28 +136,39 @@ test("renderSandboxedPart embeds the body and css inside the sandbox doc", () =>
   assert.ok(doc.includes(`<base href="${ORIGIN}/">`), "base href pins the origin");
   // the resize/openLink bridge ships in the frame so it can self-size
   assert.ok(doc.includes("postMessage"), "bridge is present");
+  assert.match(bridgeNonce(doc), /^[A-Za-z0-9+/]+={0,2}$/, "bridge nonce is base64");
   // chrome theme vars are injected (viewerThemeCss) so the part matches the viewer
   assert.ok(doc.includes("--bg:"), "theme vars are injected");
 });
 
 test("renderSandboxedPart uses a tighter CSP than html parts: no connect-src, no CDN", () => {
-  const d = cspDirectives(renderSandboxedPart({ body: "x", css: "", origin: ORIGIN }));
+  const doc = renderSandboxedPart({ body: "x", css: "", origin: ORIGIN });
+  const nonce = bridgeNonce(doc);
+  const d = cspDirectives(doc);
   assert.deepEqual(d["default-src"], ["'none'"], "locked-down default");
-  // script-src is EXACTLY the inline bridge — no CDN sources leak in
-  assert.deepEqual(d["script-src"], ["'unsafe-inline'"], "only the inline bridge runs");
+  // script-src is EXACTLY the nonce-bearing bridge — no injected inline script
+  // and no CDN sources can run in the same-origin rich srcdoc frame.
+  assert.deepEqual(d["script-src"], [`'nonce-${nonce}'`], "only the trusted bridge runs");
+  assert.ok(!d["script-src"]?.includes("'unsafe-inline'"), "rich scripts must require a nonce");
   // a contained script must have no way to phone home
   assert.ok(!("connect-src" in d), "no connect-src");
   // uploaded images still embed by absolute origin URL
   assert.ok(d["img-src"]?.includes(ORIGIN), "origin allowed for images");
 });
 
+test("renderSandboxedPart generates a fresh nonce per document", () => {
+  const a = renderSandboxedPart({ body: "x", css: "", origin: ORIGIN });
+  const b = renderSandboxedPart({ body: "x", css: "", origin: ORIGIN });
+  assert.notEqual(bridgeNonce(a), bridgeNonce(b), "nonce must be per-render");
+});
+
 test("html parts keep their CDN allowlist (rich-part tightening did not leak)", () => {
   const html = cspDirectives(renderHtmlPage({ title: "t", html: "<b>x</b>", origin: ORIGIN }));
-  const rich = cspDirectives(renderSandboxedPart({ body: "x", css: "", origin: ORIGIN }));
-  // rich parts lock script-src to the inline bridge alone; html parts add the
-  // CDN sources on top, so html's source list is strictly larger. (Asserting on
-  // the count rather than a host literal keeps this off the URL-substring path.)
-  assert.deepEqual(rich["script-src"], ["'unsafe-inline'"], "rich = inline bridge only");
+  const richDoc = renderSandboxedPart({ body: "x", css: "", origin: ORIGIN });
+  const rich = cspDirectives(richDoc);
+  // rich parts lock script-src to the nonce-bearing bridge alone; html parts add
+  // inline scripts and CDN sources for agent-authored html widgets.
+  assert.deepEqual(rich["script-src"], [`'nonce-${bridgeNonce(richDoc)}'`], "rich = bridge only");
   assert.ok(
     html["script-src"].length > rich["script-src"].length,
     "html parts keep extra (CDN) script sources",

viewer/src/App.tsx

@@ -319,8 +319,7 @@ async function onBridgeMessage(ev: MessageEvent) {
 // True when `source` is the contentWindow of an iframe the viewer embedded
 // (html or rich part). frameForSource only tracks html-part frames; this is the
 // broader gate for messages rich-part frames also send (open-link). Identity
-// comparison works across the opaque-origin boundary even though the frame's
-// document is unreadable.
+// comparison works for both opaque html-part frames and same-origin rich frames.
 function isOwnFrame(source: unknown): boolean {
   for (const f of root().querySelectorAll("iframe")) {
     if (f.contentWindow === source) return true;

viewer/src/Card.tsx

@@ -48,9 +48,10 @@ import {
 
 // Comment text is plain text — it already renders as an escaped text node — but
 // it is shown right beside agent-rendered surfaces, so for consistency it goes
-// through the same opaque-origin sandbox: the text is escaped to a string here
-// and only parsed inside the iframe. `pre-wrap` preserves the author's line
-// breaks; the height comes from the resize bridge (a one-liner clamps to ~24px).
+// through the same sandboxed rich-part path: the text is escaped to a string
+// here and only parsed inside the iframe. `pre-wrap` preserves the author's
+// line breaks; the height comes from the resize bridge (a one-liner clamps to
+// ~24px).
 const CMT_CSS = `
 body {
   margin: 0;