JAVASCRIPT
Safely Sanitize User HTML Input Before Displaying in DOM
Protect your web application from Cross-Site Scripting (XSS) attacks by learning how to securely sanitize untrusted HTML input using a temporary DOM element.
/**
* Sanitizes a string to prevent XSS attacks by converting HTML entities.
* This method is effective because setting textContent escapes HTML.
* @param {string} rawString The potentially unsafe string.
* @returns {string} The sanitized string, safe for display.
*/
function sanitizeHTML(rawString) {
if (typeof rawString !== 'string') {
return ''; // Or throw an error, depending on desired behavior
}
const tempDiv = document.createElement('div');
// Setting textContent automatically escapes HTML entities
tempDiv.textContent = rawString;
// Reading innerHTML gives the escaped string
return tempDiv.innerHTML;
}
// Usage examples:
// const unsafeInput = "<img src=x onerror=alert('XSS!')>";
// const safeOutput = sanitizeHTML(unsafeInput);
// console.log(safeOutput); // <img src="x" onerror="alert('XSS!')">
// To display:
// const displayElement = document.getElementById('output');
// if (displayElement) {
// displayElement.innerHTML = safeOutput; // Safe to use innerHTML now
// }
// const userInput = "<p>Hello <b>world</b>!</p><script>alert('evil');</script>";
// const sanitizedUserInput = sanitizeHTML(userInput);
// console.log(sanitizedUserInput); // <p>Hello <b>world</b>!</p><script>alert('evil');</script>
How it works: This snippet provides a robust method to prevent Cross-Site Scripting (XSS) attacks by sanitizing untrusted user input before displaying it in the DOM. It leverages a temporary `div` element: by setting the raw, potentially unsafe string to `textContent`, the browser automatically escapes all HTML entities. Reading the `innerHTML` of this temporary element then yields a safe string suitable for display, preventing malicious scripts from executing.