なぜ<script>は実行されないのか？（HTMLエンティティとXSS防御）

Webサイトのコメントボックスに <script>alert('hacked');</script> と入力すると、どうなるでしょうか？

ほとんどの安全なWebサイトでは、スクリプトは実行されず、代わりにテキスト文字列が入力されたとおりに表示されます。

ブラウザは通常、< をタグの開始として解釈します。では、なぜコードとして実行せずにテキストとして表示することを知っているのでしょうか？

その秘密は HTMLエンティティ にあります。

1. 予約文字のジレンマ

HTMLでは、<、>、&、" などの文字には特別な意味があります。これらは 予約文字 と呼ばれます。

コンテンツに「3 < 5」という式を書きたい場合、そのまま入力すると、ブラウザは < の後に続くものをタグとして解釈しようとして混乱する可能性があります。

したがって、これらの予約文字を「文字通り」表現するための特別なコードが必要です。

2. 一般的なHTMLエンティティ

HTMLエンティティは & で始まり、; で終わります。

• < (小なり) -> <
• > (大なり) -> >
• & (アンパサンド) -> &
• " (二重引用符) -> "
• ' (一重引用符) -> ' (または ')
• スペース ->   (改行しないスペース)

画面上で < が見えるとき、実際のHTMLソースコードはおそらく < です。

3. XSS（クロスサイトスクリプティング）に対する防御

HTMLエンティティはセキュリティにとって重要です。

XSS は、ハッカーが悪意のあるスクリプトをWebサイトに注入して、ユーザーのクッキーを盗んだり、有害なアクションを実行したりする攻撃です。

しかし、サーバーがユーザー入力を保存または表示するときに < を < に、> を > に変換（エスケープ）するとどうなるでしょうか？

ブラウザは <script> を見て、「これはただのテキストであり、タグではない」と判断し、スクリプトを実行せずにテキストとしてレンダリングします。これは、XSSに対する最も基本的で強力な防御策です。

結論

ReactやVueのような最新のフロントエンドフレームワークは、レンダリング時にデフォルトでデータを自動的にエスケープします。

ただし、dangerouslySetInnerHTML のような機能を使用する場合、この自動防御は無効になります。そのような場合は、HTMLエンティティ変換が適用されていることを確認する必要があります。

単純な文字変換が、ハッキングからWebサイトを保護する盾として機能します。