HTML Sanitization to Prevent XSS Attacks in JavaScript

// First, ensure DOMPurify is loaded in your project.
// Via CDN: <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>
// Via npm: import DOMPurify from 'dompurify';

function sanitizeUserInput(inputString) {
  if (typeof DOMPurify === 'undefined') {
    console.error('DOMPurify is not loaded. Please include it in your project.');
    return inputString; // Fallback, but insecure
  }
  // Sanitize the HTML string
  const cleanHtml = DOMPurify.sanitize(inputString, {
    USE_PROFILES: { html: true }, // Ensure basic HTML is allowed if needed
    FORBID_TAGS: ['script'], // Explicitly forbid script tags
    FORBID_ATTR: ['onerror', 'onload', 'onmouseover'], // Forbid common event handlers
    // Add other configuration options as per your security policy
    // e.g., ALLOW_TAGS, ALLOW_ATTR, ADD_TAGS, ADD_ATTR, etc.
  });
  return cleanHtml;
}

// Example Usage:
const maliciousInput = '<img src="x" onerror="alert(\'XSS Attack!\')">Hello <script>alert("You are hacked!");</script> World!';
const benignInput = '<h1>Welcome!</h1><p>Here is some <b>safe</b> content.</p>';

const sanitizedMalicious = sanitizeUserInput(maliciousInput);
const sanitizedBenign = sanitizeUserInput(benignInput);

console.log('Original malicious:', maliciousInput);
console.log('Sanitized malicious:', sanitizedMalicious);
// document.getElementById('output').innerHTML = sanitizedMalicious; // Displaying sanitized content

console.log('Original benign:', benignInput);
console.log('Sanitized benign:', sanitizedBenign);
// document.getElementById('output2').innerHTML = sanitizedBenign; // Displaying sanitized content

// Example with potentially dangerous link:
const dangerousLink = '<a href="javascript:alert(1)">Click Me</a>';
console.log('Sanitized dangerous link:', sanitizeUserInput(dangerousLink));