HTMLエンティティの基礎知識と使いどころ
HTMLソースコードの中で< > & " 'などの文字をそのまま書くとHTMLタグとして解釈されてしまいます。HTMLエンティティはこれらの特殊文字を安全にHTMLに埋め込むための記法です。
なぜエンティティエンコードが必要か
< はタグの開始記号なので、テキストとして「1 < 2」と表示したい場合は<と書く必要があります。&はエンティティの開始記号なのでそのまま書くと無効なエンティティとして解釈されることがあり、&と書きます。XSS(クロスサイトスクリプティング)対策としても、ユーザー入力をHTMLに埋め込む際には必ずエンティティエンコードが必要です。
主なHTMLエンティティ一覧
< → < / > → > / & → & / " → " / ' → ' / スペース → / © → © / → → → / × → × / ÷ → ÷ などがよく使われます。HTML Entity EncoderはこれらをまとめてエンコードしてHTMLに安全に貼り付けられる形式に変換します。
数値参照形式
HTMLエンティティには名前付き参照(<)と数値参照(< または<)の2形式があります。名前付き参照は覚えやすく可読性が高いですが、数値参照はどんな文字でもUnicodeコードポイントで表現できます。非ASCII文字(©・→・日本語など)を数値参照に変換するオプションをHTML Entity Encoderで選択できます。
テンプレートエンジンとの関係
React・Vue・AngularなどのJSXやテンプレート構文では、変数を{}や{{}}で埋め込むと自動的にHTMLエンティティエンコードされます(エスケープ)。dangerouslySetInnerHTML(React)やv-html(Vue)を使う場合は自動エスケープが効かないため、手動でエンコードするかDOMPurifyなどでサニタイズする必要があります。