ReactアプリのContent Security Policy

Content Security Policy（CSP）は、信頼できるコンテンツソースをブラウザーに伝えるHTTPレスポンスヘッダーです。読み込みを許可するスクリプト、スタイル、画像、フォントを正確に宣言することで、XSSの脆弱性によって攻撃者がページにHTMLを挿入できる場合でも、CSPは注入された悪意のあるコンテンツの実行を防ぎます。

default-src 'self'は基本設定を定めます。すべてのリソース種別（スクリプト、スタイル、画像、フォント、フレーム）は同一オリジンからのみ読み込めます。script-src 'self'はスクリプトの読み込み元を同一オリジンに限定し、明示的に列挙されていない外部CDNのスクリプトをブロックします。この2つのディレクティブが、制限の厳しいCSPの基盤になります。

eval()は文字列を実行可能なコードに実行時変換します。これは、まさにXSSペイロードが必要とする処理です。script-src 'self'（'unsafe-eval'なし）のCSPは、eval()と、new Function()やsetTimeout(string)などの関連関数をブロックします。これにより、XSSペイロードの実行に関する大きな脅威の種類を排除できます。

'strict-dynamic'をscript-srcに指定すると、すでに信頼されているスクリプトが読み込んだスクリプトにも信頼が付与されます。これにより、すべてのCDN URLを許可リストに追加しなくても、バンドラーが使用する動的なスクリプト読み込みパターンを利用できます。信頼されたスクリプトは追加のスクリプトを読み込むことができ、それらにも信頼が引き継がれます。

アプリケーションで特定のインラインスクリプト（アナリティクスの初期化スニペットなど）が必要な場合は、そのSHA-256ハッシュを計算し、'sha256-base64hash'をscript-srcに追加できます。完全に一致するハッシュを持つスクリプトだけがインラインで実行を許可されます。攻撃者が注入したスクリプトは異なるハッシュになるため、ブロックされます。

nonceは、リクエストごとにサーバーが生成する暗号学的にランダムな値です。サーバーはnonceをスクリプトタグ（<script nonce="abc123">）とCSPヘッダー（script-src 'nonce-abc123'）の両方に追加します。正しいnonceを持つスクリプトだけが実行されます。攻撃者はnonceを予測できないため、注入したスクリプトでnonceを使用することはできません。

CSPは、report-uri /csp-violation-endpointまたは新しいreport-toディレクティブによる違反レポートに対応しています。CSPによってリソースがブロックされると、ブラウザーはエンドポイントにJSONレポートを送信します。これらのレポートを監視すると、正当な設定上の問題と、実行中の攻撃の試みの両方を特定できます。

Next.jsでは、ミドルウェアにCSPヘッダーを追加します。middleware.tsを作成し、nonceを生成してContent-Security-Policyヘッダーを設定し、レスポンスヘッダーを介してnonceをページに渡します。ページのレイアウトはヘッダーからnonceを読み取り、すべてのインラインスクリプトとstyleタグに適用します。

Content-Security-Policy-Report-Onlyはテスト用のモードです。ブラウザーは何も強制せず、ブロックされるはずだったすべての対象について違反レポートを送信します。まずReport-Onlyモードでデプロイしてすべての違反を修正し、その後、アプリケーションの動作に支障が出ないことを確認して、強制適用するContent-Security-Policyヘッダーに切り替えてください。

CSPによってリソースがブロックされると、Chrome DevToolsのコンソールに、ブロックされたURLと違反したディレクティブを示す赤いエラーメッセージが表示されます。これらのメッセージは、開発やテストの際に非常に役立ちます。各違反は、ポリシーを修正する、リソースを許可されたソースに移動する、またはnonceやハッシュを使用することで解決する必要があります。

実用的なReact SPAのCSPは次のとおりです。default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'。frame-ancestors 'none'は、アプリケーションをiframeに埋め込めないようにすることで、クリックジャッキングも防ぎます。

Content Security Policyでscript-src 'self'を指定すると、何を防げますか？

CSPは、信頼できるコンテンツソースを宣言するHTTPヘッダーです。default-src 'self'とscript-src 'self'は、外部スクリプトとevalをブロックします。インラインスクリプトは、ハッシュまたはnonceによって許可できます。'strict-dynamic'は動的なスクリプト読み込みをサポートします。強制適用する前に、Content-Security-Policy-Report-Onlyを使用してテストしてください。Next.jsではミドルウェアを介してCSPを実装します。DevToolsのコンソールには違反がリアルタイムで表示されます。