Reactのエスケープ処理を検証する

中央線デベロッパー20250816
なぜモダンフロントエンドは安全と言われるのか

Transcript

1. Reactのエスケープ処理を 検証 なぜモダンフロントエンドは安全と言われるのか
2. 自己紹介 名前：そうすけ 会社：株式会社Nint 領域：フロント、バック（TS） 趣味：ヘビ、イベント参加
3. はじめに 背景 フロントエンド開発の初心者向けのセキュリティ本を読んでみた。 セキュリティの基本 • XSSにはエスケープ処理が必須 • ライブラリやフレームワークを使う方が賢明 • ブラウザの機能も活用する ReactやVueなどのモダンフレームワークは安全なデフォルトを備え、 開発者が特別意識しなくても一定の防御が効くと言われています。 リティの検証で、いまの XSSでlocalhost8080にあるスクリ プトを実行できるようにするにはどうすれば
4. 本当？ 今回はその仕組みを、Reactを題材にXSSの検証してみようとおもいます！セキュリティの検証で、い まのXSSでlocalhost8080にあるスクリプトを実行できるようにするにはどうすれば。
5. XSSとは？ 「悪意あるスクリプトを他人のブラウザで実行させてしまう脆弱性」 モダンフレームワークは意識しなくても防いでくれる
6. 旧来のDOM操作との違い 従来の方法（危険） <div id=app> 入力内容を表示します</div> const app = document.getElementById('app'); const userInput = '<img src=x onerror="alert(\'👿悪意のあるスクリプト👿!\')">'; app.innerHTML = userInput; // HTMLパーサが動き、スクリプト実行の危険 少し前のフロントエンド開発では、 `innerHTML` を使い、HTML文字列を直接 DOMに挿入することが一般的でした。 &lt;img src=&quot;x&quot; onerror=&quot;alert('👿悪意のあるスクリプト👿!')&quot; /&gt; タグを勘違いしないようにする書き方で置き換える エスケープ処理 をいれる必要があった。 （< → &lt;） 開発者がエスケープ処理を忘れれば、悪意のあるスクリプトが実装されるリスク大。
7. Reactのデフォルト挙動 実際に簡単なフォームを作って検証してみました。フォームに入力した値を表示するシンプルなアプリです。 const userInput = '<img src="x" onerror="alert('XSS via img')" />'; <div>{userInput}</div> ReactではJSX内で値を埋め込むと、、、
8. 安全な表示の検証結果 ログイン処理結果という部分を見ると、""ようこそ、<img src="x" onerror="alert('XSS via img')" />さん！""となり、 imgタグが文字列として解釈されていることがわかります。 Reactの安全性 • HTMLタグがそのまま文字列として表示される • スクリプトが実行されない • 自動的にエスケープ処理が行われる
9. 危険な表示 dangerouslySetInnerHTML ReactにもHTMLを直接挿入する手段は存在します。 それがdangerouslySetInnerHTMLです。 これを使うと、意図しないスクリプトが実行されます。 結果、スクリプトが実行されました。名前の通り「危険な」APIです。 <div dangerouslySetInnerHTML={{ __html: userInput }} />
10. エスケープ処理の仕組みの深堀り React自身が「エスケープ処理」をしているのではなく、常に安全な DOM API（createTextNode）を使っているので、結果的にエスケー プされているということです。 Reactが「エスケープしている」と言われる理由は、値を HTML文字列として扱わず、テキストノードとして DOMに追加しているからです。 デフォルト 危険
11. SSRでは自前でエスケープ処理してる SSR（サーバーサイドレンダリング）環境では、 createTextNodeのようなブラウザの機能が存在しないので使えません。 DOM生成される前の素のHTMLを確認すると、、 ・通常のReact要素→文字列にエスケープ処理されてる ・innerHTML→そのままimgタグとして解釈されている
12. Vueの場合も同様 安全なデフォルト Vueもデフォルトでは値をHTMLとして解釈せず、テキストノード としてDOMに追加するため、自動的にエスケープされます。 危険なAPI Vueには v-html ディレクティブがあり、これを使うとHTMLとして 挿入されます。XSSのリスクが復活するので注意が必要です。 つまり、VueもReactと同じく「安全なデフォルト」ですが、意図的に機能を使えば危険になる点は共通しています。
13. まとめ 安全なデフォルト モダンフロントエンドは、値を直接HTMLとして解釈させず、 古典的なXSSの多くを未然に防いでくれます。 仕組みの理解 なぜ安全なのかを知っておくと、ライブラリ選定の１つの材料になる。 「安全なデフォルト」を信じるのは大事ですが、 なぜ安全なのかを知っておくと、いざというとき安心してコードを書けますね☺ 開発者がやること InnerHtmlを使わない。JSの読み込み許可設定（CSPなど）、