Next.jsでセキュリティヘッダーを追加するには？

next.config.jsにheaders()関数を追加します。この関数はヘッダーオブジェクトの配列を返し、それぞれにソースパターンと{key, value}ペアの配列があります。Vercelデプロイメントはvercel.jsonでのヘッダー追加もサポートしています。

CSPを追加するとサイトが壊れますか？

厳格なCSPはコードがインラインスクリプトやスタイルを使用している場合にブロックする可能性があります。まずContent-Security-Policy-Report-Onlyを使用して本番環境で違反を監視し、その後段階的にポリシーを強化してください。

HTTPSの存在、HSTS、X-Content-Type-Optionsは重要（最高の減点）としてマークされています。CSP、X-Frame-Options、Permissions-Policyは高。情報漏洩（サーバーヘッダー開示）は中です。

HTTPセキュリティヘッダーはブラウザにサイトのコンテンツをどのように処理するかを指示するサーバー設定の一行です。アプリケーションコードを変更せずに、クリックジャッキングからクロスサイトスクリプティングまで幅広い攻撃を防ぎます。

CSPはXSS攻撃を防ぐ最も強力なヘッダーです。スクリプト、スタイル、画像などのリソースを読み込めるソースのホワイトリストを定義します。

適用前に違反を監査するためのレポートのみポリシーから始めてください：

Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self' https://cdn.example.com; report-uri /csp-violations

HSTSはユーザーが http:// と入力しても、ブラウザにドメインへのすべての将来のリクエストでHTTPSを使用させます。

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

他のサイトのiframeにページが埋め込まれるのを防ぎます（クリックジャッキング）。最新のCSP frame-ancestors ディレクティブが古い X-Frame-Options ヘッダーを置き換えます。

ブラウザのMIMEスニッフィングを停止します。一行、最大限の保護：

X-Content-Type-Options: nosniff

送信リクエストにどれだけのリファラー情報を含めるかを制御します。strict-origin-when-cross-origin が推奨デフォルト値です。

ページやサードパーティの埋め込みコンテンツからのブラウザAPI（カメラ、マイク、ジオロケーション）へのアクセスを制限します。

AISeen Security Scoreは6つの重要なヘッダーに加え、HTTPS設定、Cookieフラグ、情報漏洩（レスポンスヘッダーでのサーバーバージョン開示）を監査します。