Files
site-builder/craft/src/components/layout/Container.toHtml.test.ts
T
shadowdaoandClaude Opus 4.8 7ba91d9829 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>
2026-07-12 17:44:59 -07:00

66 lines
2.5 KiB
TypeScript

import { describe, test, expect } from 'vitest';
import { Container } from './Container';
const toHtml = (Container as any).toHtml;
describe('Container.toHtml cssId/cssClass', () => {
test('emits id and class when both set', () => {
const { html } = toHtml({ cssId: 'my-id', cssClass: 'my-class' }, 'child');
expect(html).toContain('id="my-id"');
expect(html).toContain('class="my-class"');
});
test('emits neither id nor class when empty/unset', () => {
const { html } = toHtml({}, 'child');
expect(html).not.toContain(' id="');
expect(html).not.toContain(' class="');
});
test('escapes cssId/cssClass values', () => {
const { html } = toHtml({ cssId: 'x" onerror="alert(1)', cssClass: 'y" onerror="alert(1)' }, 'child');
expect(html).not.toContain('onerror="alert(1)"');
});
test('cssId takes precedence over anchorId when both set (no duplicate id attrs)', () => {
const { html } = toHtml({ cssId: 'explicit-id', anchorId: 'anchor-id' }, 'child');
const idMatches = html.match(/ id="/g) || [];
expect(idMatches.length).toBe(1);
expect(html).toContain('id="explicit-id"');
});
test('falls back to anchorId when cssId is not set', () => {
const { html } = toHtml({ anchorId: 'anchor-id' }, 'child');
expect(html).toContain('id="anchor-id"');
});
});
describe('Container.toHtml tag allowlist (adversarial re-review, same class as C1)', () => {
test('a malicious tag value falls back to div -- no injected <img>, no broken-out attrs', () => {
const { html } = toHtml({ tag: 'div><img src=x onerror=alert(1)' }, 'child');
expect(html).not.toContain('<img');
expect(html).not.toContain('onerror');
expect(html.startsWith('<div')).toBe(true);
expect(html.endsWith('</div>')).toBe(true);
});
test('a tag value outside the known-safe set falls back to div', () => {
const { html } = toHtml({ tag: 'script' }, 'child');
expect(html.startsWith('<div')).toBe(true);
expect(html).not.toContain('<script');
});
test('a valid tag (section) still emits <section', () => {
const { html } = toHtml({ tag: 'section' }, 'child');
expect(html).toContain('<section');
expect(html).toContain('</section>');
});
test('all other allowlisted tags still work', () => {
for (const tag of ['div', 'article', 'header', 'footer', 'main']) {
const { html } = toHtml({ tag }, 'child');
expect(html.startsWith(`<${tag}`)).toBe(true);
expect(html.endsWith(`</${tag}>`)).toBe(true);
}
});
});