変換モード
入力(HTML)
出力(エスケープ済み)
変更箇所のハイライト
変換すると、ここに差分が表示されます
変換対象の特殊文字
| 文字 | エンティティ | 説明 |
|---|---|---|
| & | & | アンパサンド |
| < | < | 小なり(タグ開始) |
| > | > | 大なり(タグ終了) |
| " | " | ダブルクォート |
| ' | ' | シングルクォート |
HTMLエスケープとは?なぜ必要なのか
HTMLエスケープとは、HTML文書内で特別な意味を持つ文字(<, >, &, ", ')を、対応する文字参照(エンティティ)に変換する処理です。
たとえば <script> をそのままHTMLに埋め込むと、ブラウザはそれをJavaScriptタグとして解釈してしまいます。エスケープによって <script> に変換すれば、ブラウザは単なるテキストとして安全に表示します。
XSS(クロスサイトスクリプティング)対策の基本
XSS攻撃は、WebセキュリティにおけるOWASP Top 10に常にランクインする深刻な脆弱性です。攻撃者がユーザー入力にスクリプトを仕込み、他のユーザーのブラウザで実行させる手法です。
- 反射型XSS — URLパラメータに仕込まれたスクリプトが、サーバーのレスポンスにそのまま反映される
- 蓄積型XSS — 掲示板やコメント欄に保存されたスクリプトが、閲覧者のブラウザで実行される
- DOM型XSS — クライアントサイドのJavaScriptが、ユーザー入力を安全でない方法でDOMに挿入する
これらすべてに共通する対策の基本が、出力時のHTMLエスケープ(サニタイズ)です。ユーザーから受け取ったデータをHTMLに埋め込む前に、必ず特殊文字をエスケープすることで、スクリプトの注入を防ぎます。
ソースコードをブログに掲載する手順
技術ブログやドキュメントにHTMLやJavaScriptのコードサンプルを掲載する場合、以下の手順でエスケープすると安全かつ正確に表示できます。
- 本ツールの「エスケープ」モードにソースコードをペースト
- 出力されたエスケープ済みテキストをコピー
- ブログの
<pre><code>タグ内にペースト - ブラウザで表示を確認 —
<div>などのタグがそのままテキストとして表示されればOK
シンタックスハイライトライブラリ(Prism.js, highlight.js 等)を使用している場合でも、HTML内の < や & はエスケープしておく必要があります。ライブラリがエスケープ済みテキストを正しく解釈し、色付けしてくれます。
エスケープが必要な5つの特殊文字
| 文字 | エンティティ | エスケープしないとどうなるか |
|---|---|---|
& |
& |
後続の文字列がエンティティ参照として誤解釈される |
< |
< |
HTMLタグの開始として解釈され、ページ構造が崩れる |
> |
> |
HTMLタグの終了として解釈される可能性がある |
" |
" |
属性値のクォートが閉じてしまい、属性の注入が可能になる |
' |
' |
シングルクォートで囲まれた属性値が壊れる |
ブラウザ完結で安全に使えます
本ツールはすべての処理をブラウザ内の JavaScript だけで完結しています。入力されたテキストが外部サーバーに送信されることは一切ありません。社内システムのソースコードや未公開のHTMLテンプレートも安心して変換できます。
- 外部APIへの通信なし — オフライン環境でも動作します
- データの保存・送信なし — ページを閉じれば入力内容は完全に消えます
- アカウント登録不要 — URLを開くだけで誰でもすぐに使えます
その他のツール
お探しのツールが見つからない場合は、BetaVersion Tools トップページから全ツールの一覧をご確認ください。広告運用・Web制作に役立つツールを随時追加しています。