Sanitize HTML Input to Prevent XSS Attacks

// Install: npm install dompurify jsdom
// Note: DOMPurify requires a DOM environment. For Node.js, JSDOM is used to simulate a browser environment.
const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

// Create a JSDOM window object for DOMPurify to operate in
const window = new JSDOM('').window;
const DOMPurify = createDOMPurify(window);

// Untrusted user input (e.g., from a rich text editor or comments)
const untrustedHTML = `
  <img src="x" onerror="alert('XSS Attack!')">
  <p>Hello, <script>alert('Another XSS!')</script> user!</p>
  <a href="javascript:alert('Even more XSS!')">Click Me</a>
  <iframe src="malicious.com"></iframe>
  <p style="color:red;">This is fine.</p>
  <div onmouseover="alert('Mouse over XSS!')">Hover here</div>
`;

console.log('Original HTML:
', untrustedHTML);

// Sanitize the HTML using DOMPurify
const cleanHTML = DOMPurify.sanitize(untrustedHTML, {
  USE_PROFILES: { html: true }, // Ensure HTML profile is used
  // FORBID_ATTR: ['style'], // Optional: disallow specific attributes like inline styles
  // FORBID_TAGS: ['iframe', 'script'], // Optional: disallow specific tags
});

console.log('
--- Sanity Check ---
');
console.log('Clean HTML:
', cleanHTML);

// Example with custom options to allow certain attributes while forbidding others
const customOptionsHTML = `<p><a href="http://example.com" target="_blank">Safe Link</a><span onfocus="alert('Bad focus!')">Focus here</span></p>`;
const cleanWithOptions = DOMPurify.sanitize(customOptionsHTML, {
  ADD_ATTR: ['target'], // Allow the 'target' attribute for 'a' tags
  FORBID_TAGS: ['span'], // Disallow 'span' tags altogether
  FORBID_ATTR: ['onfocus'] // Forbid the 'onfocus' attribute globally
});
console.log('
Clean HTML with custom options:
', cleanWithOptions);