【実務・中級編】ReactのdangerouslySetInnerHTML使用時のリスクと安全な実装 – アプリケーションセキュリティ & 安全な開発防御ガイド

React開発の「禁じ手」をどう安全に扱うか：dangerouslySetInnerHTMLと向き合う全技術

現場でコードレビューをしていると、必ず一度は遭遇するのがdangerouslySetInnerHTMLというプロパティだ。React開発者にとって、この名前は「危険なのは分かっているが、どうしてもHTMLをそのまま流し込みたい」という誘惑の象徴だろう。

だが、はっきり言おう。このプロパティを「なんとなく」使っているエンジニアは、爆弾を抱えて走り回っているのと同じだ。

今日は、なぜこれがXSS（クロスサイトスクリプティング）の温床になるのか、そしてどうすれば安全に運用できるのか。綺麗事抜きの「現場の作法」を解説する。

—

1. なぜdangerouslySetInnerHTMLは危険なのか

Reactの最大の特徴は、デフォルトで変数をエスケープしてレンダリングする「自動防御機能」にある。

と書けば、たとえuserInputに