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エスケープはWebセキュリティとデータ表示に不可欠です。セキュリティ監査でのXSS脆弱性への対処や、ユーザー生成コンテンツを安全に表示する必要性から、このツールを作成しました。フォーム入力のサニタイズ、テンプレートエンジンのデバッグ、JSON/XMLシリアライゼーション用のデータ準備、Webセキュリティ概念の教育など、適切なHTMLエンティティエンコーディングは不可欠です。このツールは3つのエンティティ形式をサポートしています：名前付きエンティティ（<、>）、10進数エンティティ（<、>）、16進数エンティティ（<、>）—それぞれ異なるコンテキストで有用です。すべての処理はブラウザ内で行われるため、サーバーにデータを送信せずに機密コンテンツを安全に処理できます。
How to Use
エスケープの場合：特殊文字を含むHTMLまたはテキストを入力パネルに貼り付けます。ツールは<、>、&、\"、'などの文字をリアルタイムでHTMLエンティティに自動変換します。好みのエンティティ形式を選択：名前付き（最も読みやすい、例：&）、10進数（広く互換性あり、例：&）、または16進数（コンパクト、例：&）。\"改行を保持\"を切り替えて改行を保持または削除します。アンエスケープの場合：エンティティを含むHTMLを貼り付けると、ツールが元の文字にデコードします。\"すべての文字をエンコード\"オプションは、特殊文字以外もエスケープし、エッジケースでの最大互換性に役立ちます。
Limitations & Important Notes
このツールはHTML5仕様で定義されたHTMLエンティティを処理します。潜在的に危険なHTML属性（onclick、onerrorなど）やJavaScriptコードは削除またはサニタイズしません—文字表現のみをエスケープします。真のXSS防止には、エスケープとコンテンツセキュリティポリシー（CSP）および入力検証を組み合わせてください。ツールはUTF-8エンコーディングを想定しています。他のエンコーディングでは予期しない結果が生じる可能性があります。非常に大きなドキュメント（>5MB）の場合、ブラウザのメモリ制限によりパフォーマンスが低下する可能性があります。エンティティエンコーディングはテキストサイズを増加させます。帯域幅制約のあるシナリオには適していません。