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