site-builder/craft/src/components/basic/HtmlBlock.test.ts

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

describe('purifyHtml', () => {
  test('strips script tags', () => {
    expect(purifyHtml('<p>ok</p><script>alert(1)</script>')).not.toContain('<script');
  });
  test('strips on-event handlers', () => {
    const out = purifyHtml('<a onclick="bad()" href="/x">x</a>');
    expect(out).not.toContain('onclick');
    expect(out).toContain('href="/x"');
  });
  test('blocks javascript: URLs', () => {
    expect(purifyHtml('<a href="javascript:void(0)">x</a>')).not.toContain('javascript:');
  });
  test('allows YouTube iframe', () => {
    const out = purifyHtml('<iframe src="https://www.youtube.com/embed/abc" allowfullscreen></iframe>');
    expect(out).toContain('youtube.com/embed/abc');
  });
  test('strips form/input', () => {
    expect(purifyHtml('<form><input name="x"></form>')).not.toContain('<form');
  });
});

describe('purifyHtml iframe sandboxing (M-6)', () => {
  test('forces a restrictive sandbox attribute onto every iframe', () => {
    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
    expect(out).toMatch(/<iframe[^>]*\bsandbox="[^"]+"/);
  });

  test('sandbox value omits allow-top-navigation (no top-level nav escape)', () => {
    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
    const sandbox = out.match(/sandbox="([^"]*)"/)![1];
    expect(sandbox).not.toMatch(/allow-top-navigation/);
  });

  test('legitimate embeds (YouTube) still work and get sandboxed too', () => {
    const out = purifyHtml('<iframe src="https://www.youtube.com/embed/abc" allowfullscreen></iframe>');
    expect(out).toContain('youtube.com/embed/abc');
    expect(out).toMatch(/<iframe[^>]*\bsandbox="[^"]+"/);
  });

  test('adds referrerpolicy=no-referrer to iframes', () => {
    const out = purifyHtml('<iframe src="https://example.com/"></iframe>');
    expect(out).toContain('referrerpolicy="no-referrer"');
  });

  test('script/on* attributes are still stripped alongside the sandboxed iframe', () => {
    const out = purifyHtml('<iframe src="https://example.com/" onload="alert(1)"></iframe><script>alert(2)</script>');
    expect(out).not.toContain('onload');
    expect(out).not.toContain('<script');
  });

  test('repeated calls do not leak/accumulate the hook (no duplicate sandbox attr, no cross-call state)', () => {
    purifyHtml('<iframe src="https://a.example/"></iframe>');
    purifyHtml('<iframe src="https://b.example/"></iframe>');
    const out = purifyHtml('<iframe src="https://c.example/"></iframe>');
    const sandboxMatches = out.match(/sandbox="/g) || [];
    expect(sandboxMatches.length).toBe(1);
  });

  test('a non-iframe element sanitized alongside an iframe is not touched by the hook', () => {
    const out = purifyHtml('<p>hi</p><iframe src="https://example.com/"></iframe>');
    expect(out).toContain('<p>hi</p>');
  });
});