fix(builder): sanitize non-string style values + allowlist element tags (XSS)

Adversarial re-review found the C1 fix incomplete plus an adjacent
same-class XSS, both reachable via the AI update_props path and
deserialized saved state:

- cssPropsToString only ran sanitizeCssValue on typeof-string values, so a
  non-string style value (array/object) with a valid key skipped
  sanitization entirely and was template-coerced raw into style="...",
  e.g. { color: ['red', '"><img src=x onerror=alert(1)>'] }. Now every
  non-number value is coerced with String() and sanitized; numbers stay
  raw. sanitizeBreakoutChars also now escapes < and > (previously only ;
  and ") as defense-in-depth, since values can reach it from non-string
  sources.

- props.tag (Container) and props.level (Heading) were interpolated raw
  into the tag position of exported HTML (`<${tag}`, `<${level}`) with no
  runtime validation, letting a malicious value break out of the tag
  entirely. Both are now allowlisted/clamped against their known-safe sets
  (div/section/article/header/footer/main; h1-h6), falling back to
  div/h2. Applied in Container's live render + toHtml, Heading's live
  render + toHtml, and the typeName==='div' fallback branch in
  html-export.ts's renderNode (hit for unresolved/legacy node types).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

craft/src/utils/html-export.test.ts

@@ -58,3 +58,42 @@ describe('buildDataAttrs escapes animation/animationDelay (C2)', () => {
     expect(html).toContain('data-animation-delay="0.5s"');
   });
 });
+
+/**
+ * Adversarial re-review of C1: the `typeName === 'Container' || typeName ===
+ * 'div'` fallback in renderNode (hit when a node's `resolvedName` isn't in
+ * the component resolver, e.g. legacy/tampered saved state) interpolated
+ * `props.tag` raw into `<${tag}` with no validation -- the same breakout
+ * class as the fixed Container.toHtml bug, reachable via deserialized saved
+ * state.
+ */
+describe('renderNode div-fallback allowlists props.tag', () => {
+  const makeUnresolvedDivState = (tag: unknown) =>
+    JSON.stringify({
+      ROOT: {
+        type: { resolvedName: 'div' }, // not in componentResolver -> hits the fallback branch
+        isCanvas: true,
+        props: { tag, style: {} },
+        displayName: 'div',
+        custom: {},
+        hidden: false,
+        nodes: [],
+        linkedNodes: {},
+      },
+    });
+
+  test('a malicious tag value falls back to div -- no injected <img>', () => {
+    const state = makeUnresolvedDivState('div><img src=x onerror=alert(1)');
+    const { html } = exportBodyHtml(state);
+    expect(html).not.toContain('<img');
+    expect(html).not.toContain('onerror');
+    expect(html.startsWith('<div')).toBe(true);
+  });
+
+  test('a valid tag (section) still emits <section', () => {
+    const state = makeUnresolvedDivState('section');
+    const { html } = exportBodyHtml(state);
+    expect(html).toContain('<section');
+    expect(html).toContain('</section>');
+  });
+});

craft/src/utils/html-export.ts

@@ -1,6 +1,7 @@
 import { componentResolver } from '../components/resolver';
 import { cssPropsToString } from './style-helpers';
 import { escapeHtml, escapeAttr } from './escape';
