shadowdaoandClaude Opus 4.8
591a51dcc2
An adversarial pass found 5 Critical XSS sinks where props declared number/enum in TypeScript were interpolated raw into exported HTML attribute values, trusting the type — but nothing enforces it at runtime (AI update_props only validates node_id; deserialized saved state is untyped JSON). Fixed all 5 (NumberCounter data-target, StarRating aria-label, FormContainer method, ContactForm/InputField input type) plus 6 sibling sinks found by an exhaustive audit of every attribute-value interpolation across src/components: a JS-source injection into ContentSlider's inline setInterval script, a prototype-pollution-adjacent allowlist gap in Section's divider-shape lookup, TextareaField rows, Testimonials rating aria-label, HeroSimple textAlign, and MapEmbed zoom. Adds shared sanitizeFormMethod/sanitizeInputType allowlist helpers to utils/escape.ts alongside the existing escapeAttr/safeUrl/cssValue primitives. Every fix is TDD'd: a malicious-value test reproduces the raw injection against the pre-fix code, then passes after the fix. 502 tests green (npx vitest run), tsc + vite build green (npm run build). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { BackgroundSection } from './BackgroundSection';
|
|
|
|
const toHtml = (BackgroundSection as any).toHtml;
|
|
|
|
describe('BackgroundSection.toHtml anchorId', () => {
|
|
test('escapes a malicious anchorId (attribute breakout attempt)', () => {
|
|
const { html } = toHtml({ anchorId: 'x" onmouseover="alert(1)' }, 'child');
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
|
});
|
|
|
|
test('a normal anchorId still renders correctly', () => {
|
|
const { html } = toHtml({ anchorId: 'my-bg-section' }, 'child');
|
|
expect(html).toContain('id="my-bg-section"');
|
|
});
|
|
});
|
|
|
|
describe('BackgroundSection.toHtml style-value XSS hardening', () => {
|
|
test('a malicious bgImage cannot break out of the outer style attribute via url(...)', () => {
|
|
const malicious = 'javascript:alert(1)) foo{background:red}</style><script>alert(1)</script';
|
|
const { html } = toHtml({ bgImage: malicious }, 'child');
|
|
expect(html).not.toContain('<script>alert(1)</script>');
|
|
expect(html).not.toContain('javascript:alert(1)');
|
|
});
|
|
|
|
test('a malicious bgColor cannot break out of the outer style attribute', () => {
|
|
const malicious = 'red" onmouseover="alert(1)';
|
|
const { html } = toHtml({ bgColor: malicious }, 'child');
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
|
});
|
|
|
|
test('a malicious overlayColor cannot break out of the overlay style attribute', () => {
|
|
const malicious = 'red" onmouseover="alert(1)';
|
|
const { html } = toHtml({ overlayColor: malicious }, 'child');
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
|
});
|
|
|
|
test('a wrong-typed overlayOpacity (string, not number) cannot break out of the overlay style attribute', () => {
|
|
const malicious = '0.4" onmouseover="alert(1)' as any;
|
|
const { html } = toHtml({ overlayOpacity: malicious }, 'child');
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
|
});
|
|
|
|
test('a malicious innerMaxWidth cannot break out of the inner style attribute', () => {
|
|
const malicious = '1200px" onmouseover="alert(1)';
|
|
const { html } = toHtml({ innerMaxWidth: malicious }, 'child');
|
|
expect(html).not.toContain('onmouseover="alert(1)"');
|
|
});
|
|
|
|
test('normal props still render correctly', () => {
|
|
const { html } = toHtml({ bgImage: 'https://example.com/bg.jpg', bgColor: '#1e293b', overlayColor: '#000000', overlayOpacity: 0.4, innerMaxWidth: '1200px' }, 'child');
|
|
expect(html).toContain("url('https://example.com/bg.jpg')");
|
|
expect(html).toContain('background-color:#1e293b');
|
|
expect(html).toContain('opacity:0.4');
|
|
expect(html).toContain('max-width:1200px');
|
|
expect(html).toContain('child');
|
|
});
|
|
});
|