Reactの「自動エスケープ」という甘い罠：DOMの深淵と dangerouslySetInnerHTML の呪い
現場でコードレビューをしていると、Reactが「安全なフレームワーク」であるという過信が、重大な脆弱性の温床になっているケースを頻繁に目にする。確かにReactはデフォルトでJSX内の値をエスケープし、XSS（クロスサイトスクリプティング）を水際で防ぐよう設計されている。しかし、その「自動化」の皮膜を一枚剥がせば、そこにはOSI参照モデルのアプリケーション層における、極めてプリミティブかつ破壊的な攻撃ベクトルが口を開けて待っている。
本稿では、Reactの防御機構の正体と、我々がそれをいかにして「意図的に」破壊してしまうのか、そのメカニズムと防御の極意を紐解く。
—
1. Reactの自動エスケープ：ブラウザの解釈を封じる論理
ReactがJSXで {value} をレンダリングする際、内部的には textContent プロパティに近い挙動をとる。具体的には、Reactはレンダリング前に値をエスケープし、HTMLタグとして解釈されることを防ぐ。
// 攻撃者が を入力値として送った場合
const userInput = ““;
// Reactはこれを「文字列」としてのみ扱い、DOMのテキストノードに挿入する
// 結果として画面には
コメント