From 9a7276ab2d9339f7203bdda6e74378589699f401 Mon Sep 17 00:00:00 2001
From: PJ Doland <pj@doland.org>
Date: Sun, 17 May 2026 23:14:44 -0400
Subject: [PATCH 1/2] fix(chat): inject strict CSP into HTMLFrame blob document

ChatResponseHTMLFrame renders LLM/MCP-supplied HTML in an iframe with
sandbox="allow-scripts" backed by a blob: URL. The blob URL has a null
origin so cookies and parent DOM are unreachable, but allow-scripts
without same-origin still permits fetch() to any URL the user's browser
can reach: 169.254.169.254 cloud metadata, cluster intranet hosts, the
Jupyter server's own API. A poisoned tool result could ship a script that
exfils metadata or pivots SSRF against the JupyterHub pod network.

Inject a Content-Security-Policy meta tag at the top of every HTMLFrame
blob via a new src/html-frame-csp.ts helper. The policy keeps inline
scripts and styles enabled (matplotlib, plotly offline mode, custom
dashboards typically inline everything they need), allows only data:
images and fonts, and zeroes out every network sink: connect-src,
frame-src, child-src, worker-src, manifest-src, media-src, object-src,
form-action, base-uri. The meta is always prepended rather than spliced
into <head>: an HTML-naive regex can be fooled by <head> inside a
comment or noscript, which would let the real <head> run unguarded.
Browsers fold a leading meta into the synthetic <head> ahead of any
author-supplied tag, so prepend is both simpler and safer.
---
 src/chat-sidebar.tsx            |  6 ++-
 src/html-frame-csp.ts           | 51 ++++++++++++++++++
 tests/ts/html-frame-csp.test.ts | 96 +++++++++++++++++++++++++++++++++
 3 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 src/html-frame-csp.ts
 create mode 100644 tests/ts/html-frame-csp.test.ts
diff --git a/src/chat-sidebar.tsx b/src/chat-sidebar.tsx
index dd4296ab..24626aee 100644
--- a/src/chat-sidebar.tsx
+++ b/src/chat-sidebar.tsx
@@ -74,6 +74,7 @@ import {
   isDarkTheme,
   writeTextToClipboard
 } from './utils';
+import { injectHtmlFrameCsp } from './html-frame-csp';
 import { CheckBoxItem } from './components/checkbox';
 import { mcpServerSettingsToEnabledState } from './components/mcp-util';
 import claudeSvgStr from '../style/icons/claude.svg';
