HTMLエスケープツール
HTML/XMLの特殊文字をエスケープ・アンエスケープするツール。XSS対策、コード表示、データ変換に便利。
HTML/XMLの特殊文字（<, >, &, ", ')をHTMLエンティティに変換します。
エスケープ対象の文字一覧
| 文字 | HTMLエンティティ | 説明 |
|---|---|---|
| < | < | 小なり（Less Than） |
| > | > | 大なり（Greater Than） |
| & | & | アンパサンド（Ampersand） |
| " | " | ダブルクォート（Double Quote） |
| ' | ' または ' | シングルクォート（Single Quote） |
使い方のヒント
- • テキストを入力して、エスケープまたはアンエスケープボタンをクリックします
- • エスケープ: HTML特殊文字をエンティティに変換します（XSS対策に有効）
- • アンエスケープ: HTMLエンティティを元の特殊文字に戻します
- • 統計情報で変換された文字数を確認できます
HTMLエスケープとは？
HTMLエスケープは、HTML内で特別な意味を持つ文字（<, >, &, ", '）を、 HTMLエンティティに変換することで、タグとして解釈されないようにする処理です。
- XSS（クロスサイトスクリプティング）攻撃の防止
- HTMLコードのサンプル表示
- ユーザー入力のサニタイジング
- XMLデータのエスケープ
- HTMLメールでのコード例の表示
注意事項
- • HTMLエスケープはXSS対策の基本ですが、コンテキストに応じた適切なエスケープが必要です
- • JavaScript内やCSS内で使用する場合は、HTMLエスケープだけでは不十分な場合があります
- • このツールはブラウザ上で動作し、データは外部に送信されません
こんな人におすすめ
- ✓HTMLタグをそのまま表示したいWeb制作者の方
- ✓ユーザー入力のサニタイジング処理を行う開発者の方
- ✓XSS（クロスサイトスクリプティング）対策を実装するセキュリティエンジニアの方
- ✓XMLデータを安全にHTMLに埋め込みたいフロントエンド開発者の方
- ✓コード例を記事に掲載したいテクニカルライターの方
- ✓HTMLメールでタグを表示したいマーケティング担当者の方
HTMLエスケープツールの使い方
- テキストボックスにエスケープまたはアンエスケープしたいテキストを入力または貼り付けます
- 「エスケープ」モードを選択すると、HTML特殊文字（<, >, &, ", '）がHTMLエンティティに変換されます
- 「アンエスケープ」モードを選択すると、HTMLエンティティを元の特殊文字に戻します
- 変換結果は自動的に表示され、コピーボタンでクリップボードにコピーできます
- 統計情報では、変換された文字数と全体の文字数を確認できます
HTMLエスケープツールの活用シーン
XSS攻撃の防止
ユーザーが入力したテキストをHTMLに表示する際、エスケープせずに出力すると、悪意のあるJavaScriptコードが実行されるXSS攻撃のリスクがあります。HTMLエスケープツールでユーザー入力をエスケープすることで、タグやスクリプトを無害化し、安全に表示できます。
HTMLコードのサンプル表示
ブログやドキュメントでHTMLコードの例を掲載する場合、通常はブラウザがタグとして解釈してしまいます。HTMLエスケープツールを使ってタグをエンティティに変換することで、<div>や<script>などのタグをそのまま文字列として表示できます。
フォーム入力のサニタイジング
お問い合わせフォームやコメント機能で、ユーザーが入力したテキストにHTMLタグが含まれている場合、エスケープしてからデータベースに保存することで、XSS攻撃や意図しないHTMLレンダリングを防げます。出力時にも再度エスケープすることで二重の防御が可能です。
XMLデータの埋め込み
XMLはHTMLと同じくタグ形式のマークアップ言語ですが、< > & などの特殊文字をそのまま使うと構文エラーになります。XMLデータをHTMLに埋め込む場合や、XMLファイルを生成する際に、特殊文字をエスケープする必要があります。
メールテンプレートの作成
HTMLメールでプログラミングのコード例や製品の仕様（<size>など）を記載する場合、メールクライアントがタグとして解釈しないように、HTMLエンティティに変換する必要があります。エスケープすることで、意図した通りの表示が可能になります。
よくある質問（FAQ）
- Q: HTMLエスケープとは何ですか？
- A: HTMLエスケープは、HTML内で特別な意味を持つ文字（<, >, &, ", '）を、HTMLエンティティ（<, >, &, ", '）に変換することです。これにより、タグとして解釈されずに文字列として表示されます。
- Q: なぜHTMLエスケープが必要ですか？
- A: ユーザー入力をそのままHTMLに出力すると、悪意のあるスクリプトが実行されるXSS（クロスサイトスクリプティング）攻撃のリスクがあります。HTMLエスケープでタグを無害化することで、セキュリティを確保できます。また、HTMLコードをそのまま表示したい場合にも必要です。
- Q: エスケープされる文字は何ですか？
- A: 主な対象は、< (小なり: <)、> (大なり: >)、& (アンパサンド: &)、" (ダブルクォート: ")、' (シングルクォート: ') の5つです。これらはHTMLタグや属性で特別な意味を持つため、エスケープが必要です。
- Q: アンエスケープとは何ですか？
- A: アンエスケープは、HTMLエンティティ（<, >など）を元の特殊文字（<, >など）に戻す処理です。データベースに保存されたエスケープ済みのテキストを編集可能な形式に戻す場合や、HTMLメールのソースコードを確認する際に使用します。
- Q: XMLでも使用できますか？
- A: はい、HTMLとXMLは基本的に同じエスケープルール（<, >, &, ", '）を共有しているため、XMLデータのエスケープにも使用できます。特にXML属性値内では、ダブルクォートやシングルクォートのエスケープが重要です。
- Q: エスケープとサニタイジングの違いは何ですか？
- A: エスケープは特殊文字をエンティティに変換する処理で、元のテキストをそのまま表示できます。サニタイジングは、危険な要素（<script>タグなど）を完全に削除する処理です。エスケープは保存性が高く、アンエスケープで元に戻せますが、サニタイジングは不可逆的です。
- Q: JavaScriptでHTMLエスケープするには？
- A: 最も安全な方法は、textContentやinnerTextを使う方法です。またはDOMParserやtextareaの.valueプロパティを使う方法もあります。ライブラリではDOMPurifyやhe.jsが人気です。このツールと同じロジックを実装する場合は、正規表現で置換する方法もあります。