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

Chrome 149 field-trial variants can defer layout in opaque-origin srcdoc frames, leaving rich surfaces blank or clipped even after the existing reparse retry.

Render rich srcdoc frames same-origin to avoid the affected layout path and replace unsafe-inline with a fresh per-document CSP nonce. Only the trusted resize and interaction bridge receives the nonce; rendered part bodies remain non-executable. Move code-part copy behavior into that bridge so code surfaces remain functional under the stricter policy.

Add browser coverage proving injected scripts and handlers stay blocked while the bridge and code-copy path work.

Author: kiluazen

.changeset/chrome-srcdoc-retry.md

@@ -2,4 +2,4 @@
 "sideshow": patch
 ---
 
-Fix invisible markdown/mermaid/diff/terminal surfaces caused by a Chrome field trial that breaks layout measurement in opaque-origin srcdoc iframes. The viewer now retries the srcdoc parse after 2 seconds if the iframe is still stuck at minimum height.
+Fix rich surfaces that intermittently render blank or clipped under a Chrome field trial. Rich `srcdoc` frames now avoid the affected opaque-origin layout path, while a per-document CSP nonce limits script execution to the trusted resize and interaction bridge.

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/code) 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_
@@ -91,15 +91,17 @@ consciously, not as a side effect):
   user, and inject prompts back to the agent. The rule applies to every part
   kind, comments, and anything else agent-authored. The two safe ways to render
   it: (a) **build a STRING and hand it to a sandbox iframe** — `SandboxedPart`
-  for viewer-rendered parts (markdown/mermaid/diff/terminal, comments) and
+  for viewer-rendered parts (markdown/mermaid/diff/terminal/code, comments) and
   `renderHtmlPage` at `/s/:id` for html parts; or (b) **keep it as data and
   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/code.spec.ts

@@ -0,0 +1,31 @@
+import { expect, publishParts, test } from "./fixtures.ts";
+
+test("a code part keeps copy behavior under the nonce-only rich-frame CSP", async ({
+  page,
+  server,
+  context,
+  browserName,
+}) => {
+  const code = `const closingTag = "</script>";\nconsole.log(closingTag);`;
+  await publishParts(server.url, {
+    title: "code",
+    parts: [{ kind: "code", code, language: "ts", title: "example.ts", lineStart: 40 }],
+  });
+  if (browserName === "chromium") {
+    await context.grantPermissions(["clipboard-read", "clipboard-write"]);
+  }
+  await page.goto(server.url);
+
+  const card = page.locator(".card:not(#whatsNew)").first();
+  await expect(card.locator("iframe.codeframe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
+  const frame = card.frameLocator("iframe.codeframe");
+  await expect(frame.locator(".code-filename")).toContainText("example.ts:40-41");
+  await frame.locator(".copy-btn").click();
+  await expect(frame.locator(".copy-btn")).toHaveText("Copied!");
+  if (browserName === "chromium") {
+    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(code);
+  }
+});

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/isolation.spec.ts

@@ -1,4 +1,5 @@
 import { expect, publish, test } from "./fixtures.ts";
+import { renderSandboxedPart } from "../server/surfacePage.ts";
 
 // The sandbox attribute (asserted across the part specs) is the *shape* of the
 // isolation; this spec asserts the *behavior* the project's core invariant
@@ -34,3 +35,47 @@ test("an html part's script is CSP-blocked from fetching the board API", async (
   // and it must never have succeeded
   await expect(probe).not.toContainText("LEAKED");
 });
+
+test("a rich frame runs only its nonced bridge, not injected scripts or handlers", async ({
+  page,
+  server,
+}) => {
+  const srcdoc = renderSandboxedPart({
+    body: `<div id="probe">content</div>
+<script>parent.document.body.dataset.richEscape = 'script'</script>
+<img src="data:image/png;base64,!" onerror="parent.document.body.dataset.richEscape = 'handler'">`,
+    css: "",
+    origin: server.url,
+  });
+
+  await page.goto(server.url);
+  await page.evaluate((doc) => {
+    document.body.replaceChildren();
+    delete document.body.dataset.richEscape;
+    (window as Window & { richBridgeReady?: boolean }).richBridgeReady = false;
+    window.addEventListener("message", (event) => {
+      if (event.data?.__sideshow && event.data.type === "resize") {
+        (window as Window & { richBridgeReady?: boolean }).richBridgeReady = true;
+      }
+    });
+    const frame = document.createElement("iframe");
+    frame.id = "rich-probe";
+    frame.setAttribute("sandbox", "allow-scripts allow-same-origin");
+    frame.srcdoc = doc;
+    document.body.append(frame);
+  }, srcdoc);
+
+  await expect(page.frameLocator("#rich-probe").locator("#probe")).toHaveText("content");
+  await expect.poll(() => page.evaluate(() => document.body.dataset.richEscape)).toBeUndefined();
+  await expect
+    .poll(() =>
+      page.evaluate(
+        () => (window as Window & { richBridgeReady?: boolean }).richBridgeReady === true,
+      ),
+    )
+    .toBe(true);
+  await expect(page.locator("#rich-probe")).toHaveAttribute(
+    "sandbox",
+    "allow-scripts allow-same-origin",
+  );
+});

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,9 +131,8 @@ const SVG_DEFS = `<svg width="0" height="0" style="position:absolute" aria-hidde
 
 // Bridge to the host viewer: sendPrompt/openLink/copyToClipboard mirror
 // Claude's widget globals, and a ResizeObserver reports content height so the
-// parent can size the sandboxed (opaque-origin) iframe. copyToClipboard posts
-// to the parent (trusted origin) which has clipboard API access; the sandbox
-// itself is opaque-origin so navigator.clipboard is unavailable there.
+// parent can size the sandboxed iframe. copyToClipboard posts to the parent
+// because clipboard access belongs to the trusted viewer, not surface markup.
 const BRIDGE_JS = `
 window.sendPrompt = function (text) {
   parent.postMessage({ __sideshow: true, type: 'send-prompt', text: String(text) }, '*');
@@ -147,6 +146,18 @@ window.copyToClipboard = function (text) {
 document.addEventListener('click', function (e) {
   var a = e.target && e.target.closest ? e.target.closest('a[href]') : null;
   if (a && /^https?:/.test(a.href)) { e.preventDefault(); window.openLink(a.href); }
+  var copy = e.target && e.target.closest ? e.target.closest('[data-sideshow-copy]') : null;
+  if (copy) {
+    var wrap = copy.closest('.code-wrap');
+    var source = wrap && wrap.querySelector('.code-copy-source');
+    window.copyToClipboard(source ? source.textContent : '');
+    copy.textContent = 'Copied!';
+    copy.classList.add('copied');
+    setTimeout(function () {
+      copy.textContent = 'Copy';
+      copy.classList.remove('copied');
+    }, 1500);
+  }
 });
 // Cmd+Option+Up/Down switches sessions in the sidebar, but keydowns fire in
 // whichever document holds focus — once the user clicks into a snippet, this
@@ -182,34 +193,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
+// CSP for a rich part (markdown/mermaid/diff/terminal/code). 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;
@@ -218,12 +251,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 —
@@ -233,7 +267,7 @@ export function renderSandboxedPart(doc: {
 </head>
 <body>
 ${doc.body}
-<script>${BRIDGE_JS}</script>
+<script nonce="${nonce}">${BRIDGE_JS}</script>
 </body>
 </html>`;
 }