# React セキュリティ & ベストプラクティス (React / Next.js) > XSS対策、CSRF保護、dangerouslySetInnerHTML、Content Security Policy、HTTPS、サニタイズ - 22 面接問題 - Senior - [面接問題: React / Next.js](https://sharpskill.dev/ja/technologies/react-next/interview-questions.md) ## 1. XSS（クロスサイトスクリプティング）攻撃とは何ですか？ **回答** XSS攻撃は、悪意のあるJavaScriptコードをWebアプリケーションに注入し、他のユーザーのブラウザで実行させる攻撃です。攻撃者はバリデーションやエスケープの脆弱性を悪用して、クッキーやセッショントークンを盗んだり、不正な操作を実行したりします。ReactはJSX値を自動的にエスケープすることでネイティブな保護を提供していますが、dangerouslySetInnerHTMLや直接DOM操作では脆弱性が残ります。 ## 2. ReactはデフォルトでXSS攻撃からどのように保護しますか？ **回答** ReactはJSXを通じて挿入されたすべての値をレンダリング前にプレーンテキストに変換することで自動的にエスケープします。この保護により、HTMLコードがデータに注入されてもスクリプトの実行が防止されます。HTMLを解釈・実行するinnerHTMLとは異なり、Reactはタグをプレーンテキストとして扱うため、標準的なpropsやstateを通じた悪意のあるJavaScriptの注入が不可能になります。 ## 3. ReactでdangerouslySetInnerHTMLが危険とみなされるのはなぜですか？ **回答** このプロパティはエスケープなしに生のHTMLをDOMに直接挿入することでReactのネイティブXSS保護をバイパスします。コンテンツが信頼できないソースや外部APIから来た場合、実行される悪意のあるJavaScriptが含まれる可能性があります。明示的な名前dangerouslySetInnerHTMLは、開発者がセキュリティリスクを意識的に認識し、DOMPurifyなどのライブラリで適切なサニタイズを実装することを強制します。 ## さらに19問利用可能 - Stored XSSとReflected XSS攻撃の主な違いは何ですか？ - ReactでExternal APIからのHTMLを表示するために優先すべきアプローチは何ですか？ 無料で登録: https://sharpskill.dev/ja/login ## その他のReact / Next.js面接トピック - [JavaScript の基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/javascript-essentials.md): 25問, Junior - [React の基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-fundamentals.md): 20問, Junior - [React Hooks](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-hooks.md): 22問, Junior - [コンポーネントのライフサイクル](https://sharpskill.dev/ja/technologies/react-next/interview-questions/component-lifecycle.md): 18問, Junior - [React Router](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-router.md): 20問, Junior - [Contextを使った状態管理](https://sharpskill.dev/ja/technologies/react-next/interview-questions/state-management-context.md): 18問, Junior - [フォームと Controlled Components](https://sharpskill.dev/ja/technologies/react-next/interview-questions/forms-controlled-components.md): 20問, Mid-Level - [データ取得と API](https://sharpskill.dev/ja/technologies/react-next/interview-questions/fetching-data-api.md): 20問, Mid-Level - [React Query (TanStack Query)](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-query-tanstack.md): 20問, Mid-Level - [Styling & CSS-in-JS](https://sharpskill.dev/ja/technologies/react-next/interview-questions/styling-css-in-js.md): 18問, Mid-Level - [Next.jsの基礎](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25問, Mid-Level - [TypeScriptとReact](https://sharpskill.dev/ja/technologies/react-next/interview-questions/typescript-react.md): 20問, Mid-Level - [Next.js データフェッチング](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24問, Mid-Level - [Next.js Server Actions](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-server-actions.md): 20問, Mid-Level - [Next.jsのルーティングとナビゲーション](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22問, Mid-Level - [Next.js API Routes](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-api-routes.md): 20問, Mid-Level - [Next.js Metadata & SEO](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18問, Mid-Level - [Next.js の Middleware と Auth](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22問, Mid-Level - [React テスト](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-testing.md): 20問, Mid-Level - [Zustand State Management](https://sharpskill.dev/ja/technologies/react-next/interview-questions/zustand-state-management.md): 18問, Mid-Level - [React パフォーマンス最適化](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-performance-optimization.md): 22問, Senior - [Error Boundaries & エラーハンドリング](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-error-boundaries.md): 18問, Senior - [Advanced React Patterns](https://sharpskill.dev/ja/technologies/react-next/interview-questions/advanced-react-patterns.md): 20問, Senior - [Next.jsの高度な機能](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24問, Senior - [Next.jsのデプロイメントと本番環境](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20問, Senior - [アーキテクチャ & デザインパターン](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-architecture-patterns.md): 22問, Senior - [React Server Components](https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-server-components.md): 26問, Senior - [Next.js の国際化](https://sharpskill.dev/ja/technologies/react-next/interview-questions/nextjs-internationalization.md): 20問, Senior --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/ja/technologies/react-next/interview-questions/react-security-best-practices