HTMLエスケープ
HTMLの特殊文字をエスケープ・アンエスケープします。XSS対策やHTMLソース表示に便利です。
| 文字 | エスケープ後 | 文字 | エスケープ後 |
|---|---|---|---|
| < | < | > | > |
| & | & | " | " |
| ' | ' |
使い方
- テキストを入力 — HTML タグや特殊文字を含むテキストを入力欄に貼り付けます。ユーザー入力・コードサンプル・記事本文などをそのままコピー可能。
- エスケープを実行 — 「エスケープ」ボタンで
< > & " 'の 5 種類の特殊文字を実体参照に変換。XSS 対策の基本処理として必須。 - アンエスケープで復元 — 「アンエスケープ」ボタンで実体参照を元の文字に戻します。Web ページから取得したエスケープ済 HTML を読み解く際に活用。
- 入出力を入替 — 「入出力を入替」で出力テキストを入力欄にコピー。エスケープ → アンエスケープ → 確認のループを素早く繰り返せます。
- 結果をクリップボードへ — 「コピー」ボタンで変換結果をクリップボードに保存。HTML テンプレート・ブログ記事・Slack 共有に即活用。
こんな場面で使えます
- XSS 対策の動作確認 — ユーザー入力をエスケープしてレンダリング後の表示を事前検証
- ブログ記事に HTML サンプル掲載 — <div> などのタグを記事本文に書く際にエスケープして文字として表示
- テンプレートエンジン出力の検証 — Jinja2 / EJS の出力を手動で再現してエスケープ漏れを発見
- API レスポンスのデコード — エスケープ済 HTML を含む JSON レスポンスから元の文字列を復元
- メール本文の HTML 化 — メール作成時にユーザー入力を安全に HTML body に埋め込み
よくある質問
HTML エスケープとは何ですか？
HTML エスケープは、< > & " ' などの HTML 特殊文字を < > & などの実体参照 (Character Reference) に変換する処理です。XSS (Cross-Site Scripting) 攻撃の防止や、HTML ソースコードを記事本文に表示する用途に使用されます。
どの文字がエスケープされますか？
< → <、> → >、& → &、" → "、' → ' の 5 種類が一般的な HTML エスケープ対象です。
エスケープされた HTML を元に戻せますか？
はい、「アンエスケープ」ボタンで実体参照を元の文字に戻せます。Web ページソースから取得した HTML を読み解く際や、ログに含まれるエスケープ済データを確認する場面で便利です。
いつエスケープすべきですか？
ユーザー入力を HTML として表示する全ての場面で必須です。コメント欄の表示・検索クエリのハイライト・URL クエリパラメータの埋め込みなど。テンプレートエンジンは通常自動エスケープしますが、属性値内 (href / onclick) や <script> ブロック内では別ルールが必要なため、本ツールで動作確認すると安心です。
テンプレートエンジンの自動エスケープに任せて大丈夫ですか？
本文 (要素内テキスト) は大抵自動エスケープされますが、属性値内 (特に href / src / onclick)、<script> ブロック内、CSS の url() 内はエスケープ規則が異なります。出力箇所のコンテキストに応じてエスケープ関数を選ぶ習慣をつけることが XSS 対策の基本。詳細は OWASP XSS Prevention Cheat Sheet を参照。
日本語や絵文字は変換されますか？
いいえ、本ツールは 5 種類の特殊文字のみエスケープします。日本語・絵文字・記号 (©、® 等) は UTF-8 でそのまま扱えるため変換不要です。© のような名前付き実体参照は読み手のレガシーブラウザ互換性が必要な場合のみ手動で書き換えます。
数値文字参照 (&#xxx;) と名前付き参照のどちらを使いますか？
本ツールは ' のみ数値参照 (') を使い、他は名前付き参照 (< > & ") を使います。HTML5 では両方有効ですが、apos はレガシーブラウザで互換性問題があるため ' が安全。コード内では好みで統一してください。
逆方向の脱出 (XSS) を試したいときは？
アンエスケープ → ブラウザでレンダリング、の流れで動作確認できます。ただし攻撃用ペイロード (例: <script>alert(1)</script>) を別環境で実行することは、自分のテスト環境内に限定してください。本番サイトへの注入は犯罪 (不正アクセス禁止法) になります。
開発者ツールの全体像
本ツール (HTML エスケープ) は 開発者ツール活用ガイド (sub-Pillar) の一部です。エンコード系・ハッシュ・正規表現テスト・JSON 整形など 6 ツールの使い分けと、XSS 対策の OWASP 推奨アプローチを Pillar ガイドで体系的に確認できます。