site-builder/craft/src/utils/style-helpers.test.ts

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

  test('data-URI background image survives with its semicolon separator intact (A3)', () => {
    const out = cssPropsToString({
      backgroundImage: 'url(data:image/png;base64,iVBORw0KGgo=)',
    } as any);
    // The `;` between the MIME type and `base64` is a required part of the
    // data-URI syntax -- it must not be stripped by breakout sanitization.
    expect(out).toContain('data:image/png;base64,iVBORw0KGgo=');
  });

  test('quote/semicolon breakout is still neutralized alongside a url()', () => {
    const out = cssPropsToString({
      color: 'red";background:url(x)"',
    } as any);
    expect(out).not.toContain('"');
    const withoutEntities = out.replace(/&(?:quot|amp|#39|#96|#x[0-9a-f]+|#[0-9]+);/gi, '');
    expect(withoutEntities).not.toContain(';');
  });
});

describe('cssPropsToString sanitizes emitted VALUES that are not strings (adversarial re-review of C1)', () => {
  test('an array value containing an attribute-breakout payload is neutralized', () => {
    const out = cssPropsToString({
      color: ['red', '"><img src=x onerror=alert(1)>'],
    } as any);
    // No raw `"` (would close style="...") and no raw `<`/`>` (defense in
    // depth) may survive -- they must come back as HTML entities, leaving
    // the payload as inert text rather than a live tag.
    expect(out).not.toMatch(/[<>"]/);
    expect(out).toContain('&lt;img');
    expect(out).toContain('&quot;');
  });

  test('an object value containing an attribute-breakout payload is neutralized', () => {
    const out = cssPropsToString({
      color: { toString: () => '"><img src=x onerror=alert(1)>' },
    } as any);
    expect(out).not.toMatch(/[<>"]/);
    expect(out).toContain('&lt;img');
    expect(out).toContain('&quot;');
  });

  test('a number value is emitted raw/unchanged', () => {
    const out = cssPropsToString({ zIndex: 5 } as any);
    expect(out).toBe('z-index:5');
  });

  test('a normal string value still works after the fix', () => {
    const out = cssPropsToString({ color: 'red' } as any);
    expect(out).toBe('color:red');
  });
});

describe('cssPropsToString sanitizes emitted KEYS (C1 -- style-object key breakout)', () => {
  test('a key containing a double-quote is dropped entirely, not emitted', () => {
    const out = cssPropsToString({
      color: 'red',
      '"><img src=x onerror=alert(1)>': '1',
    } as any);
    expect(out).not.toContain('"><img');
    expect(out).not.toContain('onerror');
    expect(out).toBe('color:red');
  });

  test('a key containing > is dropped', () => {
    const out = cssPropsToString({ 'foo>bar': '1' } as any);
    expect(out).toBe('');
  });

  test('a key containing < is dropped', () => {
    const out = cssPropsToString({ 'foo<bar': '1' } as any);
    expect(out).toBe('');
  });

  test('a key containing a semicolon is dropped', () => {
    const out = cssPropsToString({ 'foo;bar': '1' } as any);
    expect(out).toBe('');
  });

  test('a key containing a space is dropped', () => {
    const out = cssPropsToString({ 'foo bar': '1' } as any);
    expect(out).toBe('');
  });

  test('legit simple key "color" is preserved', () => {
    const out = cssPropsToString({ color: 'red' } as any);
    expect(out).toBe('color:red');
  });

  test('legit camelCase key backgroundColor -> background-color is preserved', () => {
    const out = cssPropsToString({ backgroundColor: 'blue' } as any);
    expect(out).toBe('background-color:blue');
  });

  test('a CSS custom property key (--custom-prop) is preserved', () => {
    const out = cssPropsToString({ '--custom-prop': '10px' } as any);
    expect(out).toBe('--custom-prop:10px');
  });

  test('a vendor-prefixed key (-webkit-...) is preserved', () => {
    const out = cssPropsToString({ WebkitBoxShadow: '0 0 1px red' } as any);
    expect(out).toBe('-webkit-box-shadow:0 0 1px red');
  });

  test('a digits-only key is dropped', () => {
    const out = cssPropsToString({ '123': '1' } as any);
    expect(out).toBe('');
  });

  test('other legit keys in the same object still emit even when a malicious key is dropped', () => {
    const out = cssPropsToString({
      color: 'red',
      '"><script>alert(1)</script>': 'x',
      backgroundColor: 'blue',
    } as any);
    expect(out).toBe('color:red;background-color:blue');
  });
});