概要

Content Security Policy（CSP）は、ウェブアプリケーションのセキュリティを強化するために使用される重要なツールです。特に、Next.jsではクロスサイトスクリプティング（XSS）やデータインジェクション攻撃を防ぐためにCSPが推奨されています。本記事では、Next.jsでCSPを設定する方法について解説します。

Content Security Policyとは

CSPは、アプリケーションが読み込むスクリプトやスタイル、画像などのリソースの出所を制御することで、XSS攻撃やクリックジャッキングを防ぎます。これにより、信頼できるソースからのみコンテンツが読み込まれるようになります。CSPは、HTTPヘッダーを通じてブラウザに伝えられます。

Next.jsでのCSP設定方法

Next.jsでは、next.config.jsファイルを使用してCSPを設定するのが一般的です。以下はその具体的な例です。

基本的な設定

next.config.jsにCSPを追加するには、次のようにします。

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',  // 全ページに適用
        headers: [
          {
            key: 'Content-Security-Policy',
            value: "default-src 'self'; script-src 'self' https://www.google-analytics.com; img-src 'self' https://unsplash.com",
          },
        ],
      },
    ];
  },
};

この設定では、スクリプトは自サイト（self）およびgoogle-analytics.comからのみ読み込むことが許可され、画像はunsplash.comからのみ許可されます。

Nonceの使用

一部のインラインスクリプトを許可したい場合、nonceを使うことができます。Nonceは一度限りのトークンで、特定のインラインスクリプトに対してのみ許可されます。

const crypto = require('crypto');
module.exports = {
  async headers() {
    const nonce = crypto.randomBytes(16).toString('base64');
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: `default-src 'self'; script-src 'self' 'nonce-${nonce}' https://trusted-site.com`,
          },
          {
            key: 'X-NONCE',
            value: nonce,
          },
        ],
      },
    ];
  },
};

この設定により、nonceが設定されたスクリプトだけが実行され、その他のインラインスクリプトはブロックされます。

その他のセキュリティヘッダー

CSPに加え、以下のような他のセキュリティヘッダーも一緒に設定することが推奨されます。

• X-Content-Type-Options: MIMEスニッフィングを防止します。
• X-Frame-Options: クリックジャッキングを防止するため、ページをフレームに表示しない設定。
• Strict-Transport-Security: HTTPSを強制し、安全な通信を維持します。

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
        ],
      },
    ];
  },
};

これにより、さまざまな攻撃からアプリケーションを保護できます。

まとめ

CSPは、Next.jsアプリケーションのセキュリティを強化するための重要なツールです。特に、XSS攻撃やクリックジャッキングの防止に有効です。セキュリティポリシーを適切に設定し、他のセキュリティヘッダーと組み合わせることで、より安全なウェブアプリケーションを構築できます。