JAVASCRIPT
Preventing XSS with HTML Escaping
Learn how to effectively sanitize user-generated input by escaping HTML special characters in JavaScript, a crucial step to prevent Cross-Site Scripting (XSS) vulnerabilities when rendering content.
/**
* Escapes HTML special characters in a string to prevent XSS attacks.
* @param {string} str The string to escape.
* @returns {string} The escaped string.
*/
function escapeHtml(str) {
if (typeof str !== 'string') {
return ''; // Or throw an error, depending on desired behavior
}
const div = document.createElement('div');
div.appendChild(document.createTextNode(str));
return div.innerHTML;
/* // Alternative using replace:
return str
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
*/
}
// --- Example Usage ---
const userInput = "<script>alert('You\'ve been hacked!');</script>";
const safeOutput = escapeHtml(userInput);
console.log("Original Input:", userInput);
console.log("Escaped Output:", safeOutput); // <script>alert('You've been hacked!');</script>
// To demonstrate rendering safely:
const outputDiv = document.createElement('div');
outputDiv.innerHTML = safeOutput; // This will display the escaped string, not execute the script
document.body.appendChild(outputDiv);
// Another example:
const userComment = "Hello, this is a <strong>bold</strong> comment with <a href='javascript:alert(1)'>a malicious link</a>.";
const safeComment = escapeHtml(userComment);
const commentDiv = document.createElement('div');
commentDiv.innerHTML = safeComment;
document.body.appendChild(commentDiv);
How it works: Cross-Site Scripting (XSS) attacks occur when an attacker injects malicious client-side scripts into web pages viewed by other users. This JavaScript snippet provides a simple `escapeHtml` function to prevent XSS. It works by converting HTML special characters (like `<`, `>`, `&`, `"`, `'`) into their corresponding HTML entities. When user-generated content is passed through this function before being rendered into the DOM (e.g., using `innerHTML`), the browser interprets the malicious script as harmless text rather than executable code, thereby neutralizing the attack.