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:');
+  });
+});

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(';');
 }