HTMLエスケープ/アンエスケープ
HTML特殊文字(< > & " ')のエスケープ・アンエスケープをリアルタイム変換。ブラウザ完結でサーバー送信なし、ワンクリックコピー対応の無料オンラインツール。
HTML特殊文字(< > & " ')のエスケープ・アンエスケープをリアルタイム変換するツールです。
結果がここに表示されます...
&→&<→<>→>"→"'→'// 詳細
XSS対策の重要性
クロスサイトスクリプティング(XSS)は、Webアプリケーションの脆弱性の中で最も一般的な攻撃の一つです。ユーザー入力をエスケープせずにHTMLに出力すると、攻撃者が悪意あるスクリプトを注入できてしまいます。HTMLエスケープはXSS対策の基本中の基本であり、ユーザー入力を表示する全ての箇所で実施する必要があります。
フレームワークの自動エスケープ
React、Vue、Angularなどのモダンなフレームワークは、デフォルトでHTMLエスケープを自動的に行います。ただし、dangerouslySetInnerHTML(React)やv-html(Vue)のようにエスケープを無効化するAPIも提供されており、これらを使用する際は入力のサニタイズを自分で行う必要があります。
エスケープが必要な5文字
HTMLで特別な意味を持つ5つの文字は「<」(<)、「>」(>)、「&」(&)、「"」(")、「'」(')です。「<」と「>」はタグの開始・終了、「&」は文字参照の開始、「"」と「'」は属性値の区切りとして解釈されるため、テキストとして表示する際はエスケープが必要です。
// FAQ
- HTMLエスケープとは何ですか?
- HTMLエスケープとは、HTMLで特別な意味を持つ文字(< > & " ')を文字参照(< > & " ')に変換することです。これにより、HTMLタグとして解釈されることを防ぎ、テキストとして安全に表示できます。
- なぜHTMLエスケープが必要ですか?
- HTMLエスケープを行わないと、ユーザー入力がHTMLタグとして解釈され、XSS(クロスサイトスクリプティング)攻撃の原因になります。Webアプリケーション開発では、ユーザー入力を表示する際に必ずエスケープ処理が必要です。
- アンエスケープはどのような場面で使いますか?
- アンエスケープは、エスケープ済みのHTMLソースコードを元のテキストに戻す際に使用します。例えば、APIレスポンスやデータベースからエスケープ済みのHTMLを取得した場合に、元の文字に復元するために使います。
- 数値文字参照と文字実体参照の違いは何ですか?
- 数値文字参照(<や<)は文字のコードポイントで指定する方法、文字実体参照(<)は名前で指定する方法です。どちらも同じ文字を表しますが、文字実体参照の方が読みやすく広く使われています。
// 使い方
-
テキストを入力
入力欄にエスケープまたはアンエスケープしたいテキストを入力します。
-
モードを選択
エスケープ(特殊文字→文字参照)またはアンエスケープ(文字参照→特殊文字)モードを選択します。
-
結果をコピー
リアルタイムで変換結果が表示されます。COPYボタンでクリップボードにコピーできます。