@1agh/maude 1.0.7 → 1.0.9

package/apps/studio/bin/_html-playwright.mjs

@@ -1,10 +1,11 @@
 // _html-playwright.mjs — playwright shim for the HTML exporter.
 //
-// Walks the rendered DOM, serializes the full document with stylesheets
-// inlined, and emits a standalone `index.html`. Web fonts + remote images
-// are NOT inlined in v1 — the doc references them by absolute URL so the
-// resulting file works under file:// when the user has those origins
-// available. Full asset inlining is a follow-up; see plan T5.
+// Walks the rendered DOM, serializes the artboard with every stylesheet
+// inlined and EVERY resource embedded as a data: URI (images, fonts, CSS
+// url()s, out-of-artboard SVG defs), and emits a self-contained `index.html`
+// that opens under file:// with nothing else around. v1 referenced assets by
+// absolute URL against a `<base>` — dead the moment the serving origin went
+// away, which on the render worker is the end of the job (DDR-232 follow-up).
 //
 // Invocation (Bun.spawn from exporters/html.ts — not invoked directly):
 //   npm exec --package=playwright -- node _html-playwright.mjs \
@@ -13,7 +14,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { launchChromium } from './_pw-launch.mjs';
+import { launchChromium, safeArtboardFilename } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -43,7 +44,10 @@ const timeoutMs = Number(timeout) * 1000;
 
 const browser = await launchChromium();
 try {
-  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    serviceWorkers: 'block',
+  });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   await page.evaluate(() => document.fonts.ready);
@@ -100,7 +104,10 @@ try {
       const restore = await pinArtboard(handle);
       const html = await serializeOne(handle, false);
       await restore();
-      const target = join(outDir, `${id}.html`);
+      // Tenant-authored id (untrusted, DDR-054) — sanitize before it becomes a
+      // path segment, same as the png shim (security review F1: arbitrary-path
+      // write of attacker bytes via a `../`-laden data-dc-screen).
+      const target = join(outDir, safeArtboardFilename(id, i, 'html'));
       writeFileSync(target, html, 'utf8');
       written.push(target);
       console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);
