@capillarytech/creatives-library 8.0.208 → 8.0.210

package/v2Components/HtmlEditor/utils/__tests__/contentSanitizer.test.js

@@ -0,0 +1,741 @@
+/**
+ * contentSanitizer Tests
+ *
+ * Tests for HTML content sanitization and security validation
+ */
+
+import {
+  sanitizeHTML,
+  prepareForProduction,
+  isContentSafe,
+  findUnsafeContent
+} from '../contentSanitizer';
+
+// Mock DOMPurify
+jest.mock('dompurify', () => {
+  // Global hooks array for legacy API compatibility
+  let globalHooks = [];
+
+  const createMockSanitize = (hooksArray) => (html, config) => {
+    if (!html || typeof html !== 'string') {
+      return '';
+    }
+
+    // Simulate DOMPurify behavior
+    let sanitized = html;
+
+    // Check for and remove script tags
+    if (/<script/gi.test(html)) {
+      sanitized = sanitized.replace(/<script[^>]*>.*?<\/script>/gi, '');
+      hooksArray.forEach(hook => {
+        if (hook.event === 'uponSanitizeElement') {
+          hook.callback({ tagName: 'script' }, { allowedTags: { script: false }, tagName: 'script' });
+        }
+      });
+    }
+
+    // Check for and remove event handlers
+    if (/\s*on\w+\s*=/gi.test(html)) {
+      sanitized = sanitized.replace(/\s*on\w+\s*=\s*["'][^"']*["']/gi, '');
+      hooksArray.forEach(hook => {
+        if (hook.event === 'uponSanitizeAttribute') {
+          hook.callback({ tagName: 'div' }, { attrName: 'onclick', attrValue: 'alert(1)', forceKeepAttr: false });
+        }
+      });
+    }
+
+    // Check for and remove javascript: protocols
+    if (/javascript:/gi.test(html)) {
+      sanitized = sanitized.replace(/javascript:/gi, '');
+      hooksArray.forEach(hook => {
+        if (hook.event === 'uponSanitizeAttribute') {
+          hook.callback({ tagName: 'a' }, { attrName: 'href', attrValue: 'javascript:void(0)', forceKeepAttr: false });
+        }
+      });
+    }
+
+    // Check for and remove iframe tags
+    if (/<iframe/gi.test(html)) {
+      sanitized = sanitized.replace(/<iframe[^>]*>.*?<\/iframe>/gi, '');
+      hooksArray.forEach(hook => {
+        if (hook.event === 'uponSanitizeElement') {
+          hook.callback({ tagName: 'iframe' }, { allowedTags: { iframe: false }, tagName: 'iframe' });
+        }
+      });
+    }
+
+    return sanitized;
+  };
+
+  // Create a factory function that returns DOMPurify instances with their own hooks
+  const createInstance = () => {
+    const instanceHooks = []; // Each instance gets its own hooks array
+
+    return {
+      sanitize: createMockSanitize(instanceHooks),
+      addHook: (event, callback) => {
+        instanceHooks.push({ event, callback });
+      },
+      removeHook: (event, callback) => {
+        const index = instanceHooks.findIndex(hook => hook.event === event && hook.callback === callback);
+        if (index !== -1) {
+          instanceHooks.splice(index, 1);
+        }
+      },
+      removeAllHooks: () => {
+        instanceHooks.length = 0; // Clear the instance hooks array
+      }
+    };
+  };
+
+  return {
+    default: createInstance, // DOMPurify() creates instances
+    sanitize: createMockSanitize(globalHooks),  // Legacy global methods for backward compatibility
+    addHook: (event, callback) => {
+      globalHooks.push({ event, callback });
+    },
+    removeAllHooks: () => {
+      globalHooks.length = 0; // Clear the global hooks array
+    }
+  };
+});
+
+describe('contentSanitizer', () => {
+  beforeEach(() => {
+    // Reset global hooks before each test to prevent test pollution
+    const DOMPurify = require('dompurify');
+    if (DOMPurify.removeAllHooks) {
+      DOMPurify.removeAllHooks();
+    }
+
+    // Clear module cache to ensure fresh instances
+    jest.clearAllMocks();
+  });
+
+  describe('sanitizeHTML', () => {
+    describe('Basic Sanitization', () => {
+      it('sanitizes valid HTML content', () => {
+        const html = '<p>Hello World</p>';
+        const result = sanitizeHTML(html);
+
+        expect(result).toHaveProperty('sanitized');
+        expect(result).toHaveProperty('isClean');
+        expect(result).toHaveProperty('removedElements');
+        expect(result).toHaveProperty('warnings');
+      });
+
+      it('handles empty string', () => {
+        const result = sanitizeHTML('');
+
+        expect(result.sanitized).toBe('');
+        expect(result.isClean).toBe(true);
+        expect(result.warnings).toHaveLength(0);
+      });
+
+      it('handles null input', () => {
+        const result = sanitizeHTML(null);
+
+        expect(result.sanitized).toBe('');
+        expect(result.isClean).toBe(true);
+      });
+
+      it('handles undefined input', () => {
+        const result = sanitizeHTML(undefined);
+
+        expect(result.sanitized).toBe('');
+        expect(result.isClean).toBe(true);
+      });
+
+      it('handles non-string input', () => {
+        const result = sanitizeHTML(123);
+
+        expect(result.sanitized).toBe('');
+        expect(result.isClean).toBe(true);
+      });
+    });
+
+    describe('XSS Protection', () => {
+      it('removes script tags', () => {
+        const html = '<p>Hello</p><script>alert("xss")</script>';
+        const result = sanitizeHTML(html);
+
+        expect(result.sanitized).not.toContain('<script');
+        expect(result.isClean).toBe(false);
+      });
+
+      it('removes event handler attributes', () => {
+        const html = '<div onclick="alert(1)">Click me</div>';
+        const result = sanitizeHTML(html);
+
+        expect(result.sanitized).not.toContain('onclick');
+        expect(result.isClean).toBe(false);
+      });
+
+      it('removes javascript: protocol', () => {
+        const html = '<a href="javascript:void(0)">Link</a>';
+        const result = sanitizeHTML(html);
+
+        expect(result.sanitized).not.toContain('javascript:');
+        expect(result.isClean).toBe(false);
+      });
+
+      it('removes iframe tags', () => {
+        const html = '<iframe src="evil.com"></iframe>';
+        const result = sanitizeHTML(html);
+
+        expect(result.sanitized).not.toContain('iframe');
+        expect(result.isClean).toBe(false);
+      });
+
+      it('removes multiple dangerous elements', () => {
+        const html = `
+          <div onclick="alert(1)">
+            <script>alert("xss")</script>
+            <iframe src="evil.com"></iframe>
+          </div>
+        `;
+        const result = sanitizeHTML(html);
+
+        expect(result.sanitized).not.toContain('script');
+        expect(result.sanitized).not.toContain('iframe');
+        expect(result.sanitized).not.toContain('onclick');
+      });
+    });
+
+    describe('Variant-Specific Sanitization', () => {
+      it('uses email config for email variant', () => {
+        const html = '<p>Email content</p>';
+        const result = sanitizeHTML(html, 'email');
+
+        expect(result).toBeDefined();
+        expect(result.sanitized).toBeDefined();
+        expect(typeof result.sanitized).toBe('string');
+        // The mock should preserve safe HTML
+        if (result.sanitized.length > 0) {
+          expect(result.sanitized).toContain('Email content');
+        }
+      });
+
+      it('uses inapp config for inapp variant', () => {
+        const html = '<p>InApp content</p>';
+        const result = sanitizeHTML(html, 'inapp');
+
+        expect(result).toBeDefined();
+        expect(result.sanitized).toBeDefined();
+        expect(typeof result.sanitized).toBe('string');
+        // The mock should preserve safe HTML
+        if (result.sanitized.length > 0) {
+          expect(result.sanitized).toContain('InApp content');
+        }
+      });
+
+      it('defaults to email variant', () => {
+        const html = '<p>Default content</p>';
+        const result = sanitizeHTML(html);
+
+        expect(result).toBeDefined();
+        expect(result.sanitized).toBeDefined();
+      });
+    });
+
+    describe('Security Levels', () => {
+      it('applies standard level by default', () => {
+        const html = '<p>Standard content</p>';
+        const result = sanitizeHTML(html);
+
+        expect(result).toBeDefined();
+      });
+
+      it('applies strict level when specified', () => {
+        const html = '<p>Strict content</p>';
+        const result = sanitizeHTML(html, 'email', 'strict');
+
+        expect(result).toBeDefined();
+      });
+
+      it('strict level is more restrictive', () => {
+        const html = '<style>.test{}</style><p>Content</p>';
+        const resultStandard = sanitizeHTML(html, 'email', 'standard');
+        const resultStrict = sanitizeHTML(html, 'email', 'strict');
+
+        expect(resultStrict).toBeDefined();
+        expect(resultStandard).toBeDefined();
+      });
+    });
+
+    describe('Email Variant Warnings', () => {
+      it('warns about video elements in email', () => {
+        const html = '<video src="video.mp4"></video>';
+        const result = sanitizeHTML(html, 'email');
+
+        console.log('DEBUG - Video test result:', JSON.stringify(result, null, 2));
+        expect(result.warnings).toBeDefined();
+        expect(Array.isArray(result.warnings)).toBe(true);
+        // Video warnings are added by addVariantWarnings function
+        const hasVideoWarning = result.warnings.some(w =>
+          w.message && w.message.includes('Video/audio')
+        );
+        expect(hasVideoWarning).toBe(true);
+      });
+
+      it('warns about audio elements in email', () => {
+        const html = '<audio src="audio.mp3"></audio>';
+        const result = sanitizeHTML(html, 'email');
+
+        expect(result.warnings).toBeDefined();
+        const hasAudioWarning = result.warnings.some(w =>
+          w.message && w.message.includes('Video/audio')
+        );
+        expect(hasAudioWarning).toBe(true);
+      });
+
+      it('warns about fixed positioning in email', () => {
+        const html = '<div style="position: fixed">Fixed</div>';
+        const result = sanitizeHTML(html, 'email');
+
+        expect(result.warnings).toBeDefined();
+        const hasPositionWarning = result.warnings.some(w =>
+          w.message && w.message.includes('Fixed/sticky positioning')
+        );
+        expect(hasPositionWarning).toBe(true);
+      });
+
+      it('warns about sticky positioning in email', () => {
+        const html = '<div style="position: sticky">Sticky</div>';
+        const result = sanitizeHTML(html, 'email');
+
+        expect(result.warnings).toBeDefined();
+        const hasPositionWarning = result.warnings.some(w =>
+          w.message && w.message.includes('Fixed/sticky positioning')
+        );
+        expect(hasPositionWarning).toBe(true);
+      });
+    });
+
+    describe('InApp Variant Warnings', () => {
+      it('provides info about tables in mobile', () => {
+        const html = '<table><tr><td>Data</td></tr></table>';
+        const result = sanitizeHTML(html, 'inapp');
+
+        expect(result.warnings).toBeDefined();
+        const hasTableInfo = result.warnings.some(w =>
+          w.message && w.message.includes('Tables may not be mobile-friendly')
+        );
+        expect(hasTableInfo).toBe(true);
+      });
+
+      it('suggests relative font sizes for mobile', () => {
+        const html = '<div style="font-size: 14px">Text</div>';
+        const result = sanitizeHTML(html, 'inapp');
+
+        expect(result.warnings).toBeDefined();
+        const hasFontInfo = result.warnings.some(w =>
+          w.message && w.message.includes('relative font sizes')
+        );
+        expect(hasFontInfo).toBe(true);
+      });
+    });
+
+    describe('Removed Elements Tracking', () => {
+      it('tracks removed forbidden tags', () => {
+        const html = '<script>alert(1)</script>';
+        const result = sanitizeHTML(html);
+
+        // When dangerous content is removed, isClean should be false
+        expect(result.isClean).toBe(false);
+        // removedElements array should exist
+        expect(Array.isArray(result.removedElements)).toBe(true);
+      });
+
+      it('tracks removed event handlers', () => {
+        const html = '<div onclick="alert(1)">Test</div>';
+        const result = sanitizeHTML(html);
+
+        // Content should be marked as not clean
+        expect(result.isClean).toBe(false);
+        expect(Array.isArray(result.removedElements)).toBe(true);
+      });
+
+      it('tracks removed javascript protocols', () => {
+        const html = '<a href="javascript:void(0)">Link</a>';
+        const result = sanitizeHTML(html);
+
+        // Content should be marked as not clean
+        expect(result.isClean).toBe(false);
+        expect(Array.isArray(result.removedElements)).toBe(true);
+      });
+    });
+
+    describe('Error Handling', () => {
+      it('handles DOMPurify errors gracefully', () => {
+        // Since we can't easily mock a one-time error with our plain function mock,
+        // we'll test the error path by ensuring the function handles edge cases
+        const result = sanitizeHTML(null);
+
+        // Should handle null gracefully
+        expect(result.sanitized).toBe('');
+        expect(result.isClean).toBe(true);
+        expect(Array.isArray(result.warnings)).toBe(true);
+      });
+    });
+
+    describe('Content Modification Detection', () => {
+      it('detects when content is modified', () => {
+        const html = '<script>alert(1)</script><p>Safe</p>';
+        const result = sanitizeHTML(html);
+
+        expect(result.isClean).toBe(false);
+      });
+
+      it('marks clean content as clean', () => {
+        const html = '<p>Clean content</p>';
+        const result = sanitizeHTML(html);
+
+        // Note: isClean will be true only if sanitized === html
+        expect(result).toBeDefined();
+      });
+    });
+  });
+
+  describe('prepareForProduction', () => {
+    it('sanitizes content with strict rules', () => {
+      const html = '<p>Production content</p>';
+      const result = prepareForProduction(html);
+
+      expect(result).toHaveProperty('content');
+      expect(result).toHaveProperty('isProductionReady');
+      expect(result).toHaveProperty('securityIssues');
+      expect(result).toHaveProperty('warnings');
+      expect(result).toHaveProperty('recommendations');
+    });
+
+    it('marks unsafe content as not production ready', () => {
+      const html = '<script>alert(1)</script><p>Content</p>';
+      const result = prepareForProduction(html);
+
+      expect(result.isProductionReady).toBe(false);
+      expect(result.recommendations.length).toBeGreaterThan(0);
+    });
+
+    it('provides recommendations for sanitized content', () => {
+      const html = '<script>alert(1)</script><p>Content</p>';
+      const result = prepareForProduction(html);
+
+      const sanitizeRec = result.recommendations.find(r =>
+        r.includes('sanitized')
+      );
+      expect(sanitizeRec).toBeDefined();
+    });
+
+    it('recommends inlining CSS for email', () => {
+      const html = '<style>.test{}</style><p>Email</p>';
+      const result = prepareForProduction(html, 'email');
+
+      const cssRec = result.recommendations.find(r =>
+        r.includes('inlining CSS')
+      );
+      expect(cssRec).toBeDefined();
+    });
+
+    it('warns about large content for inapp', () => {
+      const largeHtml = '<p>' + 'a'.repeat(50001) + '</p>';
+      const result = prepareForProduction(largeHtml, 'inapp');
+
+      const sizeRec = result.recommendations.find(r =>
+        r.includes('large')
+      );
+      expect(sizeRec).toBeDefined();
+    });
+
+    it('handles email variant', () => {
+      const html = '<p>Email content</p>';
+      const result = prepareForProduction(html, 'email');
+
+      expect(result.content).toBeDefined();
+    });
+
+    it('handles inapp variant', () => {
+      const html = '<p>InApp content</p>';
+      const result = prepareForProduction(html, 'inapp');
+
+      expect(result.content).toBeDefined();
+    });
+
+    it('defaults to email variant', () => {
+      const html = '<p>Default content</p>';
+      const result = prepareForProduction(html);
+
+      expect(result.content).toBeDefined();
+    });
+  });
+
+  describe('isContentSafe', () => {
+    it('returns true for safe content', () => {
+      const html = '<p>Safe content</p>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(true);
+    });
+
+    it('returns true for empty content', () => {
+      const result = isContentSafe('');
+
+      expect(result).toBe(true);
+    });
+
+    it('returns true for null content', () => {
+      const result = isContentSafe(null);
+
+      expect(result).toBe(true);
+    });
+
+    it('detects javascript: protocol', () => {
+      const html = '<a href="javascript:void(0)">Link</a>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects data: protocol', () => {
+      const html = '<img src="data:text/html,<script>alert(1)</script>">';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects vbscript: protocol', () => {
+      const html = '<a href="vbscript:msgbox">Link</a>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects script tags', () => {
+      const html = '<script>alert(1)</script>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects onclick handlers', () => {
+      const html = '<div onclick="alert(1)">Click</div>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects onload handlers', () => {
+      const html = '<body onload="alert(1)">Content</body>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects onerror handlers', () => {
+      const html = '<img src=x onerror="alert(1)">';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects onmouseover handlers', () => {
+      const html = '<div onmouseover="alert(1)">Hover</div>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects iframe tags', () => {
+      const html = '<iframe src="evil.com"></iframe>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects object tags', () => {
+      const html = '<object data="evil.swf"></object>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('detects embed tags', () => {
+      const html = '<embed src="evil.swf">';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+
+    it('is case insensitive', () => {
+      const html = '<SCRIPT>alert(1)</SCRIPT>';
+      const result = isContentSafe(html);
+
+      expect(result).toBe(false);
+    });
+  });
+
+  describe('findUnsafeContent', () => {
+    it('returns empty array for safe content', () => {
+      const html = '<p>Safe content</p>';
+      const result = findUnsafeContent(html);
+
+      expect(Array.isArray(result)).toBe(true);
+      expect(result).toHaveLength(0);
+    });
+
+    it('returns empty array for empty content', () => {
+      const result = findUnsafeContent('');
+
+      expect(result).toHaveLength(0);
+    });
+
+    it('returns empty array for null content', () => {
+      const result = findUnsafeContent(null);
+
+      expect(result).toHaveLength(0);
+    });
+
+    it('finds javascript protocol', () => {
+      const html = '<a href="javascript:void(0)">Link</a>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      expect(result[0].type).toBe('JavaScript Protocol');
+    });
+
+    it('finds data URLs', () => {
+      const html = '<img src="data:image/png,...">';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      expect(result[0].type).toBe('Data URL');
+    });
+
+    it('finds script tags', () => {
+      const html = '<script>alert(1)</script>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      const scriptTag = result.find(r => r.type === 'Script Tag');
+      expect(scriptTag).toBeDefined();
+    });
+
+    it('finds event handlers', () => {
+      const html = '<div onclick="alert(1)">Click</div>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      const eventHandler = result.find(r => r.type === 'Event Handler');
+      expect(eventHandler).toBeDefined();
+    });
+
+    it('finds iframe tags', () => {
+      const html = '<iframe src="evil.com"></iframe>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      const iframe = result.find(r => r.type === 'Iframe');
+      expect(iframe).toBeDefined();
+    });
+
+    it('finds object and embed tags', () => {
+      const html = '<object data="evil.swf"></object>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+      const objectTag = result.find(r => r.type === 'Object/Embed');
+      expect(objectTag).toBeDefined();
+    });
+
+    it('finds multiple unsafe patterns', () => {
+      const html = `
+        <script>alert(1)</script>
+        <div onclick="alert(2)">Click</div>
+        <iframe src="evil.com"></iframe>
+      `;
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(2);
+    });
+
+    it('includes content in results', () => {
+      const html = '<script>alert(1)</script>';
+      const result = findUnsafeContent(html);
+
+      expect(result[0]).toHaveProperty('content');
+      expect(result[0].content).toContain('script');
+    });
+
+    it('includes position in results', () => {
+      const html = '<p>Safe</p><script>alert(1)</script>';
+      const result = findUnsafeContent(html);
+
+      expect(result[0]).toHaveProperty('position');
+      expect(typeof result[0].position).toBe('number');
+    });
+
+    it('finds multiple occurrences of same pattern', () => {
+      const html = '<script>alert(1)</script><script>alert(2)</script>';
+      const result = findUnsafeContent(html);
+
+      const scriptTags = result.filter(r => r.type === 'Script Tag');
+      expect(scriptTags.length).toBe(2);
+    });
+
+    it('is case insensitive', () => {
+      const html = '<SCRIPT>alert(1)</SCRIPT>';
+      const result = findUnsafeContent(html);
+
+      expect(result.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('sanitizes and validates content in sequence', () => {
+      const html = '<script>alert(1)</script><p>Safe content</p>';
+
+      const isSafe = isContentSafe(html);
+      expect(isSafe).toBe(false);
+
+      const unsafe = findUnsafeContent(html);
+      expect(unsafe.length).toBeGreaterThan(0);
+
+      const sanitized = sanitizeHTML(html);
+      expect(sanitized.sanitized).not.toContain('script');
+
+      const preparedResult = prepareForProduction(html);
+      expect(preparedResult.isProductionReady).toBe(false);
+    });
+
+    it('handles complex email template', () => {
+      const html = `
+        <html>
+          <head>
+            <style>.header{color:blue}</style>
+          </head>
+          <body>
+            <table>
+              <tr><td>Email Content</td></tr>
+            </table>
+          </body>
+        </html>
+      `;
+
+      const result = sanitizeHTML(html, 'email');
+      expect(result.sanitized).toBeDefined();
+    });
+
+    it('handles complex inapp template', () => {
+      const html = `
+        <div style="font-size: 16px">
+          <video src="video.mp4"></video>
+          <table><tr><td>Data</td></tr></table>
+        </div>
+      `;
+
+      const result = sanitizeHTML(html, 'inapp');
+      expect(result.warnings.length).toBeGreaterThan(0);
+    });
+  });
+});
+