@@ -499,7 +500,10 @@ const answeredForms = new Map<string, string>();
 
 function ChatResponseHTMLFrame(props: any) {
   const iframSrc = useMemo(
-    () => URL.createObjectURL(new Blob([props.source], { type: 'text/html' })),
+    () =>
+      URL.createObjectURL(
+        new Blob([injectHtmlFrameCsp(props.source)], { type: 'text/html' })
+      ),
     []
   );
   return (
diff --git a/src/html-frame-csp.ts b/src/html-frame-csp.ts
new file mode 100644
index 00000000..c4d820b5
--- /dev/null
+++ b/src/html-frame-csp.ts
@@ -0,0 +1,51 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+/**
+ * Content-Security-Policy injected into every HTMLFrame blob document.
+ *
+ * The iframe already runs with sandbox="allow-scripts" (no allow-same-origin),
+ * so cookies and parent DOM are unreachable. But scripts in a null-origin
+ * context can still fetch() to any URL the user's browser can reach:
+ * cluster intranet, 169.254.169.254 cloud metadata, the Jupyter server
+ * itself. Inline scripts/styles stay enabled because most LLM/tool HTML
+ * output (matplotlib, plotly, custom dashboards) is self-contained inline;
+ * external CDN loads and any network egress are blocked. img/font are
+ * allowed only as data: URIs so inline visualizations still render.
+ */
+export const HTML_FRAME_CSP = [
+  "default-src 'none'",
+  "script-src 'unsafe-inline'",
+  "style-src 'unsafe-inline'",
+  'img-src data:',
+  'font-src data:',
+  "connect-src 'none'",
+  "base-uri 'none'",
+  "form-action 'none'",
+  "frame-src 'none'",
+  "child-src 'none'",
+  "worker-src 'none'",
+  "manifest-src 'none'",
+  "media-src 'none'",
+  "object-src 'none'"
+].join('; ');
+
+const CSP_META_TAG = `<meta http-equiv="Content-Security-Policy" content="${HTML_FRAME_CSP}">`;
+
+/**
+ * Prepend the CSP `<meta>` tag to untrusted HTML so the resulting blob
+ * document boots under policy.
+ *
+ * Always prepend rather than trying to locate `<head>`: an HTML-naive
+ * regex can be fooled by `<head>` inside a comment, `<noscript>`,
+ * `<textarea>`, or a `<![CDATA[ ]]>` block, which would let the actual
+ * `<head>` parsed by the browser run unguarded. Prepending puts the
+ * meta before everything; the browser's tokenizer folds a leading meta
+ * into the synthetic `<head>` it builds, ahead of any author-supplied
+ * `<head>` opening tag.
+ */
+export function injectHtmlFrameCsp(source: string | null | undefined): string {
+  if (!source) {
+    return CSP_META_TAG;
+  }
+  return CSP_META_TAG + source;
+}
diff --git a/tests/ts/html-frame-csp.test.ts b/tests/ts/html-frame-csp.test.ts
new file mode 100644
index 00000000..1acdfc61
--- /dev/null
+++ b/tests/ts/html-frame-csp.test.ts
@@ -0,0 +1,96 @@
+// Copyright (c) Mehmet Bektas <mbektasgh@outlook.com>
+
+import { HTML_FRAME_CSP, injectHtmlFrameCsp } from '../../src/html-frame-csp';
+
+describe('HTML_FRAME_CSP', () => {
+  it('disables network egress by default', () => {
+    expect(HTML_FRAME_CSP).toContain("default-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("connect-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("frame-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("object-src 'none'");
+  });
+
+  it('allows inline scripts and styles so self-contained tool HTML renders', () => {
+    expect(HTML_FRAME_CSP).toContain("script-src 'unsafe-inline'");
+    expect(HTML_FRAME_CSP).toContain("style-src 'unsafe-inline'");
+  });
+
+  it('only permits data: images and fonts', () => {
+    expect(HTML_FRAME_CSP).toContain('img-src data:');
+    expect(HTML_FRAME_CSP).toContain('font-src data:');
+  });
+
+  it('blocks base-uri and form-action escape hatches', () => {
+    expect(HTML_FRAME_CSP).toContain("base-uri 'none'");
+    expect(HTML_FRAME_CSP).toContain("form-action 'none'");
+  });
+
+  it('explicitly blocks worker / child / manifest / media sinks', () => {
+    expect(HTML_FRAME_CSP).toContain("worker-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("child-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("manifest-src 'none'");
+    expect(HTML_FRAME_CSP).toContain("media-src 'none'");
+  });
+});
+
+describe('injectHtmlFrameCsp', () => {
+  const META_RE =
+    /^<meta http-equiv="Content-Security-Policy" content="[^"]+">/;
+
+  it('always prepends the CSP meta so it sees the document first', () => {
+    expect(injectHtmlFrameCsp('<p>hi</p>')).toMatch(META_RE);
+    expect(injectHtmlFrameCsp('<p>hi</p>')).toContain('<p>hi</p>');
+  });
+
+  it('prepends even when the source opens its own <head>', () => {
+    // Author-supplied <head> must not get the meta inserted "inside" it
+    // by a regex that could be fooled by <head> in a comment or
+    // <noscript>. Prepending puts the meta before any author-controlled
+    // bytes; the browser tokenizer wraps it in a synthetic <head> ahead
+    // of the author's opening <head>.
+    const src = '<html><head><title>x</title></head><body>y</body></html>';
+    expect(injectHtmlFrameCsp(src)).toMatch(META_RE);
+  });
+
+  it('prepends before a DOCTYPE-prefixed document', () => {
+    const src = '<!DOCTYPE html><html><head></head><body>y</body></html>';
+    const out = injectHtmlFrameCsp(src);
+    expect(out).toMatch(META_RE);
+    expect(out.indexOf('<meta')).toBeLessThan(out.indexOf('<!DOCTYPE'));
+  });
+
+  it('is unaffected by <head> hiding in a comment', () => {
+    // The pre-fix regex strategy could be confused by this construction.
+    // Pin the always-prepend behavior so a future refactor cannot
+    // re-introduce that gap.
+    const src = '<!--<head>--><head><script>x</script></head>';
+    const out = injectHtmlFrameCsp(src);
+    expect(out).toMatch(META_RE);
+    expect(out.indexOf('<meta')).toBeLessThan(out.indexOf('<!--'));
+  });
+
+  it('places the meta before any <script> in the document', () => {
+    const src = '<html><body><script>alert(1)</script></body></html>';
+    const out = injectHtmlFrameCsp(src);
+    const metaIdx = out.indexOf('<meta');
+    const scriptIdx = out.indexOf('<script');
+    expect(metaIdx).toBeGreaterThanOrEqual(0);
+    expect(scriptIdx).toBeGreaterThan(metaIdx);
+  });
+
+  it('does not deduplicate when called twice (idempotency caveat)', () => {
+    // Two metas are harmless: per CSP spec the strictest policy wins.
+    // Pin this so a future caller does not quietly accumulate metas in
+    // an unexpected configuration.
+    const first = injectHtmlFrameCsp('<p>x</p>');
+    const second = injectHtmlFrameCsp(first);
+    const count = (second.match(/Content-Security-Policy/g) || []).length;
+    expect(count).toBe(2);
+  });
+
+  it('returns the bare meta when source is empty or nullish', () => {
+    expect(injectHtmlFrameCsp('')).toMatch(META_RE);
+    expect(injectHtmlFrameCsp(null)).toMatch(META_RE);
+    expect(injectHtmlFrameCsp(undefined)).toMatch(META_RE);
+  });
+});

From 167bfd593897deae2a513573c3867fff129a8ac7 Mon Sep 17 00:00:00 2001
From: PJ Doland <pj@doland.org>
Date: Mon, 18 May 2026 07:14:24 -0400
Subject: [PATCH 2/2] review: keep leading DOCTYPE first so iframe stays in
 standards mode

Second-pass review surfaced a quirks-mode regression: the always-prepend
strategy put the CSP meta tag ahead of any leading `<!DOCTYPE html>`,
which causes the browser parser to drop into quirks mode. Quirks mode
breaks the CSS that matplotlib/plotly emit (and, in older WebKit, weakens
some CSP enforcement details).

Detect a leading doctype (with optional BOM and whitespace) and slot
the meta immediately AFTER it instead of before. Comment-disguised
doctypes (`<!-- <!DOCTYPE html> -->`) are not real doctypes and the
regex correctly skips them, matching the browser's own ignoring of
comment-wrapped doctypes.

Tests pin (a) doctype-prefixed input keeps the doctype at position
zero and slots the meta after, (b) BOM + leading whitespace before the
doctype still works, (c) comment-disguised doctype is not matched and
the meta goes at the start. Replaces the previous "meta before
DOCTYPE" test which was actively wrong.
---
 src/html-frame-csp.ts           | 34 ++++++++++++++++++++++++++-------
 tests/ts/html-frame-csp.test.ts | 32 ++++++++++++++++++++++++++++---
 2 files changed, 56 insertions(+), 10 deletions(-)

diff --git a/src/html-frame-csp.ts b/src/html-frame-csp.ts
index c4d820b5..42b23919 100644
--- a/src/html-frame-csp.ts
+++ b/src/html-frame-csp.ts
@@ -31,21 +31,41 @@ export const HTML_FRAME_CSP = [
 
 const CSP_META_TAG = `<meta http-equiv="Content-Security-Policy" content="${HTML_FRAME_CSP}">`;
 
+// `<!DOCTYPE html>` or any other doctype declaration MUST be the very
+// first thing in the document or the parser drops into quirks mode,
+// which breaks CSS that matplotlib/plotly emit (and disables a handful
+// of CSP enforcement details in older WebKit). Detect a leading doctype
+// (allowing for an optional BOM and leading whitespace) and slot the
+// meta right after it instead of before it.
+const DOCTYPE_RE = /^(?:\ufeff)?\s*<!DOCTYPE\b[^>]*>/i;
+
 /**
  * Prepend the CSP `<meta>` tag to untrusted HTML so the resulting blob
  * document boots under policy.
  *
- * Always prepend rather than trying to locate `<head>`: an HTML-naive
- * regex can be fooled by `<head>` inside a comment, `<noscript>`,
- * `<textarea>`, or a `<![CDATA[ ]]>` block, which would let the actual
- * `<head>` parsed by the browser run unguarded. Prepending puts the
- * meta before everything; the browser's tokenizer folds a leading meta
- * into the synthetic `<head>` it builds, ahead of any author-supplied
- * `<head>` opening tag.
+ * Almost-always prepend rather than trying to locate `<head>`: an
+ * HTML-naive regex can be fooled by `<head>` inside a comment,
+ * `<noscript>`, `<textarea>`, or a `<![CDATA[ ]]>` block, which would
+ * let the actual `<head>` parsed by the browser run unguarded.
+ * Prepending puts the meta before everything; the browser's tokenizer
+ * folds a leading meta into the synthetic `<head>` it builds, ahead of
+ * any author-supplied `<head>` opening tag.
+ *
+ * The one exception is a leading `<!DOCTYPE>` declaration: the doctype
+ * has to remain at position zero or the document parses in quirks mode,
+ * so we splice the meta in immediately AFTER the doctype rather than
+ * before it. A comment-disguised doctype (`<!-- <!DOCTYPE html> -->`)
+ * is not a real doctype and the regex skips it, which is fine because
+ * the browser also ignores comment-wrapped doctypes.
  */
 export function injectHtmlFrameCsp(source: string | null | undefined): string {
   if (!source) {
     return CSP_META_TAG;
   }
+  const match = DOCTYPE_RE.exec(source);
+  if (match) {
+    const idx = match.index + match[0].length;
+    return source.slice(0, idx) + CSP_META_TAG + source.slice(idx);
+  }
   return CSP_META_TAG + source;
 }
diff --git a/tests/ts/html-frame-csp.test.ts b/tests/ts/html-frame-csp.test.ts
index 1acdfc61..58f6760e 100644
--- a/tests/ts/html-frame-csp.test.ts
+++ b/tests/ts/html-frame-csp.test.ts
@@ -52,11 +52,37 @@ describe('injectHtmlFrameCsp', () => {
     expect(injectHtmlFrameCsp(src)).toMatch(META_RE);
   });
 
-  it('prepends before a DOCTYPE-prefixed document', () => {
+  it('keeps a leading DOCTYPE at position zero and slots the meta after it', () => {
+    // A doctype declaration must be the very first content in the
+    // document; putting the CSP meta ahead of it would put the iframe
+    // in quirks mode, which breaks the CSS that matplotlib / plotly
+    // emit. Splice the meta in immediately after the doctype.
     const src = '<!DOCTYPE html><html><head></head><body>y</body></html>';
     const out = injectHtmlFrameCsp(src);
-    expect(out).toMatch(META_RE);
-    expect(out.indexOf('<meta')).toBeLessThan(out.indexOf('<!DOCTYPE'));
+    expect(out.startsWith('<!DOCTYPE html>')).toBe(true);
+    expect(out.indexOf('<!DOCTYPE')).toBeLessThan(out.indexOf('<meta'));
+    expect(out.indexOf('<meta')).toBeLessThan(out.indexOf('<html'));
+  });
+
+  it('handles BOM + leading whitespace before the doctype', () => {
+    const src = '﻿  <!doctype HTML><html><body>y</body></html>';
+    const out = injectHtmlFrameCsp(src);
+    // The doctype is still at the start of the document (after the
+    // BOM/whitespace prefix); the meta is spliced in right after it.
+    const doctypeIdx = out.toLowerCase().indexOf('<!doctype');
+    const metaIdx = out.indexOf('<meta');
+    expect(doctypeIdx).toBeGreaterThanOrEqual(0);
+    expect(metaIdx).toBeGreaterThan(doctypeIdx);
+    expect(metaIdx).toBeLessThan(out.indexOf('<html'));
+  });
+
+  it('does not treat a comment-disguised doctype as a real doctype', () => {
+    // <!-- <!DOCTYPE html> --> is a comment, not a doctype. The browser
+    // ignores it for quirks-mode purposes, and our regex must too.
+    const src = '<!-- <!DOCTYPE html> --><html><body>y</body></html>';
+    const out = injectHtmlFrameCsp(src);
+    // No doctype detected, so the meta goes at position zero.
+    expect(out.startsWith('<meta')).toBe(true);
   });
 
   it('is unaffected by <head> hiding in a comment', () => {
