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

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

const toHtml = (SocialLinks as any).toHtml;

describe('SocialLinks.toHtml accessibility (F2.5)', () => {
  test('icon-only links get an aria-label naming the platform', () => {
    const { html } = toHtml({ links: [{ platform: 'facebook', url: 'https://fb.example/x' }] }, '');
    expect(html).toMatch(/<a[^>]*aria-label="Facebook"/);
  });

  test('the icon glyph itself is aria-hidden', () => {
    const { html } = toHtml({ links: [{ platform: 'twitter', url: '#' }] }, '');
    expect(html).toMatch(/<i class="fa fa-twitter"[^>]*aria-hidden="true"/);
  });
});

describe('SocialLinks.toHtml XSS hardening (iconSize/iconColor/iconBgColor/gap into style=)', () => {
  test('an iconSize value with an attribute-breakout string cannot escape style=""', () => {
    const malicious = '20px" onmouseover="alert(1)';
    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconSize: malicious as any }, '');
    expect(html).not.toMatch(/"\s+onmouseover="/);
  });

  test('an iconColor value with an attribute-breakout string cannot escape style=""', () => {
    const malicious = '#fff" onmouseover="alert(1)';
    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconColor: malicious as any }, '');
    expect(html).not.toMatch(/"\s+onmouseover="/);
  });

  test('an iconBgColor value with an attribute-breakout string cannot escape style=""', () => {
    const malicious = '#374151" onmouseover="alert(1)';
    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], iconShape: 'circle', iconBgColor: malicious as any }, '');
    expect(html).not.toMatch(/"\s+onmouseover="/);
  });

  test('a gap value with an attribute-breakout string cannot escape the wrapper style=""', () => {
    const malicious = '10px" onmouseover="alert(1)';
    const { html } = toHtml({ links: [{ platform: 'facebook', url: '#' }], gap: malicious as any }, '');
    expect(html).not.toMatch(/"\s+onmouseover="/);
  });

  test('a malicious platform key does not produce a raw class-attribute breakout', () => {
    const malicious = 'x"><script>alert(1)</script>';
    const { html } = toHtml({ links: [{ platform: malicious, url: '#' }] }, '');
    expect(html).not.toContain('<script>alert(1)</script>');
  });

  test('a link url with a javascript: scheme is neutralized', () => {
    const { html } = toHtml({ links: [{ platform: 'facebook', url: 'javascript:alert(1)' }] }, '');
    expect(html).not.toContain('javascript:alert(1)');
  });
});