@1agh/maude 1.0.7 → 1.0.8

package/apps/studio/test/export-capture-hygiene.test.ts

@@ -0,0 +1,675 @@
+// export-capture-hygiene.test.ts — DDR-231 Phase 2 T2/T3.
+//
+// The Phase-1 fidelity gate (export-capture-fidelity.test.ts) compares the
+// browser lane against the playwright reference IN THE SAME ENGINE on a
+// fixture that has neither editor chrome nor a network-loaded asset. Both
+// defects the first live cloud export hit therefore passed it clean:
+//
+//   1. CHROME LEAK — the browser lane captures the LIVE canvas DOM, where the
+//      artboard's own `.dc-artboard-label` header (an editor affordance, a
+//      child of `[data-dc-screen]`) is visible. The desktop lane never sees it
+//      because its shell is loaded with `?hide-chrome=1`, which flips
+//      `_shell.html`'s `#canvas-hide-chrome` block to `media="all"`. Evidence:
+//      the exported `post-lokace.svg` carried
+//      `<g class="dc-artboard-label" aria-label="Artboard Lokace týdne …">`.
+//   2. ASSETS NOT EMBEDDED — every `<image>` kept a remote `http(s)` href and
+//      the artifact had zero `data:` URIs, so the SVG renders with broken
+//      images outside the serving origin, and the PNG rasterization (an
+//      SVG-as-image loads NO external resources) drops them entirely.
+//   3. NO LOAD WAIT — the capture serializes immediately, so an artboard whose
+//      images are still decoding captures without them.
+//
+// This file pins all three against a real Chromium with a real HTTP origin,
+// which is what makes #2 reproducible at all (a `file:`/`setContent` fixture
+// has no network asset to fail on).
+
+import { describe, expect, test } from 'bun:test';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { getBrowserBundle, getCaptureCoreBundle } from '../exporters/_browser-bundles.ts';
+
+/** A real (tiny, latin-subset, OFL) woff2 — the test is about the `@font-face`
+ * `src` becoming a `data:` URI, not about glyph coverage. */
+const WOFF2 = readFileSync(join(import.meta.dir, 'fixtures', 'tiny-subset.woff2'));
+
+/** 1×1 red PNG — small enough to inline in the fixture host verbatim. */
+const PNG_1PX = Buffer.from(
+  'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==',
+  'base64'
+);
+
+const SVG_ASSET = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#0a0"/></svg>`;
+
+/**
+ * A canvas-shaped fixture: the world plane, one artboard, the artboard's own
+ * `.dc-artboard-label` header (exactly where canvas-lib puts it — a child of
+ * the `[data-dc-screen]` article), a shell-level overlay, and two network
+ * assets (a raster `<img>` and an SVG `<img>`).
+ */
+function fixtureHtml(origin: string): string {
+  return `<!doctype html><html><head><meta charset="utf-8"></head>
+<body style="margin:0;background:#222">
+  <div class="dc-world">
+    <article class="dc-artboard" data-dc-screen="board-1"
+      style="position:absolute;left:0;top:0;width:360px;height:240px;background:#12203a;
+             font-family:Arial,Helvetica,sans-serif;color:#f5f2ea">
+      <header class="dc-artboard-label sku">Artboard Lokace týdne · IG Post · 1:1</header>
+      <div class="dc-artboard-body" style="padding:16px">
+        <div style="font-size:18px;font-weight:700">Summer Camp</div>
+        <img id="photo" src="${origin}/photo.png" width="120" height="80" alt="photo" />
+        <img id="logo" src="${origin}/logo.svg" width="40" height="40" alt="logo" />
+      </div>
+    </article>
+    <div class="dc-mm" style="position:absolute;left:10px;top:10px;width:60px;height:40px;background:#f0f">minimap</div>
+    <div class="dc-participants" style="position:absolute;right:4px;top:4px">MD</div>
+  </div>
+</body></html>`;
+}
+
+/** Serve the fixture + its assets from a real origin so `<img>` is a real fetch. */
+function startFixtureHost(): { origin: string; stop: () => void } {
+  const server = Bun.serve({
+    port: 0,
+    fetch(req) {
+      const { pathname } = new URL(req.url);
+      if (pathname === '/photo.png') {
+        return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
+      }
+      if (pathname === '/logo.svg') {
+        return new Response(SVG_ASSET, { headers: { 'content-type': 'image/svg+xml' } });
+      }
+      const origin = `http://127.0.0.1:${server.port}`;
+      return new Response(fixtureHtml(origin), { headers: { 'content-type': 'text/html' } });
+    },
+  });
+  return { origin: `http://127.0.0.1:${server.port}`, stop: () => server.stop(true) };
+}
+
+describe('browser-lane capture hygiene (chrome + assets)', () => {
+  test(
+    'a captured artboard carries no editor chrome and no remote resource refs',
+    async () => {
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      const host = startFixtureHost();
+      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+        launchChromium: () => Promise<{
+          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+          close: () => Promise<void>;
+        }>;
+      };
+      const browser = await launchChromium();
+      try {
+        const ctx = await browser.newContext({
+          viewport: { width: 800, height: 600 },
+          deviceScaleFactor: 1,
+        });
+        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+        const page: any = await ctx.newPage();
+        const consoleErrors: string[] = [];
+        page.on('console', (m: { type: () => string; text: () => string }) => {
+          if (m.type() === 'error') consoleErrors.push(m.text());
+        });
+        await page.goto(host.origin, { waitUntil: 'domcontentloaded' });
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>)['__maudeCaptureCore']
+        );
+
+        const { svg, chromeDrawables } = await page.evaluate(async () => {
+          // biome-ignore lint/suspicious/noExplicitAny: injected globals
+          const w = window as any;
+          const core = w.__maudeCaptureCore;
+          const target = document.querySelector('[data-dc-screen]') as Element;
+          const out: string = await core.svgForElement(target, w.domToSvg);
+          // dom-to-svg still emits an (empty) <g> for a display:none element,
+          // carrying its class — inert, and the playwright reference lane
+          // produces the same. What must be absent is anything that PAINTS, so
+          // assert on drawable descendants rather than on the class string.
+          const doc = new DOMParser().parseFromString(out, 'image/svg+xml');
+          const drawable = 'text,image,rect,path,circle,ellipse,line,polygon,polyline,use';
+          let painted = 0;
+          for (const sel of core.CAPTURE_HIDDEN_SELECTORS as string[]) {
+            // Class/attribute selectors survive serialization; ids are rewritten.
+            if (sel.startsWith('#')) continue;
+            for (const node of doc.querySelectorAll(sel)) {
+              painted += node.querySelectorAll(drawable).length;
+            }
+          }
+          return { svg: out, chromeDrawables: painted };
+        });
+
+        // (1) chrome — the artboard's own label header, and any overlay from
+        // `_shell.html`'s `#canvas-hide-chrome` list, must contribute nothing
+        // that renders. The label's text is the exact leak the live cloud
+        // export shipped.
+        expect(chromeDrawables).toBe(0);
+        // …and the nodes are gone outright, so the label text does not even
+        // survive as `aria-label` metadata in the delivered file.
+        expect(svg).not.toContain('dc-artboard-label');
+        expect(svg).not.toContain('Lokace týdne');
+        expect(svg).not.toContain('minimap');
+
+        // (2) assets — every resource ref must be embedded. A remote
+        // `http(s)://` href in the output is the live defect: an SVG-as-image
+        // loads no external resources, so the raster silently drops it.
+        const remoteRefs = svg.match(/(?:xlink:)?href="https?:\/\/[^"]+"/g) ?? [];
+        expect(remoteRefs).toEqual([]);
+        expect(svg).toContain('data:image/png');
+
+        // The capture must not have papered over a failure by logging it.
+        expect(consoleErrors.filter((t) => /inlin|resource/i.test(t))).toEqual([]);
+      } finally {
+        await browser.close();
+        host.stop();
+      }
+    },
+    { timeout: 60_000 }
+  );
+
+  test(
+    'the capture waits for images that have not decoded yet',
+    async () => {
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      // A host that stalls the photo response — the capture must still come
+      // back with the image embedded, not race past it.
+      const server = Bun.serve({
+        port: 0,
+        async fetch(req) {
+          const { pathname } = new URL(req.url);
+          if (pathname === '/photo.png') {
+            await Bun.sleep(600);
+            return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
+          }
+          if (pathname === '/logo.svg') {
+            return new Response(SVG_ASSET, { headers: { 'content-type': 'image/svg+xml' } });
+          }
+          return new Response(fixtureHtml(`http://127.0.0.1:${server.port}`), {
+            headers: { 'content-type': 'text/html' },
+          });
+        },
+      });
+      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+        launchChromium: () => Promise<{
+          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+          close: () => Promise<void>;
+        }>;
+      };
+      const browser = await launchChromium();
+      try {
+        const ctx = await browser.newContext({ viewport: { width: 800, height: 600 } });
+        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+        const page: any = await ctx.newPage();
+        // `domcontentloaded`, deliberately: the slow <img> is still in flight,
+        // which is exactly the live-canvas state the browser lane captures in.
+        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'domcontentloaded' });
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>)['__maudeCaptureCore']
+        );
+        const svg: string = await page.evaluate(async () => {
+          // biome-ignore lint/suspicious/noExplicitAny: injected globals
+          const w = window as any;
+          const target = document.querySelector('[data-dc-screen]') as Element;
+          return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
+        });
+        expect(svg).toContain('data:image/png');
+      } finally {
+        await browser.close();
+        server.stop(true);
+      }
+    },
+    { timeout: 60_000 }
+  );
+});
+
+describe('browser-lane capture hygiene (webfonts)', () => {
+  test(
+    '@font-face sources are embedded — from a <link> stylesheet AND an inline <style>',
+    async () => {
+      // Fonts are the classic silent fidelity killer (DDR-231 SHIPPER's top
+      // risk): an SVG whose @font-face still points at the serving origin
+      // renders in a fallback face everywhere but the live page, and nothing
+      // errors. Two declaration shapes, because dom-to-svg only copies the
+      // first on its own (it needs a stylesheet href to absolutize `src`) —
+      // the second is what capture-core's appendInlineFontFaces carries over.
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      const server = Bun.serve({
+        port: 0,
+        fetch(req) {
+          const { pathname } = new URL(req.url);
+          if (pathname === '/f.woff2')
+            return new Response(WOFF2, { headers: { 'content-type': 'font/woff2' } });
+          if (pathname === '/linked.css')
+            return new Response(
+              '@font-face{font-family:"LinkedFace";src:url(/f.woff2) format("woff2")}',
+              { headers: { 'content-type': 'text/css' } }
+            );
+          return new Response(
+            `<!doctype html><html><head><link rel="stylesheet" href="/linked.css">
+             <style>@font-face{font-family:"InlineFace";src:url("/f.woff2") format("woff2")}</style>
+             </head><body style="margin:0"><div class="dc-world">
+             <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:320px;height:120px;background:#123;color:#fff">
+               <p style="font-family:LinkedFace,serif">Linked</p>
+               <p style="font-family:InlineFace,serif">Inline</p>
+             </article></div></body></html>`,
+            { headers: { 'content-type': 'text/html' } }
+          );
+        },
+      });
+      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+        launchChromium: () => Promise<{
+          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+          close: () => Promise<void>;
+        }>;
+      };
+      const browser = await launchChromium();
+      try {
+        const ctx = await browser.newContext({});
+        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+        const page: any = await ctx.newPage();
+        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
+        );
+        const svg: string = await page.evaluate(async () => {
+          // biome-ignore lint/suspicious/noExplicitAny: injected globals
+          const w = window as any;
+          const target = document.querySelector('[data-dc-screen]') as Element;
+          return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
+        });
+        const faces = svg.match(/@font-face[^}]*}/g) ?? [];
+        const families = faces.map((f) => /font-family:\s*"?([^;"]+)"?/.exec(f)?.[1]?.trim());
+        expect(families.sort()).toEqual(['InlineFace', 'LinkedFace']);
+        for (const face of faces) expect(face).toContain('data:font/woff2;base64,');
+        // No font source may still point at the serving origin.
+        expect(svg.match(/url\(["']?https?:[^)]*\)/g) ?? []).toEqual([]);
+      } finally {
+        await browser.close();
+        server.stop(true);
+      }
+    },
+    { timeout: 60_000 }
+  );
+});
+
+describe('browser-lane capture hygiene (CSS filter on images)', () => {
+  test(
+    'an <img> with a CSS filter is embedded with the filter BAKED IN',
+    async () => {
+      // The alligators "Duo" treatment: `filter: url(#poster5) contrast(…)`
+      // against an SVG filter mounted elsewhere in the page. dom-to-svg puts no
+      // `filter` on its <image>, so the original bytes rendered flat — the cloud
+      // PNG/SVG/PPTX lost the photo treatment the desktop screenshot kept.
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      const server = Bun.serve({
+        port: 0,
+        fetch(req) {
+          const { pathname } = new URL(req.url);
+          if (pathname === '/photo.png')
+            return new Response(PNG_1PX, { headers: { 'content-type': 'image/png' } });
+          return new Response(
+            `<!doctype html><body style="margin:0">
+             <svg width="0" height="0" style="position:absolute"><filter id="poster5" color-interpolation-filters="sRGB"><feColorMatrix type="saturate" values="0"/></filter></svg>
+             <div class="dc-world"><article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
+               <img id="p" src="/photo.png" width="120" height="60" style="filter:url(#poster5) contrast(1.22);object-fit:cover">
+             </article></div></body>`,
+            { headers: { 'content-type': 'text/html' } }
+          );
+        },
+      });
+      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+        launchChromium: () => Promise<{
+          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+          close: () => Promise<void>;
+        }>;
+      };
+      const browser = await launchChromium();
+      try {
+        const ctx = await browser.newContext({});
+        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+        const page: any = await ctx.newPage();
+        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
+        );
+        const verdict = await page.evaluate(async () => {
+          // biome-ignore lint/suspicious/noExplicitAny: injected globals
+          const w = window as any;
+          const target = document.querySelector('[data-dc-screen]') as Element;
+          const svg: string = await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
+          const href = /<image[^>]*href="(data:[^"]+)"/.exec(svg)?.[1] ?? null;
+          const par = /<image[^>]*preserveAspectRatio="([^"]+)"/.exec(svg)?.[1] ?? null;
+          if (!href) return { href: null, pixel: null, par };
+          // Decode the embedded bitmap and read its first pixel: the source is
+          // pure red (#ff0000); saturate(0) turns it grey — equal channels.
+          const img = new Image();
+          await new Promise<void>((ok, ko) => {
+            img.onload = () => ok();
+            img.onerror = () => ko(new Error('decode'));
+            img.src = href;
+          });
+          const c = document.createElement('canvas');
+          c.width = 1;
+          c.height = 1;
+          const g = c.getContext('2d') as CanvasRenderingContext2D;
+          g.drawImage(img, 0, 0);
+          return {
+            href: href.slice(0, 22),
+            pixel: Array.from(g.getImageData(0, 0, 1, 1).data),
+            par,
+          };
+        });
+        expect(verdict.href).toBe('data:image/png;base64,');
+        // `object-fit: cover` → SVG `slice`, or the photo letterboxes (the
+        // green side bands on every exported hero).
+        expect(verdict.par).toBe('xMidYMid slice');
+        const [r, g, b] = verdict.pixel as number[];
+        // Grey = the filter was baked. Red would mean the original bytes shipped.
+        expect(Math.abs(r - g)).toBeLessThan(8);
+        expect(Math.abs(g - b)).toBeLessThan(8);
+      } finally {
+        await browser.close();
+        server.stop(true);
+      }
+    },
+    { timeout: 60_000 }
+  );
+});
+
+describe('browser-lane capture hygiene (paint dom-to-svg cannot express)', () => {
+  test(
+    'a repeating-linear-gradient clipped to a polygon survives as SVG paint',
+    async () => {
+      // The alligators "Sash": a diagonal yellow stripe band clipped to the
+      // top-right corner triangle. dom-to-svg matches `linear-gradient` only
+      // and drops `clip-path`, so the element vanished from every dom-to-svg
+      // lane while the screenshot lanes kept it. capture-core substitutes an
+      // equivalent inline <svg> (spreadMethod="repeat" + <clipPath>) for the
+      // duration of the serialization.
+      const [iife, core] = await Promise.all([
+        getBrowserBundle('dom-to-svg', 'domToSvg'),
+        getCaptureCoreBundle(),
+      ]);
+      const server = Bun.serve({
+        port: 0,
+        fetch() {
+          return new Response(
+            `<!doctype html><body style="margin:0"><div class="dc-world">
+             <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:240px;height:240px;background:#f1efe8">
+               <div aria-hidden="true" style="position:absolute;top:0;right:0;width:120px;height:120px;
+                 background:repeating-linear-gradient(-45deg,#ffcd00 0 14px,transparent 14px 28px);
+                 clip-path:polygon(100% 0,0 0,100% 100%)"></div>
+             </article></div></body>`,
+            { headers: { 'content-type': 'text/html' } }
+          );
+        },
+      });
+      const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+        launchChromium: () => Promise<{
+          newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+          close: () => Promise<void>;
+        }>;
+      };
+      const browser = await launchChromium();
+      try {
+        const ctx = await browser.newContext({});
+        // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+        const page: any = await ctx.newPage();
+        await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
+        await page.addScriptTag({ path: iife });
+        await page.addScriptTag({ path: core, type: 'module' });
+        await page.waitForFunction(
+          () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
+        );
+        const verdict = await page.evaluate(async () => {
+          // biome-ignore lint/suspicious/noExplicitAny: injected globals
+          const w = window as any;
+          const core = w.__maudeCaptureCore;
+          const target = document.querySelector('[data-dc-screen]') as Element;
+          const svg: string = await core.svgForElement(target, w.domToSvg);
+          // The live element must be back to its CSS paint afterwards.
+          const sash = target.querySelector('div[aria-hidden]') as HTMLElement;
+          const restored =
+            getComputedStyle(sash).backgroundImage.startsWith('repeating-linear-gradient(') &&
+            !sash.querySelector('svg');
+          const blob: Blob = await core.rasterizeSvg(svg, 1);
+          const img = new Image();
+          const url = URL.createObjectURL(blob);
+          await new Promise<void>((ok, ko) => {
+            img.onload = () => ok();
+            img.onerror = () => ko(new Error('decode'));
+            img.src = url;
+          });
+          const c = document.createElement('canvas');
+          c.width = 240;
+          c.height = 240;
+          const g = c.getContext('2d') as CanvasRenderingContext2D;
+          g.drawImage(img, 0, 0);
+          // Sample a diagonal run across the top-right triangle: with stripes
+          // present, SOME of those pixels are yellow; none are if the band
+          // vanished. And the bottom-left corner (outside the clip) stays bg.
+          let yellow = 0;
+          for (let i = 0; i < 40; i += 1) {
+            const [r, gg, b] = g.getImageData(235 - i, 5 + i, 1, 1).data;
+            if (r > 230 && gg > 180 && gg < 225 && b < 60) yellow += 1;
+          }
+          const [br, bg, bb] = g.getImageData(20, 220, 1, 1).data;
+          return {
+            hasRepeat: svg.includes('spreadMethod="repeat"'),
+            hasClip: svg.includes('<clipPath'),
+            yellow,
+            corner: [br, bg, bb],
+            restored,
+          };
+        });
+        expect(verdict.hasRepeat).toBe(true);
+        expect(verdict.hasClip).toBe(true);
+        expect(verdict.yellow).toBeGreaterThan(5);
+        expect(verdict.corner).toEqual([241, 239, 232]);
+        expect(verdict.restored).toBe(true);
+      } finally {
+        await browser.close();
+        server.stop(true);
+      }
+    },
+    { timeout: 60_000 }
+  );
+});
+
+describe('HTML export is inert (security review F1)', () => {
+  test(
+    'a canvas with <script>/onerror/javascript:/foreignObject exports as non-executable HTML',
+    async () => {
+      // The self-contained HTML file is opened LOCALLY by a member (file://
+      // origin). A tenant-authored canvas (untrusted, DDR-054) must not smuggle
+      // executable markup into it. Drive the real _html-playwright shim over a
+      // canvas-shaped page carrying every script sink, and assert the produced
+      // document is neutralized (no <script>, no on* handler, no javascript:,
+      // no <foreignObject>) AND carries a script-src 'none' CSP meta.
+      const server = Bun.serve({
+        port: 0,
+        fetch() {
+          return new Response(
+            `<!doctype html><html><head><title>x</title>
+             <script>window.__evil = 1</script></head>
+             <body style="margin:0"><div class="dc-world">
+               <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
+                 <img src="x" onerror="window.__evil=2">
+                 <a href="javascript:window.__evil=3">x</a>
+                 <svg><foreignObject><div onclick="window.__evil=4">x</div></foreignObject></svg>
+               </article>
+             </div></body></html>`,
+            { headers: { 'content-type': 'text/html' } }
+          );
+        },
+      });
+      const { spawn } = await import('bun');
+      const { mkdtempSync } = await import('node:fs');
+      const { tmpdir } = await import('node:os');
+      const { join } = await import('node:path');
+      const out = join(mkdtempSync(join(tmpdir(), 'maude-html-f1-')), 'out.html');
+      const shim = join(import.meta.dir, '..', 'bin', '_html-playwright.mjs');
+      const proc = spawn({
+        cmd: [
+          'node',
+          shim,
+          '--url',
+          `http://127.0.0.1:${server.port}`,
+          '--selector',
+          '[data-dc-screen="b1"]',
+          '--out',
+          out,
+          '--timeout',
+          '15',
+        ],
+        stdout: 'pipe',
+        stderr: 'pipe',
+      });
+      const code = await proc.exited;
+      server.stop(true);
+      expect(code).toBe(0);
+      const html = await Bun.file(out).text();
+      // Neutralized.
+      expect(html).not.toMatch(/<script[\s>]/i);
+      expect(html).not.toMatch(/\bon\w+\s*=/i);
+      expect(html).not.toMatch(/javascript:/i);
+      expect(html).not.toMatch(/<foreignobject/i);
+      // Belt: a CSP that forbids script even if a sink were missed.
+      expect(html).toMatch(/http-equiv="Content-Security-Policy"[^>]*script-src 'none'/i);
+    },
+    { timeout: 60_000 }
+  );
+});
+
+describe('security review — path traversal + remote-ref beacon', () => {
+  test(
+    'a `../`-laden data-dc-screen id cannot write outside the out-dir (F1, svg + html)',
+    async () => {
+      const { spawn } = await import('bun');
+      const { mkdtempSync, existsSync } = await import('node:fs');
+      const { tmpdir } = await import('node:os');
+      const { join } = await import('node:path');
+      // A canvas with two artboards whose ids are path-traversal payloads.
+      const server = Bun.serve({
+        port: 0,
+        fetch() {
+          return new Response(
+            `<!doctype html><body style="margin:0"><div class="dc-world">
+             <article data-dc-screen="../../ESCAPED-A" style="position:absolute;left:0;top:0;width:80px;height:60px;background:#123"></article>
+             <article data-dc-screen="../../ESCAPED-B" style="position:absolute;left:0;top:0;width:80px;height:60px;background:#345"></article>
+             </div></body>`,
+            { headers: { 'content-type': 'text/html' } }
+          );
+        },
+      });
+      const iife = await getBrowserBundle('dom-to-svg', 'domToSvg');
+      const core = await getCaptureCoreBundle();
+      try {
+        for (const [shim, ext, extraArgs] of [
+          ['_svg-playwright.mjs', 'svg', ['--bundle-path', iife, '--core-path', core]],
+          ['_html-playwright.mjs', 'html', []],
+        ] as const) {
+          const base = mkdtempSync(join(tmpdir(), 'maude-f1-'));
+          const outDir = join(base, 'out');
+          const proc = spawn({
+            cmd: [
+              'node',
+              join(import.meta.dir, '..', 'bin', shim),
+              '--url',
+              `http://127.0.0.1:${server.port}`,
+              '--selector',
+              '[data-dc-screen]',
+              '--multi',
+              '--out-dir',
+              outDir,
+              '--timeout',
+              '15',
+              ...extraArgs,
+            ],
+            stdout: 'pipe',
+            stderr: 'pipe',
+          });
+          expect(await proc.exited).toBe(0);
+          // The traversal target — `<base>/ESCAPED-A.<ext>` — must NOT exist.
+          expect(existsSync(join(base, `ESCAPED-A.${ext}`))).toBe(false);
+          expect(existsSync(join(base, `ESCAPED-B.${ext}`))).toBe(false);
+          // The sanitized files land INSIDE out-dir instead.
+          expect(existsSync(join(outDir, `artboard-1.${ext}`))).toBe(true);
+        }
+      } finally {
+        server.stop(true);
+      }
+    },
+    { timeout: 90_000 }
+  );
+
+  test('a remote background url the CSP blocks is dropped from the SVG, not left as a beacon (F5)', async () => {
+    const [iife, core] = await Promise.all([
+      getBrowserBundle('dom-to-svg', 'domToSvg'),
+      getCaptureCoreBundle(),
+    ]);
+    // The capture page pins connect-src 'self' (cspForCapture) — but here we
+    // assert the BOUNDARY: even without a CSP, a remote ref that fails to
+    // inline must be removed. Point at a black-hole host so the fetch fails.
+    const server = Bun.serve({
+      port: 0,
+      fetch() {
+        return new Response(
+          `<!doctype html><body style="margin:0"><div class="dc-world">
+           <article data-dc-screen="b1" style="position:absolute;left:0;top:0;width:200px;height:120px;background:#123">
+             <img src="http://127.0.0.1:1/beacon.png" width="40" height="40">
+           </article></div></body>`,
+          { headers: { 'content-type': 'text/html' } }
+        );
+      },
+    });
+    const { launchChromium } = (await import('../bin/_pw-launch.mjs')) as {
+      launchChromium: () => Promise<{
+        newContext: (o: unknown) => Promise<{ newPage: () => Promise<unknown> }>;
+        close: () => Promise<void>;
+      }>;
+    };
+    const browser = await launchChromium();
+    try {
+      const ctx = await browser.newContext({});
+      // biome-ignore lint/suspicious/noExplicitAny: playwright page surface
+      const page: any = await ctx.newPage();
+      await page.goto(`http://127.0.0.1:${server.port}`, { waitUntil: 'load' });
+      await page.addScriptTag({ path: iife });
+      await page.addScriptTag({ path: core, type: 'module' });
+      await page.waitForFunction(
+        () => !!(window as never as Record<string, unknown>).__maudeCaptureCore
+      );
+      const svg: string = await page.evaluate(async () => {
+        // biome-ignore lint/suspicious/noExplicitAny: injected globals
+        const w = window as any;
+        const target = document.querySelector('[data-dc-screen]') as Element;
+        return await w.__maudeCaptureCore.svgForElement(target, w.domToSvg);
+      });
+      expect(svg.match(/https?:\/\/127\.0\.0\.1:1/g) ?? []).toEqual([]);
+      expect(svg).not.toContain('beacon.png');
+    } finally {
+      await browser.close();
+      server.stop(true);
+    }
+  });
+});