【入門編】Reactにおける自動エスケープの仕組みとdangerouslySetInnerHTMLの危険性 – アプリケーションセキュリティ & 安全な開発防御ガイド

React開発の「安全神話」を解剖する：dangerouslySetInnerHTMLという名のパンドラの箱

こんにちは。現場で泥臭いインシデント対応を繰り返していると、「最新のフレームワークを使っているからうちは安全だ」と信じ込んでいる開発現場に遭遇することがあります。

Reactは確かに優秀です。しかし、どれほど高性能なセキュリティシステムも、設置する人間が「裏口」を全開にしてしまえば無力です。今日は、Reactが標準で備えている「自動防犯システム」と、それを無効化してしまう危険な禁じ手について、身近な例えを交えて紐解いていきましょう。

—

1. Reactの「自動エスケープ」は、優秀な門番

Reactがデフォルトで行うエスケープ処理は、いわば「手紙の検閲官」です。

私たちがReactで {userInput} のように変数を埋め込むとき、Reactは中身に悪意のあるコード（