From 71792870872d1907d7bfe4ce022edfc9f246dde1 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Sun, 12 Jul 2026 12:06:07 -0700
Subject: [PATCH] fix(builder): sanitize HtmlBlock/Countdown/Gallery JS
 contexts

Entity-escaping alone doesn't protect JS-string or raw-HTML sinks:

- HtmlBlock.toHtml exported props.code raw; now runs it through the
  same purifyHtml (DOMPurify) config already used for the live editor
  preview, so <script>/on*= payloads can't survive export either.
- Countdown.toHtml interpolated targetDate directly into
  `new Date("${targetDate}")` inside an inline <script> -- a value
  like `2026-01-01");alert(1)//` broke out of the string literal. Now
  validated against a strict date/datetime shape and JSON.stringify'd
  before embedding, falling back to `new Date()` for anything invalid.
- Gallery.toHtml's lightbox used
  `onclick="${id}_open('${esc(img.src)}')"`, which a single quote in
  img.src could break out of. Replaced with a `data-lb-src` attribute
  per thumbnail and one delegated click listener on the grid
  (`e.target.closest('[data-lb-src]')`) instead of a per-item inline
  handler string.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/basic/HtmlBlock.toHtml.test.ts | 13 ++++++++
 craft/src/components/basic/HtmlBlock.tsx      |  5 +--
 .../sections/Countdown.toHtml.test.ts         | 28 ++++++++++++++++
 craft/src/components/sections/Countdown.tsx   | 10 +++++-
 .../sections/Gallery.toHtml.test.ts           | 33 +++++++++++++++++++
 craft/src/components/sections/Gallery.tsx     | 26 +++++++++++----
 6 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 craft/src/components/basic/HtmlBlock.toHtml.test.ts
 create mode 100644 craft/src/components/sections/Countdown.toHtml.test.ts
 create mode 100644 craft/src/components/sections/Gallery.toHtml.test.ts

