HTMLエスケープ
どんなテキストもHTMLの中に安全に入れられるようにし、マークアップとして解釈されずに書いたとおり表示させます。
テキスト
エンコード結果
オンラインでHTMLをエスケープ
ブログ記事でコードを見せる、テンプレートに商品名を入れる、ユーザーの入力を表示する。どれにも同じ手順が必要です。HTMLが構文として扱う文字をエンティティに変えることです。このページは、エンコードモードでサンプルを入れたHTMLエンティティ変換ツールを開きます。
変換前と変換後
| テキスト | エスケープ後 |
|---|---|
<p>Hello</p> | <p>Hello</p> |
Tom & Jerry | Tom & Jerry |
say "hi" | say "hi" |
コードでのエスケープ
| 言語 | 関数 |
|---|---|
| PHP | htmlspecialchars($s, ENT_QUOTES) |
| Python | html.escape(s) |
| JavaScript（DOM） | innerHTMLではなくtextContentに代入する |
| テンプレート | Twig、Jinja、Blade、Reactは標準で出力をエスケープする |
テンプレートエンジンがすでに出力をエスケープしているなら、その前にテキストをエスケープしないでください。二重になり、訪問者には&ではなく&amp;が表示されます。
関連ツール
逆の処理にはHTMLエンティティのデコードを使ってください。ページではなくURLに入れるテキストには、URLエンコーダーが便利です。