@designcrowd/library.brand-page 5.10.20 → 5.10.31

package/src/brand-page-maker/utils/rich-text-editor.util.test.ts

@@ -6,6 +6,8 @@ import {
   skipStyleDetection,
   hasRTEContent,
   getUpdatedHTMLFromEditor,
+  sanitiseClientSideRTE,
+  getRTEColor,
 } from './rich-text-editor.util';
 import type { TextStyleDeclaration } from '../../brand-page';
 
@@ -138,3 +140,419 @@ describe('getUpdatedHTMLFromEditor', () => {
     expect(result).toBe('<div>styled</div>');
   });
 });
+
+describe('sanitiseClientSideRTE', () => {
+  it('removes forbidden tags entirely', () => {
+    const input =
+      '<p>Hello</p><script>alert(1)</script><iframe src="evil"></iframe><img src="x" />';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('<p>Hello</p>');
+    expect(output).not.toContain('<script>');
+    expect(output).not.toContain('alert(1)');
+    expect(output).not.toContain('<iframe>');
+    expect(output).not.toContain('<img');
+  });
+
+  it('strips dangerous attributes', () => {
+    const input = '<p onclick="alert(1)" onload="evil()">Hello</p>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('<p>');
+    expect(output).toContain('Hello');
+    expect(output).not.toContain('onclick=');
+    expect(output).not.toContain('onload=');
+  });
+
+  it('preserves text content', () => {
+    const input = '<div>alert();</div> <div>function(){alert();}()</div>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain(
+      '<div>alert();</div> <div>function(){alert();}()</div>',
+    );
+  });
+
+  it('preserves allowed tags', () => {
+    const input = `
+      <p>Paragraph</p>
+      <span>Span</span>
+      <strong>Strong</strong>
+      <em>Emphasis</em>
+      <u>Underline</u>
+      <s>Strike</s>
+      <mark>Mark</mark>
+      <div>Div</div>
+      <br>
+      <ul><li>List item</li></ul>
+      <ol><li>Ordered item</li></ol>
+      <h1>Heading 1</h1>
+      <h2>Heading 2</h2>
+      <h3>Heading 3</h3>
+      <h4>Heading 4</h4>
+      <h5>Heading 5</h5>
+      <h6>Heading 6</h6>
+      <blockquote>Quote</blockquote>
+      <code>Code</code>
+      <pre>Preformatted</pre>
+      <hr>
+    `;
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('<p>Paragraph</p>');
+    expect(output).toContain('<span>Span</span>');
+    expect(output).toContain('<strong>Strong</strong>');
+    expect(output).toContain('<em>Emphasis</em>');
+    expect(output).toContain('<u>Underline</u>');
+    expect(output).toContain('<s>Strike</s>');
+    expect(output).toContain('<mark>Mark</mark>');
+    expect(output).toContain('<div>Div</div>');
+    expect(output).toContain('<br>');
+    expect(output).toContain('<ul><li>List item</li></ul>');
+    expect(output).toContain('<ol><li>Ordered item</li></ol>');
+    expect(output).toContain('<h1>Heading 1</h1>');
+    expect(output).toContain('<h2>Heading 2</h2>');
+    expect(output).toContain('<h3>Heading 3</h3>');
+    expect(output).toContain('<h4>Heading 4</h4>');
+    expect(output).toContain('<h5>Heading 5</h5>');
+    expect(output).toContain('<h6>Heading 6</h6>');
+    expect(output).toContain('<blockquote>Quote</blockquote>');
+    expect(output).toContain('<code>Code</code>');
+    expect(output).toContain('<pre>Preformatted</pre>');
+    expect(output).toContain('<hr>');
+  });
+
+  it('preserves allowed attributes and removes disallowed ones', () => {
+    const input =
+      '<p class="foo" data-type="bar" data-color="red" style="color: blue; display: none;">Text</p>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).not.toContain('class="foo"');
+    expect(output).not.toContain('data-type="bar"');
+    expect(output).toContain('data-color="red"');
+    expect(output).toContain('style="color: blue"');
+    expect(output).not.toContain('display: none');
+  });
+
+  it('retains style attribute', () => {
+    const input = '<span style="color:red">Test</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain(input);
+  });
+
+  it('removes href/javascript links', () => {
+    const input = '<a href="javascript:alert(1)">Link</a>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).not.toContain('alert(1)');
+    expect(output).toContain('Link');
+  });
+
+  it('sanitizes CSS properties to only allow TipTap extension properties', () => {
+    const input =
+      '<span style="color: red; font-size: 16px; display: block; position: absolute; background-color: blue;">Text</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('color: red');
+    expect(output).toContain('font-size: 16px');
+    expect(output).toContain('background-color: blue');
+    expect(output).not.toContain('display: block');
+    expect(output).not.toContain('position: absolute');
+  });
+
+  it('removes empty style attributes after CSS property filtering', () => {
+    const input =
+      '<span style="display: block; position: absolute;">Text</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).not.toContain('style=');
+    expect(output).toContain('<span>Text</span>');
+  });
+
+  it('preserves all TipTap extension CSS properties', () => {
+    const input =
+      '<span style="font-size: 16px; font-family: Arial; color: red; line-height: 1.5; letter-spacing: 0.1em; text-align: center; background-color: yellow; font-weight: bold; font-style: italic; text-decoration: underline;">Text</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('font-size: 16px');
+    expect(output).toContain('font-family: Arial');
+    expect(output).toContain('color: red');
+    expect(output).toContain('line-height: 1.5');
+    expect(output).toContain('letter-spacing: 0.1em');
+    expect(output).toContain('text-align: center');
+    expect(output).toContain('background-color: yellow');
+    expect(output).toContain('font-weight: bold');
+    expect(output).toContain('font-style: italic');
+    expect(output).toContain('text-decoration: underline');
+  });
+
+  it('handles malformed CSS gracefully', () => {
+    const input =
+      '<span style="color: red; ; font-size: ; font-family: Arial; malformed: property;">Text</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('color: red');
+    expect(output).toContain('font-family: Arial');
+    expect(output).not.toContain('malformed: property');
+  });
+
+  it('removes XSS attempts in style attributes', () => {
+    const input =
+      '<span style="color: red; expression(alert(1)); background: url(javascript:alert(1));">Text</span>';
+    const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+    expect(output).toContain('color: red');
+    expect(output).not.toContain('expression');
+    expect(output).not.toContain('alert(1)');
+    expect(output).not.toContain('javascript:');
+  });
+
+  describe('Anchor tag support', () => {
+    it('allows anchor tags with valid href attributes', () => {
+      const input = '<a href="https://example.com">Valid link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="https://example.com"');
+      expect(output).toContain('target="_blank"');
+      expect(output).toContain('rel="noopener noreferrer"');
+      expect(output).toContain('Valid link</a>');
+    });
+
+    it('allows relative path links', () => {
+      const input = '<a href="/internal-page">Internal link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="/internal-page">Internal link</a>');
+      expect(output).not.toContain('target="_blank"');
+    });
+
+    it('allows relative path links with ./ prefix', () => {
+      const input = '<a href="./page.html">Relative link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="./page.html">Relative link</a>');
+    });
+
+    it('allows relative path links with ../ prefix', () => {
+      const input = '<a href="../parent-page">Parent link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="../parent-page">Parent link</a>');
+    });
+
+    it('allows mailto links with valid email', () => {
+      const input = '<a href="mailto:test@example.com">Email link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain(
+        '<a href="mailto:test@example.com">Email link</a>',
+      );
+    });
+
+    it('allows tel links with valid phone number', () => {
+      const input = '<a href="tel:+1-234-567-8900">Phone link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="tel:+1-234-567-8900">Phone link</a>');
+    });
+
+    it('removes dangerous javascript: hrefs', () => {
+      const input = '<a href="javascript:alert(1)">Dangerous link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Dangerous link</a>');
+      expect(output).not.toContain('javascript:');
+      expect(output).not.toContain('href=');
+    });
+
+    it('removes dangerous data: hrefs', () => {
+      const input =
+        '<a href="data:text/html,<script>alert(1)</script>">Data link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Data link</a>');
+      expect(output).not.toContain('data:');
+      expect(output).not.toContain('href=');
+    });
+
+    it('removes invalid mailto links', () => {
+      const input = '<a href="mailto:invalid-email">Invalid email</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Invalid email</a>');
+      expect(output).not.toContain('href=');
+    });
+
+    it('removes invalid tel links', () => {
+      const input = '<a href="tel:invalid@phone">Invalid phone</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Invalid phone</a>');
+      expect(output).not.toContain('href=');
+    });
+
+    it('removes hrefs with dangerous characters', () => {
+      const input =
+        '<a href="path<script>alert(1)</script>">Dangerous path</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Dangerous path</a>');
+      expect(output).not.toContain('href=');
+      expect(output).not.toContain('<script>');
+    });
+
+    it('validates URLs properly', () => {
+      const input = '<a href="https://malformed..url">Invalid URL</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a>Invalid URL</a>');
+      expect(output).not.toContain('href=');
+    });
+
+    it('allows simple relative paths without dangerous characters', () => {
+      const input = '<a href="simple-path">Simple link</a>';
+      const output = sanitiseClientSideRTE(input).sanitizedHtml;
+
+      expect(output).toContain('<a href="simple-path">Simple link</a>');
+    });
+  });
+
+  describe('Sanitization result tracking', () => {
+    it('returns sanitization info with removed elements', () => {
+      const input =
+        '<script>alert(1)</script><a href="javascript:void(0)">Link</a><p class="forbidden">Text</p>';
+      const result = sanitiseClientSideRTE(input);
+
+      expect(result.sanitizedHtml).toContain('<a>Link</a>');
+      expect(result.sanitizedHtml).toContain('<p>Text</p>');
+      expect(result.sanitizedHtml).not.toContain('<script>');
+      expect(result.sanitizedHtml).not.toContain('javascript:');
+      expect(result.sanitizedHtml).not.toContain('class=');
+
+      // Should track the removed href attribute
+      expect(result.removedElements).toContain('href="javascript:void(0)"');
+      // Should track some removed elements (script tag or attributes)
+      expect(result.removedElements.length).toBeGreaterThan(0);
+    });
+
+    it('tracks multiple removed elements', () => {
+      const input =
+        '<img src="test.jpg"><iframe src="evil.com"></iframe><a href="data:text/html,bad">Link</a>';
+      const result = sanitiseClientSideRTE(input);
+
+      expect(result.removedElements).toContain('href="data:text/html,bad"');
+      // Some tags might be removed by DOMPurify depending on configuration
+    });
+
+    it('returns minimal removal info for safe content', () => {
+      const input =
+        '<p>Safe content</p><a href="https://example.com">Safe link</a>';
+      const result = sanitiseClientSideRTE(input);
+
+      expect(result.sanitizedHtml).toContain('<p>Safe content</p>');
+      expect(result.sanitizedHtml).toContain('<a href="https://example.com"');
+      // DOMPurify might add some tags like 'body' during processing
+      // We expect minimal removed elements for safe content
+      expect(
+        result.removedElements.filter((item) => !item.includes('body')).length,
+      ).toBe(0);
+    });
+
+    it('tracks href removals correctly', () => {
+      const input =
+        '<a href="javascript:1">Link1</a><a href="javascript:2">Link2</a>';
+      const result = sanitiseClientSideRTE(input);
+
+      expect(
+        result.removedElements.filter((attr) => attr.includes('javascript:'))
+          .length,
+      ).toBeGreaterThan(0);
+    });
+
+    it('tracks removed CSS properties in removedElements', () => {
+      const input =
+        '<span style="color: red; display: block; position: absolute; background-color: blue;">Text</span>';
+      const result = sanitiseClientSideRTE(input);
+
+      expect(result.sanitizedHtml).toContain('color: red');
+      expect(result.sanitizedHtml).toContain('background-color: blue');
+      expect(result.sanitizedHtml).not.toContain('display: block');
+      expect(result.sanitizedHtml).not.toContain('position: absolute');
+
+      // Check that removed CSS properties are tracked
+      expect(result.removedElements).toContain('display: block');
+      expect(result.removedElements).toContain('position: absolute');
+    });
+
+    it('does not duplicate removed CSS properties', () => {
+      const input =
+        '<span style="display: block;">Text1</span><div style="display: none;">Text2</div>';
+      const result = sanitiseClientSideRTE(input);
+
+      const displayCount = result.removedElements.filter((el) =>
+        el.startsWith('display:'),
+      ).length;
+
+      expect(displayCount).toBe(2); // Should have both "display: block" and "display: none"
+    });
+  });
+});
+
+describe('getRTEColor', () => {
+  it('returns default text color for null/undefined color', () => {
+    expect(getRTEColor(null, 'text')).toBe('#000000');
+    expect(getRTEColor(undefined, 'text')).toBe('#000000');
+    expect(getRTEColor('', 'text')).toBe('#000000');
+  });
+
+  it('returns default background color for null/undefined color', () => {
+    expect(getRTEColor(null, 'background')).toBe('transparent');
+    expect(getRTEColor(undefined, 'background')).toBe('transparent');
+    expect(getRTEColor('', 'background')).toBe('transparent');
+  });
+
+  it('returns custom default value when provided', () => {
+    expect(getRTEColor(null, 'text', '#ff0000')).toBe('#ff0000');
+    expect(getRTEColor(undefined, 'background', '#00ff00')).toBe('#00ff00');
+  });
+
+  it('returns CSS variable for logo theme colors', () => {
+    expect(getRTEColor('logo-text-color', 'text')).toBe(
+      'var(--logo-text-color)',
+    );
+    expect(getRTEColor('logo-background-color', 'background')).toBe(
+      'var(--logo-background-color)',
+    );
+    expect(getRTEColor('logo-text-multi-color', 'text')).toBe(
+      'var(--logo-text-multi-color)',
+    );
+    expect(getRTEColor('logo-background-multi-color', 'background')).toBe(
+      'var(--logo-background-multi-color)',
+    );
+  });
+
+  it('returns regular color as-is for non-theme colors', () => {
+    expect(getRTEColor('#ff0000', 'text')).toBe('#ff0000');
+    expect(getRTEColor('rgb(255, 0, 0)', 'background')).toBe('rgb(255, 0, 0)');
+    expect(getRTEColor('blue', 'text')).toBe('blue');
+  });
+
+  it('handles colors containing theme keys', () => {
+    // Should NOT wrap colors that contain theme keys but don't start with them
+    expect(getRTEColor('some-logo-text-color-variant', 'text')).toBe(
+      'some-logo-text-color-variant',
+    );
+    expect(
+      getRTEColor('custom-logo-background-color-style', 'background'),
+    ).toBe('custom-logo-background-color-style');
+
+    // Should NOT double-wrap already processed CSS variables
+    expect(getRTEColor('var(--logo-text-color)', 'text')).toBe(
+      'var(--logo-text-color)',
+    );
+    expect(getRTEColor('var(--logo-background-color)', 'background')).toBe(
+      'var(--logo-background-color)',
+    );
+  });
+});