React vs. XSS：ガードレールが途切れる場所

React vs. XSS: ガードレールが途切れる場所

Reactはデフォルトで安全です。JSX内の値をエスケープすることで、ほとんどのスクリプトインジェクションを防ぎます。しかし、これが誤った安心感を生んでしまうことがあります。ReactはXSSのリスクを軽減しますが、それを完全に排除するわけではありません。

XSS攻撃には主に3つのタイプがあります：

• 反射型XSS (Reflected XSS): 攻撃者が悪意のあるリンクを送信します。サーバーは即座にそのスクリプトをユーザーに送り返します。ブラウザは、それが信頼できるサイトから送られてきたように見えるため、スクリプトを実行してしまいます。
• 蓄積型XSS (Stored XSS): 攻撃者がサーバー上にスクリプトを保存します。それはデータベース、コメント、またはログの中に残ります。そのコンテンツを閲覧するすべてのユーザーに対して、スクリプトが実行されます。
• DOMベースXSS (DOM Based XSS): 攻撃は完全にブラウザ内で発生します。攻撃者がURLパラメータやクライアント側の入力を変更することで、JavaScriptを不正な動作へと導きます。

Reactは実際に何から守ってくれるのでしょうか？

• 自動エスケープ: Reactは文字列をプレーンテキストとして扱います。JSXにスクリプトタグを注入しようとしても、Reactはコードを実行するのではなく、テキストとして表示します。
• 安全なレンダリング: Reactはコンテンツの表示方法を管理します。これにより、危険なブラウザAPIを使用する必要性が減少します。
• DOM操作の削減: Reactが更新を処理します。document.write() や innerHTML を頻繁に使う必要がなくなります。

Reactにはエスケープハッチ（回避策）が用意されています。これらを誤って使用すると、脆弱性を生み出すことになります。

次のようなミスに注意してください：

• dangerouslySetInnerHTML: このプロパティは、Reactにエスケープをスキップするよう指示します。HTMLをそのまま挿入するため、コンテンツがクリーンでない場合、攻撃者に隙を与えてしまいます。まず DOMPurify を使用してコンテンツをサニタイズしてください。
• 直接的なDOM操作: ユーザー入力に対して element.innerHTML を使用すると、Reactのセキュリティをすべてバイパスしてしまいます。
• サードパーティライブラリ: 一部の外部ツールは、同じ安全ルールに従っていない可能性があります。

Reactはセキュリティのためのツールを提供しています。それらを正しく使うのはあなた自身です。セキュリティは開発者の責任です。

出典: https://dev.to/ayomidejhay/react-vs-xss-where-the-guardrails-end-6p2