fix(builder): sanitize style-string emission

cssPropsToString() joined raw CSSProperties values into a style="..." attribute with zero escaping, so any component spreading user-controlled values into inline styles (background-image url(), etc.) could break out of the attribute or inject a second declaration -- this is what made BackgroundSection/HeroSimple/CallToAction/Section's bg-image url() sites (flagged in the A3 brief) safe without needing a per-call- site fix, since they already route through this helper. Each string value is now sanitized: url(...) contents are validated through safeUrl and re-wrapped escaped, stray `;` (the only way to inject a second live declaration) is stripped, and any raw `"` is entity-encoded so it can't terminate the attribute early. Legitimate multi-part values (box-shadow, gradients) that contain none of these characters pass through byte-identical. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-12 12:06:16 -07:00
parent 7179287087
commit fb4e9f87be
2 changed files with 62 additions and 1 deletions
@@ -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. `&quot;`, `&#39;`) -- 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:');
+  });
+});