Question 1

XSS（クロスサイトスクリプティング）攻撃とは何ですか？

Accepted Answer

XSS攻撃は、悪意のあるJavaScriptコードをWebアプリケーションに注入し、他のユーザーのブラウザで実行させる攻撃です。攻撃者はバリデーションやエスケープの脆弱性を悪用して、クッキーやセッショントークンを盗んだり、不正な操作を実行したりします。ReactはJSX値を自動的にエスケープすることでネイティブな保護を提供していますが、dangerouslySetInnerHTMLや直接DOM操作では脆弱性が残ります。

Question 2

ReactはデフォルトでXSS攻撃からどのように保護しますか？

Accepted Answer

ReactはJSXを通じて挿入されたすべての値をレンダリング前にプレーンテキストに変換することで自動的にエスケープします。この保護により、HTMLコードがデータに注入されてもスクリプトの実行が防止されます。HTMLを解釈・実行するinnerHTMLとは異なり、Reactはタグをプレーンテキストとして扱うため、標準的なpropsやstateを通じた悪意のあるJavaScriptの注入が不可能になります。

Question 3

ReactでdangerouslySetInnerHTMLが危険とみなされるのはなぜですか？

Accepted Answer

このプロパティはエスケープなしに生のHTMLをDOMに直接挿入することでReactのネイティブXSS保護をバイパスします。コンテンツが信頼できないソースや外部APIから来た場合、実行される悪意のあるJavaScriptが含まれる可能性があります。明示的な名前dangerouslySetInnerHTMLは、開発者がセキュリティリスクを意識的に認識し、DOMPurifyなどのライブラリで適切なサニタイズを実装することを強制します。

React セキュリティ & ベストプラクティス

XSS（クロスサイトスクリプティング）攻撃とは何ですか？

回答

ReactはデフォルトでXSS攻撃からどのように保護しますか？

回答

ReactでdangerouslySetInnerHTMLが危険とみなされるのはなぜですか？

回答

Stored XSSとReflected XSS攻撃の主な違いは何ですか？

ReactでExternal APIからのHTMLを表示するために優先すべきアプローチは何ですか？

その他のReact / Next.js面接トピック

JavaScript の基礎

React の基礎

React Hooks

コンポーネントのライフサイクル

React Router

Contextを使った状態管理

フォームと Controlled Components

データ取得と API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.jsの基礎

TypeScriptとReact

Next.js データフェッチング

Next.js Server Actions

Next.jsのルーティングとナビゲーション

Next.js API Routes

Next.js Metadata & SEO

Next.js の Middleware と Auth

React テスト

Zustand State Management

React パフォーマンス最適化

Error Boundaries & エラーハンドリング

Advanced React Patterns

Next.jsの高度な機能

Next.jsのデプロイメントと本番環境

アーキテクチャ & デザインパターン

React Server Components

Next.js の国際化

次の面接に向けてReact / Next.jsをマスター