HTML Escape is the process of converting special HTML characters (like <, >, &, ") into HTML entities (like <, >, &, ").
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
| Character | Named Entity | Decimal Entity | Hex Entity |
|---|---|---|---|
| < | < | < | < |
| > | > | > | > |
| & | & | & | & |
| " | " | " | " |
| ' | ' | ' | ' |
Code Examples
JavaScript (Browser)
// Escape HTML
function escapeHtml(text) {
const map = {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
};
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);
// <script>alert("XSS")</script>Node.js (using 'he' library)
const he = require('he');
// Encode
const encoded = he.encode('<div class="test">Hello & goodbye</div>');
console.log(encoded);
// <div class="test">Hello & goodbye</div>
// Decode
const decoded = he.decode('<div>Hello</div>');
console.log(decoded); // <div>Hello</div>
// Different formats
he.encode('<tag>', { useNamedReferences: true }); // <tag>
he.encode('<tag>', { decimal: true }); // <tag>
he.encode('<tag>', { hexadecimal: true }); // <tag>Python
import html
# Escape
escaped = html.escape('<script>alert("XSS")</script>')
print(escaped)
# <script>alert("XSS")</script>
# Unescape
unescaped = html.unescape('<div>Hello</div>')
print(unescaped) # <div>Hello</div>Security Best Practices
⚠️ Important Security Notes:
- Escaping is NOT Enough: Combine with Content Security Policy (CSP) and backend validation.
- Context Matters: Use appropriate escaping for HTML content, JavaScript strings, URLs, and SQL.
- Don't Trust User Input: Always validate and sanitize on both client and server side.
- Use Framework Built-ins: React, Vue, and Angular escape by default—leverage these features.
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.
HTML escaping sangat penting untuk keamanan web dan tampilan data. Saya membuat tool ini setelah menangani banyak kerentanan XSS saat audit keamanan dan perlu menampilkan konten user-generated dengan aman. Baik untuk sanitasi input form, debugging template engine, menyiapkan data untuk serialisasi JSON/XML, atau mengajarkan konsep keamanan web, encoding entitas HTML yang tepat sangat penting. Tool ini mendukung tiga format entitas: named entities (<, >), decimal entities (<, >), dan hexadecimal entities (<, >)—masing-masing berguna dalam konteks berbeda. Semua pemrosesan terjadi di browser Anda, aman untuk menangani konten sensitif tanpa mengirim data ke server.
How to Use
Untuk escaping: paste HTML atau teks yang mengandung karakter khusus ke panel input. Tool secara otomatis mengkonversi karakter seperti <, >, &, ", dan ' ke entitas HTML secara real-time. Pilih format entitas: Named (paling mudah dibaca, misal &), Decimal (kompatibilitas luas, misal &), atau Hexadecimal (ringkas, misal &). Toggle 'Keep Line Breaks' untuk mempertahankan atau menghapus baris baru. Untuk unescaping: paste HTML dengan entitas dan tool akan decode kembali ke karakter asli. Opsi 'Encode All Characters' meng-escape bahkan karakter non-khusus, berguna untuk kompatibilitas maksimum.
Common Use Cases
Pencegahan XSS
Escape input user sebelum ditampilkan: '<script>alert(XSS)</script>' menjadi '<script>alert(XSS)</script>'.
Debugging Template
Unescape output template untuk melihat HTML yang sebenarnya.
JSON String Escaping
Siapkan fragmen HTML untuk serialisasi JSON dengan escape quotes dan karakter khusus.
Menampilkan Kode
Tampilkan contoh kode HTML di halaman web dengan escape tag agar muncul sebagai teks.
Email HTML
Escape karakter khusus di subjek atau header email.
Penyimpanan Database
Escape HTML sebelum disimpan di field teks untuk mencegah masalah rendering.
Limitations & Important Notes
Tool ini menangani entitas HTML yang didefinisikan dalam spesifikasi HTML5. Tool TIDAK menghapus atau sanitasi atribut HTML berbahaya (seperti 'onclick', 'onerror') atau kode JavaScript—hanya meng-escape representasi karakter. Untuk pencegahan XSS yang sesungguhnya, kombinasikan escaping dengan Content Security Policy (CSP) dan validasi input. Tool mengasumsikan encoding UTF-8; encoding lain mungkin menghasilkan hasil yang tidak terduga. Untuk dokumen sangat besar (>5MB), keterbatasan memori browser dapat menyebabkan perlambatan. Encoding entitas meningkatkan ukuran teks; tidak ideal untuk skenario dengan bandwidth terbatas.