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>
75 lines
3.3 KiB
TypeScript
75 lines
3.3 KiB
TypeScript
import { describe, test, expect } from 'vitest';
|
|
import { InputField } from './InputField';
|
|
|
|
const toHtml = (InputField as any).toHtml;
|
|
|
|
describe('InputField.toHtml accessibility (F2.1)', () => {
|
|
test('label for= matches input id=', () => {
|
|
const { html } = toHtml({ label: 'Your Name', name: 'name' }, '');
|
|
const forMatch = html.match(/<label for="([^"]+)"/);
|
|
const idMatch = html.match(/<input id="([^"]+)"/);
|
|
expect(forMatch).toBeTruthy();
|
|
expect(idMatch).toBeTruthy();
|
|
expect(forMatch![1]).toBe(idMatch![1]);
|
|
});
|
|
|
|
test('id is deterministic (derived from name, not random) -- stable across calls', () => {
|
|
const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
|
|
const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
|
|
const id1 = html1.match(/<input id="([^"]+)"/)![1];
|
|
const id2 = html2.match(/<input id="([^"]+)"/)![1];
|
|
expect(id1).toBe(id2);
|
|
});
|
|
|
|
test('no visible label: input gets aria-label from placeholder', () => {
|
|
const { html } = toHtml({ label: '', name: 'phone', placeholder: 'Phone number' }, '');
|
|
expect(html).not.toContain('<label');
|
|
expect(html).toContain('aria-label="Phone number"');
|
|
});
|
|
});
|
|
|
|
describe('InputField.toHtml deterministic + unique ids (thread node id, resolves id-collision finding)', () => {
|
|
test('label for= still matches input id= after threading the node id', () => {
|
|
const { html } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
|
|
const forMatch = html.match(/<label for="([^"]+)"/);
|
|
const idMatch = html.match(/<input id="([^"]+)"/);
|
|
expect(forMatch![1]).toBe(idMatch![1]);
|
|
});
|
|
|
|
test('same node id -> identical output across calls (deterministic, no Math.random)', () => {
|
|
const { html: html1 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
|
|
const { html: html2 } = toHtml({ label: 'Name', name: 'name' }, '', 'node-in1');
|
|
expect(html1).toBe(html2);
|
|
});
|
|
|
|
test('two instances with the SAME default name but different node ids do not collide', () => {
|
|
const { html: html1 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in1');
|
|
const { html: html2 } = toHtml({ label: 'Your Name', name: 'name' }, '', 'node-in2');
|
|
const id1 = html1.match(/<input id="([^"]+)"/)![1];
|
|
const id2 = html2.match(/<input id="([^"]+)"/)![1];
|
|
expect(id1).not.toBe(id2);
|
|
});
|
|
|
|
test('no nodeId (legacy 2-arg call): id derivation stays deterministic, not random', () => {
|
|
const { html: html1 } = toHtml({ label: 'Email', name: 'email' }, '');
|
|
const { html: html2 } = toHtml({ label: 'Email', name: 'email' }, '');
|
|
const id1 = html1.match(/<input id="([^"]+)"/)![1];
|
|
const id2 = html2.match(/<input id="([^"]+)"/)![1];
|
|
expect(id1).toBe(id2);
|
|
});
|
|
});
|
|
|
|
describe('InputField.toHtml type attribute sanitization', () => {
|
|
test('malicious type value cannot break out of the attribute; falls back to type="text"', () => {
|
|
const { html } = toHtml({ label: 'Name', name: 'name', type: 'text" autofocus onfocus="alert(1)' as any }, '');
|
|
expect(html).not.toContain('onfocus=');
|
|
expect(html).not.toContain('autofocus');
|
|
expect(html).toContain('type="text"');
|
|
});
|
|
|
|
test('legitimate number type still passes through unchanged', () => {
|
|
const { html } = toHtml({ label: 'Age', name: 'age', type: 'number' as const }, '');
|
|
expect(html).toContain('type="number"');
|
|
});
|
|
});
|