概要

Next.jsを使用する際、セキュリティヘッダーを適切に設定することで、ウェブアプリケーションの安全性を大幅に強化できます。セキュリティヘッダーには、Content Security Policy（CSP）、X-Frame-Options、Strict-Transport-Securityなどがあります。これらのヘッダーは、クロスサイトスクリプティング（XSS）攻撃やクリックジャッキングを防ぎ、ユーザーのデータを保護する役割を果たします。

主要なセキュリティヘッダー

Content Security Policy（CSP）

CSPは、スクリプト、スタイルシート、画像などのリソースの読み込み元を制限するためのセキュリティヘッダーです。CSPを使用すると、信頼できるソース以外のスクリプト実行を防ぎ、XSS攻撃を防止できます。 例として、以下のようにNext.jsのnext.config.jsにCSPを設定します:

module.exports = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            key: "Content-Security-Policy",
            value: "default-src 'self'; script-src 'self' https://trusted-source.com; img-src 'self' https://unsplash.com;",
          },
        ],
      },
    ];
  },
};

この例では、スクリプトは自身のドメインとtrusted-source.comからのみ許可され、画像はunsplash.comからのみ読み込みが可能です。

X-Frame-Options

X-Frame-Optionsは、クリックジャッキングを防ぐためのヘッダーです。このヘッダーを使用することで、外部サイトがiframeを使用してコンテンツを埋め込むことを制限できます。

• DENY
  他のサイトからiframeを使用してページを埋め込むことを完全に禁止します。
• SAMEORIGIN
  同じオリジンからのみ埋め込みを許可します。 設定例:

{
  key: "X-Frame-Options",
  value: "DENY",
}

Strict-Transport-Security（HSTS）

Strict-Transport-Security (HSTS)は、ブラウザに対して常にHTTPS接続を強制するためのセキュリティヘッダーです。これにより、HTTP接続が暗号化されていない状態で行われるのを防ぎます。 設定例:

{
  key: "Strict-Transport-Security",
  value: "max-age=31536000; includeSubDomains; preload",
}

これにより、1年間（31536000秒）にわたってHTTPS接続が強制され、サブドメインも含めて適用されます。

Permissions-Policy

Permissions-Policyは、ウェブアプリケーションで利用できるブラウザAPIを制限するためのヘッダーです。カメラやマイク、位置情報など、不要なAPIへのアクセスを防ぎ、セキュリティを向上させます。 設定例:

{
  key: "Permissions-Policy",
  value: "camera=(), microphone=(), geolocation=()",
}

これにより、カメラ、マイク、位置情報の使用が無効化されます。

まとめ

Next.jsでセキュリティヘッダーを正しく設定することで、クロスサイトスクリプティング（XSS）やクリックジャッキングなどの攻撃からアプリケーションを守ることができます。CSPやX-Frame-Options、HSTSなどを適切に組み合わせて、堅牢なセキュリティ対策を実装しましょう。