@@ -128,30 +135,202 @@ try {
 
 async function serializeOne(locator, widenToArtboard) {
   return await locator.evaluate(
-    (el, opts) => {
+    async (el, opts) => {
       const target = opts.widenToArtboard ? (el.closest('[data-dc-screen]') ?? el) : el;
+      // Work on a CLONE — the live canvas must not be mutated (the member may
+      // be looking at it on the browser lane's sibling host, and the worker
+      // captures several artboards from one page).
+      const clone = target.cloneNode(true);
+
+      // Editor chrome never ships (the artboard's own title bar is a child of
+      // the artboard — DDR-232 §2). capture-core exposes the one shared list.
+      const hidden = window.__maudeCaptureCore?.CAPTURE_HIDDEN_SELECTORS ?? [];
+      for (const sel of hidden) {
+        if (sel.startsWith('#')) continue;
+        for (const n of Array.from(clone.querySelectorAll(sel))) n.remove();
+      }
+
+      // ── resource inlining ────────────────────────────────────────────────
+      // Until now every src/url() stayed RELATIVE and the doc carried
+      // `<base href=<this origin>>`. On the desktop that origin is the dev
+      // server (alive only while Maude runs); on the render worker it is the
+      // job's THROWAWAY token-proxy loopback, dead the moment the job ends —
+      // so a cloud HTML export had no assets at all (DDR-232 follow-up). The
+      // file is now self-contained: same-origin fetch → data: URI.
+      const cache = new Map();
+      const toDataUrl = async (raw) => {
+        if (!raw || /^(data:|blob:|#)/.test(raw)) return null;
+        let abs;
+        try {
+          abs = new URL(raw, document.baseURI).href;
+        } catch {
+          return null;
+        }
+        if (cache.has(abs)) return cache.get(abs);
+        let out = null;
+        try {
+          const r = await fetch(abs);
+          if (r.ok) {
+            const blob = await r.blob();
+            out = await new Promise((resolve) => {
+              const fr = new FileReader();
+              fr.onload = () => resolve(String(fr.result));
+              fr.onerror = () => resolve(null);
+              fr.readAsDataURL(blob);
+            });
+          }
+        } catch {
+          out = null;
+        }
+        cache.set(abs, out);
+        return out;
+      };
+
+      // <img> — bake a CSS `filter` into the bitmap (a duotone/posterize via an
+      // in-page SVG filter), the same rule the SVG/PNG spine applies; an
+      // unfiltered image keeps its original bytes.
+      const liveImgs = Array.from(target.querySelectorAll('img'));
+      const cloneImgs = Array.from(clone.querySelectorAll('img'));
+      for (let i = 0; i < cloneImgs.length; i += 1) {
+        const c = cloneImgs[i];
+        const live = liveImgs[i];
+        let data = null;
+        const filter = live ? getComputedStyle(live).filter : 'none';
+        if (live && filter && filter !== 'none' && live.naturalWidth && live.naturalHeight) {
+          try {
+            const cv = document.createElement('canvas');
+            cv.width = live.naturalWidth;
+            cv.height = live.naturalHeight;
+            const g = cv.getContext('2d');
+            if (g) {
+              g.filter = filter;
+              if (g.filter === filter) {
+                g.drawImage(live, 0, 0);
+                data = cv.toDataURL('image/png');
+                c.style.filter = 'none';
+              }
+            }
+          } catch {
+            data = null;
+          }
+        }
+        if (!data) data = await toDataUrl(c.getAttribute('src'));
+        if (data) {
+          c.setAttribute('src', data);
+          c.removeAttribute('srcset');
+        }
+      }
+      for (const n of Array.from(clone.querySelectorAll('[poster]'))) {
+        const d = await toDataUrl(n.getAttribute('poster'));
+        if (d) n.setAttribute('poster', d);
+      }
+      for (const n of Array.from(clone.querySelectorAll('image'))) {
+        const href = n.getAttribute('href') ?? n.getAttribute('xlink:href');
+        const d = await toDataUrl(href);
+        if (d) {
+          n.setAttribute('href', d);
+          n.setAttribute('xlink:href', d);
+        }
+      }
+
+      // Neutralize executable markup before serializing. The artboard is
+      // TENANT-authored (untrusted, DDR-054) and this file is opened LOCALLY by
+      // a member (file:// origin) — so a `<script>`, an `onerror=`, a
+      // `javascript:` href or a `<foreignObject>` in the canvas would run as
+      // the member on open (security review F1). Strip them from anything we
+      // serialize; a `script-src 'none'` CSP meta (below) is the belt to this
+      // braces. The clone is a throwaway — the live canvas is untouched.
+      const neutralize = (rootEl) => {
+        for (const el of Array.from(rootEl.querySelectorAll('script,foreignObject'))) el.remove();
+        const walk = rootEl.querySelectorAll('*');
+        for (const el of [rootEl, ...Array.from(walk)]) {
+          for (const attr of Array.from(el.attributes ?? [])) {
+            const name = attr.name.toLowerCase();
+            if (name.startsWith('on')) {
+              el.removeAttribute(attr.name);
+              continue;
+            }
+            if (
+              (name === 'href' || name === 'xlink:href' || name === 'src') &&
+              /^\s*javascript:/i.test(attr.value)
+            ) {
+              el.removeAttribute(attr.name);
+            }
+          }
+        }
+      };
+      neutralize(clone);
+
+      // SVG defs the artboard references but does not CONTAIN — a design
+      // system typically mounts its <filter>/<linearGradient>/<pattern> once
+      // per canvas, outside any artboard. `outerHTML` of the artboard alone
+      // silently dropped them ("the image is still missing some filter").
+      const defsHtml = [];
+      for (const d of Array.from(
+        document.querySelectorAll(
+          'filter,linearGradient,radialGradient,pattern,clipPath,mask,symbol'
+        )
+      )) {
+        if (target.contains(d)) continue;
+        // A def can equally smuggle script (a <symbol>/<mask> wrapping a
+        // <foreignObject>) — clone + neutralize before taking its markup.
+        const dc = d.cloneNode(true);
+        neutralize(dc);
+        defsHtml.push(dc.outerHTML);
+      }
+      const defsBlock = defsHtml.length
+        ? `<svg width="0" height="0" style="position:absolute" aria-hidden="true"><defs>${defsHtml.join('')}</defs></svg>`
+        : '';
+
+      // Stylesheets — every rule, every url() inlined (fonts, background images).
       const cssChunks = [];
       for (const sheet of Array.from(document.styleSheets)) {
         try {
-          for (const rule of Array.from(sheet.cssRules)) {
-            cssChunks.push(rule.cssText);
-          }
+          for (const rule of Array.from(sheet.cssRules)) cssChunks.push(rule.cssText);
         } catch {
-          // Cross-origin sheet — skip.
+          /* cross-origin sheet — skip */
         }
       }
-      const styleBlock = `<style>${cssChunks.join('\n')}</style>`;
-      const innerHtml = target.outerHTML;
+      let css = cssChunks.join('\n');
+      const urls = new Set();
+      for (const m of css.matchAll(/url\(\s*(['"]?)([^)'"]+)\1\s*\)/g)) urls.add(m[2]);
+      for (const u of urls) {
+        const d = await toDataUrl(u);
+        if (d) css = css.split(u).join(d);
+      }
+      // BOUNDARY (security review F5): any `url(http(s)://…)` still here is a
+      // resource we could NOT inline (blocked/failed) — a tenant-authored
+      // beacon that would fire when a DIFFERENT user opens the file. Neutralize
+      // it to `url(about:blank)` rather than leave the phone-home in the CSS.
+      css = css.replace(/url\(\s*(['"]?)(https?:[^)'"]+)\1\s*\)/gi, 'url(about:blank)');
+      // Same for any element `src`/`href` the img/image loops left remote.
+      for (const el of Array.from(clone.querySelectorAll('[src],[href],[xlink\\:href]'))) {
+        for (const a of ['src', 'href', 'xlink:href']) {
+          const v = el.getAttribute(a);
+          if (v && /^\s*https?:/i.test(v)) el.removeAttribute(a);
+        }
+      }
+
+      const escapeHtml = (s) =>
+        String(s).replace(
+          /[&<>"']/g,
+          (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]
+        );
+
+      // `script-src 'none'` is the belt to `neutralize()`'s braces — even if a
+      // sink is missed, the opened artifact executes no script. `object-src`
+      // blocks plugin embeds; the design still renders (it is static markup +
+      // inlined CSS/images). `document.title` is tenant-influenced — escape it.
       return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
+<meta http-equiv="Content-Security-Policy" content="script-src 'none'; object-src 'none'; base-uri 'none'" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>${document.title || 'Maude export'}</title>
-<base href="${location.origin}/" />
-${styleBlock}
+<title>${escapeHtml(document.title || 'Maude export')}</title>
+<style>${css}</style>
 </head>
-<body>${innerHtml}</body>
+<body>${defsBlock}${clone.outerHTML}</body>
 </html>`;
     },
     { widenToArtboard }

package/apps/studio/bin/_pdf-playwright.mjs

@@ -64,6 +64,7 @@ const deviceScaleFactor = Math.max(1, Math.min(8, Number(scale) || 1));
 const browser = await launchChromium();
 try {
   const ctx = await browser.newContext({
+    serviceWorkers: 'block',
     viewport: { width: 1440, height: 900 },
     deviceScaleFactor,
   });

package/apps/studio/bin/_png-playwright.mjs

@@ -73,6 +73,7 @@ try {
   // 1440x900 matches the canvas viewport the design tool uses everywhere;
   // exporters resize per-target before each shot to fit the artboard exactly.
   const ctx = await browser.newContext({
+    serviceWorkers: 'block',
     viewport: { width: 1440, height: 900 },
     deviceScaleFactor,
   });
@@ -157,22 +158,38 @@ try {
       width: Math.max(1, Math.ceil(rect.width)),
       height: Math.max(1, Math.ceil(rect.height)),
     });
+    // Anchor the CAPTURED ELEMENT at (0,0), not just its artboard. For a
+    // selection capture the element sits at an offset INSIDE the pinned
+    // artboard (padding, layout), while the viewport was just sized to the
+    // ELEMENT — so a clip at the element's rect ran past the viewport edge
+    // and Playwright refused with "Clipped area is either empty or outside
+    // the resulting image". The canvas page doesn't scroll (the world plane
+    // owns overflow), so the old scrollIntoView was a no-op there; shifting
+    // the pinned artboard by the element's offset is deterministic.
     await widenedHandle.evaluate((el) => {
-      el.scrollIntoView({ block: 'start', inline: 'start' });
+      const r = el.getBoundingClientRect();
+      const ab = el.closest('[data-dc-screen]') ?? el;
+      if (r.left !== 0 || r.top !== 0) {
+        ab.style.left = `${parseFloat(ab.style.left || '0') - r.left}px`;
+        ab.style.top = `${parseFloat(ab.style.top || '0') - r.top}px`;
+      }
       window.scrollTo(0, 0);
     });
-    // After scroll, recompute rect — it's now anchored near (0,0).
     const finalRect = await widenedHandle.evaluate((el) => {
       const r = el.getBoundingClientRect();
       return { x: r.left, y: r.top, width: r.width, height: r.height };
     });
+    // Clamp to the viewport — a clip must never extend past it.
+    const vp = page.viewportSize();
+    const clipX = Math.min(Math.max(0, Math.floor(finalRect.x)), Math.max(0, vp.width - 1));
+    const clipY = Math.min(Math.max(0, Math.floor(finalRect.y)), Math.max(0, vp.height - 1));
     await page.screenshot({
       path: target,
       clip: {
-        x: Math.max(0, Math.floor(finalRect.x)),
-        y: Math.max(0, Math.floor(finalRect.y)),
-        width: Math.max(1, Math.ceil(finalRect.width)),
-        height: Math.max(1, Math.ceil(finalRect.height)),
+        x: clipX,
+        y: clipY,
+        width: Math.max(1, Math.min(Math.ceil(finalRect.width), vp.width - clipX)),
+        height: Math.max(1, Math.min(Math.ceil(finalRect.height), vp.height - clipY)),
       },
     });
     written.push(target);

package/apps/studio/bin/_pptx-playwright.mjs

@@ -36,7 +36,10 @@ mkdirSync(dirname(out), { recursive: true });
 
 const browser = await launchChromium();
 try {
-  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    serviceWorkers: 'block',
+  });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'networkidle', timeout: timeoutMs });
   await page.evaluate(() => document.fonts.ready);

package/apps/studio/bin/_pw-launch.mjs

@@ -165,3 +165,51 @@ export function assertRenderOutputSizeOk(widthCss, heightCss, deviceScaleFactor,
     process.exit(1);
   }
 }
+
+/**
+ * Inject a JS bundle into a page whose CSP refuses inline scripts.
+ *
+ * `page.addScriptTag({ content | path })` writes an INLINE `<script>`, which the
+ * canvas origin's shell CSP (`script-src 'self' 'sha256-…'`) refuses outright —
+ * and the render worker (DDR-230) always loads the canvas from that origin, so
+ * every shim that injected this way failed there (worker-lane SVG, then mp4 /
+ * webm / gif: "Executing inline script violates the following Content Security
+ * Policy directive"). See DDR-232 §3.
+ *
+ * This serves the bundle at a SAME-ORIGIN virtual URL through Playwright
+ * request interception and adds it as `<script src>`. CSP is enforced on the
+ * script's URL origin, which is `'self'`, so it passes — and because the tag is
+ * a real module script in the document, bare specifiers still resolve through
+ * the shell's importmap (the render lib NEEDS that: it externalizes `remotion`
+ * to share the page's instance, DDR-148). Measured, not assumed: a route-
+ * fulfilled module under the exact CSP shape resolves an importmap specifier;
+ * `addInitScript` cannot (it runs before the importmap exists).
+ *
+ * No CSP is relaxed. On the main origin (desktop), where the CSP is env-gated
+ * off, this is simply equivalent to the inline injection it replaces.
+ *
+ * @param {import('playwright').Page} page
+ * @param {{ content: string, type?: 'module' | undefined, name?: string, timeout?: number }} opts
+ */
+let injectedSeq = 0;
+export async function addScriptCspSafe(page, { content, type, name = 'lib', timeout }) {
+  const origin = new URL(page.url()).origin;
+  injectedSeq += 1;
+  const url = `${origin}/__maude-inject/${injectedSeq}-${name}.js`;
+  // `page.route` is per-URL; route each bundle exactly once and unroute after so
+  // a long-lived page (the frame-step loop) carries no stale handlers.
+  await page.route(url, (route) =>
+    route.fulfill({
+      status: 200,
+      contentType: 'text/javascript; charset=utf-8',
+      headers: { 'cache-control': 'no-store' },
+      body: content,
+    })
+  );
+  try {
+    await page.addScriptTag({ url, ...(type ? { type } : {}) });
+  } finally {
+    await page.unroute(url).catch(() => {});
+  }
+  void timeout;
+}

package/apps/studio/bin/_svg-playwright.mjs

@@ -18,7 +18,7 @@
 
 import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { launchChromium } from './_pw-launch.mjs';
+import { launchChromium, safeArtboardFilename } from './_pw-launch.mjs';
 
 const args = Object.fromEntries(
   process.argv.slice(2).reduce((acc, cur, i, all) => {
@@ -53,7 +53,10 @@ const timeoutMs = Number(timeout) * 1000;
 
 const browser = await launchChromium();
 try {
-  const ctx = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const ctx = await browser.newContext({
+    viewport: { width: 1440, height: 900 },
+    serviceWorkers: 'block',
+  });
   const page = await ctx.newPage();
   await page.goto(url, { waitUntil: 'load', timeout: timeoutMs });
   await page.evaluate(() => document.fonts.ready);
@@ -73,15 +76,41 @@ try {
       world.style.transform = 'none';
     }
   });
-  // Inject dom-to-svg (IIFE — attaches `window.domToSvg`) and the SHARED
-  // capture spine (module — attaches `window.__maudeCaptureCore`). The core is
-  // the SAME source the canvas runtime's export-capture bridge imports
-  // (exporters/capture-core.ts, DDR-231 single-spine): the serializer logic
-  // must never be re-inlined here — it forked once and the browser lane would
-  // silently drift from this shim.
-  await page.addScriptTag({ path: bundlePath });
-  await page.addScriptTag({ path: corePath, type: 'module' });
-  await page.waitForFunction(() => !!window.__maudeCaptureCore, { timeout: timeoutMs });
+  // Get dom-to-svg (`window.domToSvg`) and the SHARED capture spine
+  // (`window.__maudeCaptureCore`) into the page. The core is the SAME source
+  // the canvas runtime's export-capture bridge imports (exporters/
+  // capture-core.ts, DDR-231 single-spine): the serializer logic must never be
+  // re-inlined here — it forked once and the browser lane would silently drift
+  // from this shim.
+  //
+  // PREFER WHAT THE PAGE ALREADY HAS (DDR-231 Phase 2 T4). A real canvas
+  // bundles capture-core through canvas-lib, so `__maudeCaptureCore` is
+  // already set, and `dom-to-svg` resolves through the shell's importmap.
+  // `addScriptTag({path})` injects an INLINE script, which the canvas origin's
+  // strict shell CSP (`script-src 'self' 'sha256-…'`) refuses outright — so on
+  // the render-worker lane, where the canvas is ALWAYS loaded from the canvas
+  // origin, every SVG export died with "Executing inline script violates the
+  // following Content Security Policy directive". Reaching for the in-page
+  // copy first fixes that lane without relaxing anyone's CSP, and makes the
+  // worker run literally the same code the member's browser runs.
+  const reuse = await page.evaluate(async () => {
+    const w = window;
+    if (!w.domToSvg) {
+      try {
+        w.domToSvg = await import('dom-to-svg');
+      } catch {
+        /* no importmap on this page — the injection fallback below covers it */
+      }
+    }
+    return !!w.__maudeCaptureCore && !!w.domToSvg;
+  });
+  if (!reuse) {
+    await page.addScriptTag({ path: bundlePath });
+    await page.addScriptTag({ path: corePath, type: 'module' });
+  }
+  await page.waitForFunction(() => !!window.__maudeCaptureCore && !!window.domToSvg, {
+    timeout: timeoutMs,
+  });
 
   const written = [];
 
@@ -130,7 +159,11 @@ try {
       // Each multi handle is already a `[data-dc-screen]` artboard — no widen.
       const svg = await serializeOne(handle, false);
       await restore();
-      const target = join(outDir, `${id}.svg`);
+      // `id` is the tenant-authored `data-dc-screen` (untrusted, DDR-054) — a
+      // `../`-laden id in `join(outDir, `${id}.svg`)` is an arbitrary-path
+      // write of attacker bytes (security review F1). The png shim already
+      // routes through this; the svg/html siblings did not.
+      const target = join(outDir, safeArtboardFilename(id, i, 'svg'));
       writeFileSync(target, svg, 'utf8');
       written.push(target);
       console.log(`MAUDE_PROGRESS {"current":${i + 1},"total":${screens.length}}`);