+import { sanitizeContainerTag } from '../components/layout/Container';
 
 export interface ExportOptions {
   title?: string;
@@ -94,7 +95,11 @@ function renderNode(nodes: Record<string, any>, nodeId: string): { html: string
   // Fallback: wrap children in a div with inline styles
   if (typeName === 'Container' || typeName === 'div') {
     const styleStr = cssPropsToString(props.style);
-    const tag = props.tag || 'div';
+    // `props.tag` reaches this fallback the same way it reaches
+    // `Container.toHtml` -- via AI `update_props` or deserialized saved
+    // state, neither type-checked at runtime -- so it must be allowlisted
+    // before hitting the `<${tag}` template position below.
+    const tag = sanitizeContainerTag(props.tag);
     return {
       html: `<${tag}${dataAttrs}${styleStr ? ` style="${styleStr}"` : ''}>${allChildrenHtml}</${tag}>`,
     };

craft/src/utils/style-helpers.test.ts

@@ -55,6 +55,39 @@ describe('cssPropsToString sanitizes emitted values (A5)', () => {
   });
 });
 
+describe('cssPropsToString sanitizes emitted VALUES that are not strings (adversarial re-review of C1)', () => {
+  test('an array value containing an attribute-breakout payload is neutralized', () => {
+    const out = cssPropsToString({
+      color: ['red', '"><img src=x onerror=alert(1)>'],
+    } as any);
+    // No raw `"` (would close style="...") and no raw `<`/`>` (defense in
+    // depth) may survive -- they must come back as HTML entities, leaving
+    // the payload as inert text rather than a live tag.
+    expect(out).not.toMatch(/[<>"]/);
+    expect(out).toContain('&lt;img');
+    expect(out).toContain('&quot;');
+  });
+
+  test('an object value containing an attribute-breakout payload is neutralized', () => {
+    const out = cssPropsToString({
+      color: { toString: () => '"><img src=x onerror=alert(1)>' },
+    } as any);
+    expect(out).not.toMatch(/[<>"]/);
+    expect(out).toContain('&lt;img');
+    expect(out).toContain('&quot;');
+  });
+
+  test('a number value is emitted raw/unchanged', () => {
+    const out = cssPropsToString({ zIndex: 5 } as any);
+    expect(out).toBe('z-index:5');
+  });
+
+  test('a normal string value still works after the fix', () => {
+    const out = cssPropsToString({ color: 'red' } as any);
+    expect(out).toBe('color:red');
+  });
+});
+
 describe('cssPropsToString sanitizes emitted KEYS (C1 -- style-object key breakout)', () => {
   test('a key containing a double-quote is dropped entirely, not emitted', () => {
     const out = cssPropsToString({

craft/src/utils/style-helpers.ts

@@ -9,10 +9,16 @@ const URL_RE = /url\(\s*(['"]?)([\s\S]*?)\1\s*\)/gi;
 // Outside of a url(...) reference, a `;` is never legitimate (declarations
 // are separated by it) -- stray semicolons are how a breakout injects a
 // second property -- and a raw `"` would close the `style="..."` attribute
-// early. Inside url('...') the content has already been made safe via
-// escapeAttr(safeUrl(...)), including any `;` required by data-URI syntax
-// (`data:<mime>;base64,<payload>`), so this must never be applied there.
-const sanitizeBreakoutChars = (s: string): string => s.replace(/;/g, '').replace(/"/g, '&quot;');
+// early. `<`/`>` are escaped too as defense-in-depth: they're inert inside a
+// properly quote-terminated `style="..."` attribute, but a value can reach
+// this function from a non-string source (array/object coerced via
+// `String(v)`, see `cssPropsToString` below) so we don't want to rely solely
+// on the outer quote holding. Inside url('...') the content has already been
+// made safe via escapeAttr(safeUrl(...)), including any `;` required by
+// data-URI syntax (`data:<mime>;base64,<payload>`), so this must never be
+// applied there.
+const sanitizeBreakoutChars = (s: string): string =>
+  s.replace(/;/g, '').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
 /**
  * Sanitizes a single CSS declaration value so it can never terminate the
@@ -60,7 +66,14 @@ export function cssPropsToString(style: CSSProperties | undefined): string {
     .filter(([, v]) => v !== undefined && v !== null && v !== '')
     .map(([k, v]) => [camelToKebab(k), v] as const)
     .filter(([k]) => VALID_CSS_KEY_RE.test(k))
-    .map(([k, v]) => `${k}:${typeof v === 'string' ? sanitizeCssValue(v) : v}`)
+    // Only a genuine `number` is safe to interpolate raw (numbers can never
+    // contain a `"`/`<`/`>`/`;` breakout character). Every other type --
+    // string, array, object, etc. -- must be coerced to a string and run
+    // through `sanitizeCssValue`. Without this, a non-string value (e.g. an
+    // array like `['red', '"><img src=x onerror=alert(1)>']`) skips
+    // sanitization entirely and is template-coerced (`${v}`) raw into the
+    // `style="..."` attribute, breaking out via the un-escaped `"`.
+    .map(([k, v]) => `${k}:${typeof v === 'number' ? v : sanitizeCssValue(String(v))}`)
     .join(';');
 }