diff --git a/craft/src/components/basic/HtmlBlock.toHtml.test.ts b/craft/src/components/basic/HtmlBlock.toHtml.test.ts
new file mode 100644
index 0000000..d209ad5
--- /dev/null
+++ b/craft/src/components/basic/HtmlBlock.toHtml.test.ts
@@ -0,0 +1,13 @@
+import { describe, test, expect } from 'vitest';
+import { HtmlBlock } from './HtmlBlock';
+
+const toHtml = (HtmlBlock as any).toHtml;
+
+describe('HtmlBlock.toHtml sanitizes raw code (A4.1)', () => {
+  test('strips <script> and on-handlers from exported output', () => {
+    const { html } = toHtml({ code: '<script>alert(1)</script><p onclick="x">hi</p>' }, '');
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('onclick');
+    expect(html).toContain('<p>hi</p>');
+  });
+});
diff --git a/craft/src/components/basic/HtmlBlock.tsx b/craft/src/components/basic/HtmlBlock.tsx
index b0fd034..a5b05df 100644
--- a/craft/src/components/basic/HtmlBlock.tsx
+++ b/craft/src/components/basic/HtmlBlock.tsx
@@ -140,6 +140,7 @@ HtmlBlock.craft = {
 /* ---------- HTML export ---------- */
 
 (HtmlBlock as any).toHtml = (props: HtmlBlockProps, _childrenHtml: string) => {
-  // Output the raw code as-is
-  return { html: props.code || '' };
+  // Run through the same DOMPurify config used for the live editor preview
+  // so exported pages can't carry <script>/on*= payloads either.
+  return { html: purifyHtml(props.code || '') };
 };
diff --git a/craft/src/components/sections/Countdown.toHtml.test.ts b/craft/src/components/sections/Countdown.toHtml.test.ts
new file mode 100644
index 0000000..701cde7
--- /dev/null
+++ b/craft/src/components/sections/Countdown.toHtml.test.ts
@@ -0,0 +1,28 @@
+import { describe, test, expect } from 'vitest';
+import { Countdown } from './Countdown';
+
+const toHtml = (Countdown as any).toHtml;
+
+describe('Countdown.toHtml validates targetDate before inline-script injection (A4.2)', () => {
+  test('malicious targetDate cannot break out of the new Date(...) call', () => {
+    const { html } = toHtml({ targetDate: '2026-01-01");alert(1)//' }, '');
+    expect(html).not.toContain('alert(');
+    expect(html).not.toContain('");');
+  });
+
+  test('valid date is JSON-encoded into the script', () => {
+    const { html } = toHtml({ targetDate: '2026-01-01' }, '');
+    expect(html).toContain('new Date("2026-01-01")');
+  });
+
+  test('valid date+time is preserved', () => {
+    const { html } = toHtml({ targetDate: '2026-01-01T12:30:00' }, '');
+    expect(html).toContain('new Date("2026-01-01T12:30:00")');
+  });
+
+  test('invalid/empty targetDate falls back safely (no injected literal)', () => {
+    const { html } = toHtml({ targetDate: 'not-a-date' }, '');
+    expect(html).not.toContain('not-a-date');
+    expect(html).toMatch(/new Date\(\)\.getTime\(\)|new Date\(Date\.now\(\)\)\.getTime\(\)/);
+  });
+});
diff --git a/craft/src/components/sections/Countdown.tsx b/craft/src/components/sections/Countdown.tsx
index c536759..8184730 100644
--- a/craft/src/components/sections/Countdown.tsx
+++ b/craft/src/components/sections/Countdown.tsx
@@ -284,6 +284,14 @@ Countdown.craft = {
   // Generate a unique ID for this countdown instance
   const uid = 'cd_' + Math.random().toString(36).slice(2, 8);
 
+  // Only accept a strict date/datetime shape before it's embedded in the
+  // inline <script>; anything else falls back to "now" instead of letting
+  // arbitrary text (e.g. `");alert(1)//`) break out of the new Date(...) call.
+  const VALID_DATE_RE = /^\d{4}-\d{2}-\d{2}([T ][0-9:.\-+Z]*)?$/;
+  const dateExpr = typeof targetDate === 'string' && VALID_DATE_RE.test(targetDate)
+    ? `new Date(${JSON.stringify(targetDate)})`
+    : 'new Date()';
+
   return {
     html: `<section${idAttr}${sectionStyle ? ` style="${sectionStyle}"` : ''}>
   ${headingHtml}
@@ -295,7 +303,7 @@ Countdown.craft = {
   </div>
   <script>
   (function(){
-    var target = new Date("${targetDate}").getTime();
+    var target = ${dateExpr}.getTime();
     function pad(n){ return String(n).padStart(2,'0'); }
     function update(){
       var diff = target - Date.now();
diff --git a/craft/src/components/sections/Gallery.toHtml.test.ts b/craft/src/components/sections/Gallery.toHtml.test.ts
new file mode 100644
index 0000000..301401b
--- /dev/null
+++ b/craft/src/components/sections/Gallery.toHtml.test.ts
@@ -0,0 +1,33 @@
+import { describe, test, expect } from 'vitest';
+import { Gallery } from './Gallery';
+
+const toHtml = (Gallery as any).toHtml;
+
+describe('Gallery.toHtml lightbox uses a delegated listener, not per-item onclick (A4.3)', () => {
+  test('no per-item inline onclick with interpolated src', () => {
+    const { html } = toHtml({ images: [{ src: '/a.jpg', alt: 'a' }], lightbox: true }, '');
+    expect(html).not.toMatch(/onclick="[^"]*_open\(/);
+    expect(html).toContain('data-lb-src="/a.jpg"');
+  });
+
+  test('a single-quote in src cannot break the handler (no per-item onclick at all)', () => {
+    const { html } = toHtml({ images: [{ src: "/a'.jpg", alt: 'a' }], lightbox: true }, '');
+    // no per-item onclick handler exists at all (delegated listener only)
+    expect(html).not.toMatch(/onclick="[^"]*_open\(/);
+    // the quote in src is entity-escaped in the data attribute, not raw
+    expect(html).toContain('data-lb-src="/a&#39;.jpg"');
+    expect(html).not.toContain(`data-lb-src="/a'.jpg"`);
+  });
+
+  test('emits exactly one delegated click listener', () => {
+    const { html } = toHtml({ images: [{ src: '/a.jpg' }, { src: '/b.jpg' }], lightbox: true }, '');
+    const matches = html.match(/addEventListener\(['"]click['"]/g) || [];
+    expect(matches.length).toBe(1);
+  });
+
+  test('lightbox=false: no data-lb-src, no script', () => {
+    const { html } = toHtml({ images: [{ src: '/a.jpg' }], lightbox: false }, '');
+    expect(html).not.toContain('data-lb-src');
+    expect(html).not.toContain('<script>');
+  });
+});
diff --git a/craft/src/components/sections/Gallery.tsx b/craft/src/components/sections/Gallery.tsx
index 6aae47a..c9669c2 100644
--- a/craft/src/components/sections/Gallery.tsx
+++ b/craft/src/components/sections/Gallery.tsx
@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { useNode, UserComponent } from '@craftjs/core';
 import { cssPropsToString } from '../../utils/style-helpers';
-import { escapeHtml, escapeAttr } from '../../utils/escape';
+import { escapeHtml, escapeAttr, safeUrl } from '../../utils/escape';
 
 interface GalleryImage {
   src: string;
@@ -293,28 +293,42 @@ Gallery.craft = {
     const caption = img.caption
       ? `<div style="position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,0.7));color:#ffffff;font-size:12px;border-bottom-left-radius:8px;border-bottom-right-radius:8px">${escapeHtml(img.caption)}</div>`
       : '';
-    const clickAttr = lightbox ? ` onclick="${galleryId}_open('${escapeAttr(img.src)}')" style="cursor:pointer;position:relative;overflow:hidden;border-radius:8px"` : ' style="position:relative;overflow:hidden;border-radius:8px"';
-    return `<div${clickAttr}>
-      <img src="${escapeAttr(img.src)}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
+    // Lightbox items carry the image URL as a data attribute rather than an
+    // inline onclick with an interpolated src -- a single delegated click
+    // listener below reads it, so a src containing a quote can't break out
+    // of a per-item event-handler string.
+    const lbAttr = lightbox ? ` data-lb-src="${escapeAttr(safeUrl(img.src || ''))}"` : '';
+    const itemStyle = lightbox ? 'cursor:pointer;position:relative;overflow:hidden;border-radius:8px' : 'position:relative;overflow:hidden;border-radius:8px';
+    return `<div${lbAttr} style="${itemStyle}">
+      <img src="${escapeAttr(safeUrl(img.src || ''))}" alt="${escapeAttr(img.alt)}" style="width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;background-color:#f1f5f9" />
       ${caption}
     </div>`;
   }).join('\n    ');
 
   let lightboxHtml = '';
+  let gridIdAttr = '';
   if (lightbox) {
+    gridIdAttr = ` id="${galleryId}_grid"`;
     lightboxHtml = `
   <div id="${galleryId}_overlay" onclick="${galleryId}_close()" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;justify-content:center;align-items:center;cursor:pointer">
     <img id="${galleryId}_img" src="" alt="" style="max-width:90%;max-height:90%;object-fit:contain;border-radius:8px" />
   </div>
   <script>
-function ${galleryId}_open(src){var o=document.getElementById('${galleryId}_overlay');document.getElementById('${galleryId}_img').src=src;o.style.display='flex';}
 function ${galleryId}_close(){document.getElementById('${galleryId}_overlay').style.display='none';}
+document.getElementById('${galleryId}_grid').addEventListener('click', function(e){
+  var t = e.target.closest('[data-lb-src]');
+  if(!t) return;
+  var src = t.getAttribute('data-lb-src');
+  var o = document.getElementById('${galleryId}_overlay');
+  document.getElementById('${galleryId}_img').src = src;
+  o.style.display = 'flex';
+});
   </script>`;
   }
 
   return {
     html: `<section${sectionStyle ? ` style="${sectionStyle}"` : ''}>
-  <div style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:${gap}">
+  <div${gridIdAttr} style="max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(${columns},1fr);gap:${gap}">
     ${items}
   </div>${lightboxHtml}
 </section>`,