特定の文字をWebページ上で安全に使用する

静的webページだろうと動的webページだろうと、ページ内で使用する場合に見たままの文字では意図通りの出力がされないもの(エンティティ文字)や、悪意のあるユーザの攻撃による被害を防ぐための処理(エスケープ処理)は、どんな言語だろうとどんなサーバを使っていようと対応する必要があるので、まとめておくことにしました。なお、フレームワークによっては、そのような設定を有効にすると勝手にやってくれるものもあるみたいです。安心ですね。

エンティティ文字を扱う時は記述方法に注意する

ブラウザがHTMLを解析してブラウザ上に表示する際に使用される記号は、Webページ内の例えば記事などに使用する場合に、単純に入力しただけでは表示が出なかったり意図しない挙動をすることがあります。それを回避するために、特定の文字は記事内でそのままの文字で書くのではなく、&から始まる文字参照を示す文字列を書く必要があります。やり方は、例えば半角大なり文字を二つ並べたい場合は、記事上で&lt;&lt;と記述すれば、<<のように表示されます。対象の文字は複数あるので、「この記号はHTMLで使われている記号だな」と思ったら、エンティティ文字かどうか調査して、もしそれなら文字参照で書くことが必要です。

エンティティ文字について PHPとJavaScriptでHTMLエンティティを扱う時のおさらい

特定の文字をエスケープ処理する

そもそもエスケープ処理を行わなければならない理由は、クロスサイトスクリプティング攻撃を防ぐためです。例えばページ内のフォームに入力した文字列がなんらかのイベントでページ内に埋め込まれる場合などに、エスケープ処理を行わず入力された内容がそのまま反映される場合に、文字列<や>、/などのエスケープ処理を行っていないと、<script></script>と言うJavaScriptを定義する記述がそのままJavaScriptとして読み込まれてしまい、Webページの管理者が意図しないJavaScriptが実行されてしまう可能性があります。それにより悪意のあるユーザにより、ページの内容を書き換えられたり、別のページに飛ばされてしまう等の被害が出ます。

クロスサイトスクリプティングの説明はWikipediaが詳しいです。

【初心者向け】HTMLを使ったエスケープ処理について詳しく解説! | CodeCampus