site-builder/craft/src/components/basic/Logo.toHtml.test.ts

import { describe, test, expect } from 'vitest';
import { Logo } from './Logo';

/*
 * Regression coverage for Logo.toHtml -- audited during the toHtml
 * attribute-XSS sweep (see task-cssxss-brief.md) and found already fully
 * sanitized (href/src via escapeAttr(safeUrl()), alt/text via escapeAttr /
 * escapeHtml, imageWidth/fontSize/etc. routed through cssPropsToString which
 * sanitizes every value regardless of declared type). No fix was required;
 * these tests lock that behavior in against regressions.
 */
const toHtml = (Logo as any).toHtml;

describe('Logo.toHtml href sanitization (attacker-controlled `href` prop)', () => {
  test('a javascript: URL is neutralized', () => {
    const { html } = toHtml({ href: 'javascript:alert(1)' }, '');
    expect(html).not.toContain('javascript:alert');
  });

  test('a quote-breakout href does not escape the anchor attribute', () => {
    const malicious = '"><script>alert(1)</script>';
    const { html } = toHtml({ href: malicious }, '');
    expect(html).not.toContain('<script>alert(1)</script>');
  });
});

describe('Logo.toHtml image src/alt sanitization (type="image")', () => {
  test('a javascript: imageSrc is neutralized', () => {
    const { html } = toHtml({ type: 'image', imageSrc: 'javascript:alert(1)', text: 'Logo' }, '');
    expect(html).not.toContain('javascript:alert');
  });

  test('a quote-breakout alt (from `text`) does not escape the img attribute', () => {
    const malicious = '"><script>alert(1)</script>';
    const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', text: malicious }, '');
    expect(html).not.toContain('<script>alert(1)</script>');
  });

  test('a non-numeric imageWidth (attribute-breakout attempt) does not escape the style attribute', () => {
    const malicious = '1"><script>alert(1)</script>';
    const { html } = toHtml({ type: 'image', imageSrc: 'https://example.com/logo.png', imageWidth: malicious }, '');
    expect(html).not.toContain('<script>alert(1)</script>');
  });
});

describe('Logo.toHtml download attribute (F3: link-to-file toggle)', () => {
  test('download:true emits the download attribute', () => {
    const { html } = toHtml({ href: '/resume.pdf', download: true, text: 'Resume' }, '');
    expect(html).toMatch(/<a href="\/resume\.pdf" download/);
  });

  test('no download prop -> no download attribute emitted', () => {
    const { html } = toHtml({ href: '/', text: 'MySite' }, '');
    expect(html).not.toContain('download');
  });
});

describe('Logo (F4: box-model + animation + visibility props on craft.props)', () => {
  test('craft.props includes animation/visibility defaults so the panel controls always render', () => {
    const craftProps = (Logo as any).craft.props;
    expect(craftProps).toHaveProperty('animation', 'none');
    expect(craftProps).toHaveProperty('animationDelay', '0');
    expect(craftProps).toHaveProperty('hideOnDesktop', false);
    expect(craftProps).toHaveProperty('hideOnTablet', false);
    expect(craftProps).toHaveProperty('hideOnMobile', false);
  });
});

describe('Logo.toHtml text-logo styling sanitization', () => {
  test('a quote-breakout color does not escape the span style attribute', () => {
    const malicious = 'red" onmouseover="alert(1)';
    const { html } = toHtml({ type: 'text', text: 'MySite', color: malicious }, '');
    // The raw `"` must never survive un-escaped inside the style attribute
    // value -- if it did, `onmouseover` would land as a REAL new HTML
    // attribute (breakout) rather than being inert CSS-value garbage inside
    // a properly-escaped style="...".
    expect(html).not.toMatch(/style="[^"]*"[^>]*onmouseover/);
  });

  test('a normal logo renders as expected', () => {
    const { html } = toHtml({ type: 'text', text: 'MySite', href: '/' }, '');
    expect(html).toContain('href="/"');
    expect(html).toContain('MySite');
  });
});