HTML Escape / Unescape

HTML Escape is the process of converting special HTML characters (like <, >, &, ") into HTML entities (like &lt;, &gt;, &amp;, &quot;).

Unescape is the reverse process, converting HTML entities back to their original characters.

Why Do We Need HTML Escaping?

• Prevent XSS (Cross-Site Scripting): Escaping is the first line of defense against XSS attacks. It prevents malicious HTML/JavaScript injection and is essential when displaying user-generated content.
• Display HTML Code as Text: Show HTML examples in documentation, render code snippets on web pages, or debug template engines.
• Data Serialization: Safely embed HTML in JSON/XML, prepare content for API responses, or store HTML in databases.
• Email & Header Safety: Escape special characters in email subjects, prepare data for HTTP headers, or handle form data correctly.

Entity Format Comparison

Code Examples

JavaScript (Browser)

// Escape HTML
function escapeHtml(text) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#039;'
  };
  return text.replace(/[&<>"']/g, m => map[m]);
}

// Unescape HTML
function unescapeHtml(html) {
  const doc = new DOMParser().parseFromString(html, 'text/html');
  return doc.documentElement.textContent;
}

// Usage
const escaped = escapeHtml('<script>alert("XSS")</script>');
console.log(escaped); 
// &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

Node.js (using 'he' library)

const he = require('he');

// Encode
const encoded = he.encode('<div class="test">Hello & goodbye</div>');
console.log(encoded); 
// &lt;div class=&quot;test&quot;&gt;Hello &amp; goodbye&lt;/div&gt;

// Decode
const decoded = he.decode('&lt;div&gt;Hello&lt;/div&gt;');
console.log(decoded); // <div>Hello</div>

// Different formats
he.encode('<tag>', { useNamedReferences: true });  // &lt;tag&gt;
he.encode('<tag>', { decimal: true });             // &#60;tag&#62;
he.encode('<tag>', { hexadecimal: true });         // &#x3C;tag&#x3E;

Python

import html

# Escape
escaped = html.escape('<script>alert("XSS")</script>')
print(escaped)  
# &lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;

# Unescape
unescaped = html.unescape('&lt;div&gt;Hello&lt;/div&gt;')
print(unescaped)  # <div>Hello</div>

Security Best Practices

Common Use Cases

• XSS Prevention: Escape user input before displaying:<script>alert('XSS')</script> →<script>alert('XSS')</script>
• Displaying Code: Show HTML code examples on web pages by escaping tags.
• JSON with HTML: Prepare HTML fragments for JSON serialization.
• Email Content: Escape special characters in email subjects and headers.
• Template Debugging: Unescape rendered template output to see actual HTML.