Sanitizing HTML for XSS with DOMPurify in JavaScript

// Assume DOMPurify library is loaded, e.g., via CDN or npm import
// <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/purify.min.js"></script>

/**
 * Safely sanitizes user-provided HTML content to prevent XSS attacks.
 * @param {string} dirtyHTML The potentially unsafe HTML string from user input.
 * @returns {string} The sanitized HTML string, safe for display.
 */
function sanitizeUserHtml(dirtyHTML) {
    // Ensure DOMPurify is available
    if (typeof DOMPurify === 'undefined') {
        console.error('DOMPurify is not loaded. Please include the library.');
        return '';
    }

    // DOMPurify.sanitize takes a string and returns a purified string
    // It removes known malicious elements and attributes
    const cleanHTML = DOMPurify.sanitize(dirtyHTML, {
        USE_PROFILES: { html: true }, // Use the HTML profile
        FORBID_TAGS: ['style', 'script'], // Explicitly forbid <style> and <script> tags
        FORBID_ATTR: ['onerror', 'onload', 'onmouseover'], // Explicitly forbid common event handlers
        ALLOW_DATA_ATTR: false, // Disallow data- attributes by default
        RETURN_TRUSTED_TYPE: false // Set to true if working with Trusted Types API
    });
    return cleanHTML;
}

// --- Example Usage ---
const userComment = `
    <p>Hello, this is a <strong>safe</strong> comment.</p>
    <img src="x" onerror="alert('XSS!')"> <!-- Malicious script -->
    <a href="javascript:alert('Another XSS!')">Click me</a>
    <p style="color:red;">Some styled text.</p>
    <div onmouseover="console.log('Mouse over!')">Hover here</div>
    <script>alert('Inline script XSS!');</script>
    <iframe src="malicious-site.com"></iframe>
    <details open><summary>Details</summary><p>More info</p></details>
`;

const displayArea = document.getElementById('user-content-display');
if (!displayArea) {
    console.error('Element with ID "user-content-display" not found.');
    // For demonstration, create a dummy div if not found
    const tempDiv = document.createElement('div');
    tempDiv.id = 'user-content-display';
    document.body.appendChild(tempDiv);
    displayArea = tempDiv;
}

// Sanitize the user input
const safeHtml = sanitizeUserHtml(userComment);
console.log('Original HTML:
', userComment);
console.log('Sanitized HTML:
', safeHtml);

// Display the sanitized content
displayArea.innerHTML = safeHtml;
displayArea.style.border = '1px solid #ccc';
displayArea.style.padding = '10px';
displayArea.style.marginTop = '20px';
displayArea.style.fontFamily = 'monospace';
displayArea.style.whiteSpace = 'pre-wrap';
displayArea.innerHTML = `<h2>Original Input:</h2>${userComment}<hr><h2>Sanitized Output:</h2>${safeHtml}`;


// Example with different options
const moreLenientHtml = `
    <p>This is <strong style="font-size: 20px;">styled</strong> content.</p>
    <img src="valid-image.jpg" alt="Description">
    <svg/onload=alert(1)>
`;

// A more lenient purification, allowing some styles and specific data attributes if needed
// (Use with extreme caution and only if absolutely necessary)
// const lenientSanitizedHtml = DOMPurify.sanitize(moreLenientHtml, {
//     FORBID_TAGS: [], // Allow all tags but sanitize their attributes
//     ALLOW_ATTR: ['style', 'alt', 'src', 'href'], // Explicitly allow only these attributes
//     ADD_TAGS: ['iframe', 'svg'], // Allow iframes and svgs, but DOMPurify will still purify their content
//     KEEP_CONTENT: false // Remove content of forbidden tags
// });
// console.log('
More Lenient Sanitized HTML:
', lenientSanitizedHtml);