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>
This commit is contained in:
@@ -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('<img');
|
||||
expect(out).toContain('"');
|
||||
});
|
||||
|
||||
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('<img');
|
||||
expect(out).toContain('"');
|
||||
});
|
||||
|
||||
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({
|
||||
|
||||
Reference in New Issue
Block a user