🔧 Fixing HTML Encoding & Escaping Errors

Example Error & Fix

// Insecure unescaped user output
element.innerHTML = "<div>" + userInput + "</div>";

// Secure textContent or encoded output
element.textContent = userInput;

💡 Explanation: Assigning raw unencoded user strings to innerHTML allows script execution. Use textContent or HTML entity encoding.

Common Root Causes

• Double encoding existing entities (converting `<` into `<`).
• Forgetting to escape single quotes inside HTML attributes.

Recommended Solutions

• Encode raw user inputs only once before embedding in templates.
• Use modern framework auto-escaping (React JSX escapes text nodes automatically).