diff --git a/craft/src/utils/style-helpers.test.ts b/craft/src/utils/style-helpers.test.ts new file mode 100644 index 0000000..6b10569 --- /dev/null +++ b/craft/src/utils/style-helpers.test.ts @@ -0,0 +1,38 @@ +import { describe, test, expect } from 'vitest'; +import { cssPropsToString } from './style-helpers'; + +describe('cssPropsToString sanitizes emitted values (A5)', () => { + test('quote/semicolon breakout cannot inject a second property', () => { + const out = cssPropsToString({ color: 'red";background:url(javascript:alert(1))"' } as any); + // must not contain a raw double-quote (would break out of style="...") + expect(out).not.toContain('"'); + // The only `;` allowed to survive is the one embedded inside an HTML + // entity we generated ourselves (e.g. `"`, `'`) -- decode those + // away and confirm no *live* semicolon (a real declaration separator) + // remains, i.e. no second property was injected via the breakout. + const withoutEntities = out.replace(/&(?:quot|amp|#39|#96|#x[0-9a-f]+|#[0-9]+);/gi, ''); + expect(withoutEntities).not.toContain(';'); + expect(out).not.toContain('javascript:'); + }); + + test('javascript: inside url() is neutralized', () => { + const out = cssPropsToString({ backgroundImage: 'url(javascript:alert(1))' } as any); + expect(out).not.toContain('javascript:'); + }); + + test('normal box-shadow value is unchanged', () => { + const out = cssPropsToString({ boxShadow: '0 2px 4px rgba(0,0,0,.1)' } as any); + expect(out).toBe('box-shadow:0 2px 4px rgba(0,0,0,.1)'); + }); + + test('normal gradient value is unchanged', () => { + const out = cssPropsToString({ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' } as any); + expect(out).toBe('background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)'); + }); + + test('legitimate background-image url is preserved (quoted)', () => { + const out = cssPropsToString({ backgroundImage: 'url(https://example.com/img.jpg)' } as any); + expect(out).toContain('https://example.com/img.jpg'); + expect(out).not.toContain('javascript:'); + }); +}); diff --git a/craft/src/utils/style-helpers.ts b/craft/src/utils/style-helpers.ts index d84e586..d419fb2 100644 --- a/craft/src/utils/style-helpers.ts +++ b/craft/src/utils/style-helpers.ts @@ -1,13 +1,36 @@ import { CSSProperties } from 'react'; +import { escapeAttr, safeUrl } from './escape'; const camelToKebab = (str: string): string => str.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase()); +const URL_RE = /url\(\s*(['"]?)([\s\S]*?)\1\s*\)/gi; + +/** + * Sanitizes a single CSS declaration value so it can never terminate the + * `style="..."` attribute early, inject an extra declaration via a stray + * `;`, or smuggle a `javascript:`/`vbscript:`/`data:text/html` URL through + * a `url(...)` reference. Legitimate multi-part values (box-shadow, + * gradients, etc.) that contain none of these characters pass through + * unchanged. + */ +function sanitizeCssValue(raw: string): string { + // Neutralize url(...) references: validate/strip the scheme and re-wrap + // in single quotes with the contents escaped for attribute safety. + let val = raw.replace(URL_RE, (_m, _q, inner) => `url('${escapeAttr(safeUrl(inner.trim()))}')`); + // A `;` in a CSS value is never legitimate (declarations are separated by + // it) -- stray semicolons are how a breakout injects a second property. + val = val.replace(/;/g, ''); + // Any remaining raw `"` would close the `style="..."` attribute early. + val = val.replace(/"/g, '"'); + return val; +} + export function cssPropsToString(style: CSSProperties | undefined): string { if (!style) return ''; return Object.entries(style) .filter(([, v]) => v !== undefined && v !== null && v !== '') - .map(([k, v]) => `${camelToKebab(k)}:${v}`) + .map(([k, v]) => `${camelToKebab(k)}:${typeof v === 'string' ? sanitizeCssValue(v) : v}`) .join(';'); }