概要

XSS（クロスサイトスクリプティング）攻撃は、悪意のあるスクリプトをウェブページに注入し、ユーザーに実行させる手法です。この攻撃を防ぐために、Next.jsではセキュリティヘッダーを使用することが推奨されています。本記事では、主にContent Security Policy（CSP）やその他のヘッダーを設定することで、XSS攻撃を防ぐ実践的な方法を解説します。

XSS対策の基本

1. Content Security Policy（CSP）の設定
   CSPは、スクリプトのソースやスタイルシートの読み込み元を制限することで、XSS攻撃を防ぎます。Next.jsでは、next.config.jsに以下のように設定を追加します。

   const { createSecureHeaders } = require('next-secure-headers');
   module.exports = {
     async headers() {
       return [{
         source: '/(.*)',
         headers: createSecureHeaders({
           contentSecurityPolicy: {
             directives: {
               defaultSrc: ["'self'"],
               scriptSrc: ["'self'", "'nonce-randomString'"], // nonceを使用
               styleSrc: ["'self'", "'unsafe-inline'"],
             },
           },
           referrerPolicy: "same-origin",
         }),
       }];
     },
   };
   

   この設定は、スクリプトやスタイルシートの読み込み元を制御し、攻撃者が注入する不正なスクリプトの実行を防ぎます。

2. X-XSS-Protectionの導入
   X-XSS-Protectionヘッダーは、ブラウザがXSS攻撃を検出した際にページの表示をブロックする機能です。Next.jsでは、next-secure-headersを使用して設定可能です。

   const { createSecureHeaders } = require('next-secure-headers');
   module.exports = {
     async headers() {
       return [{
         source: '/(.*)',
         headers: createSecureHeaders({
           xssProtection: '1; mode=block',
         }),
       }];
     },
   };
   

   これにより、ブラウザが攻撃を検知した際に、ページのレンダリングがブロックされます。

3. X-Content-Type-Optionsの設定
   X-Content-Type-Optionsヘッダーを使用して、ブラウザが送信されたファイルのMIMEタイプを正しく解釈するようにし、スクリプトインジェクションを防ぎます。

   const { createSecureHeaders } = require('next-secure-headers');
   module.exports = {
     async headers() {
       return [{
         source: '/(.*)',
         headers: createSecureHeaders({
           contentTypeOptions: 'nosniff',
         }),
       }];
     },
   };
   

   この設定は、ブラウザがファイルタイプを勝手に推測して処理することを防ぎ、セキュリティを強化します。

まとめ

XSS対策は、ウェブアプリケーションのセキュリティにおいて重要な部分です。Next.jsでは、CSPやX-XSS-Protectionなどのセキュリティヘッダーを適切に設定することで、攻撃リスクを大幅に減らせます。これらのヘッダーを利用して、ウェブアプリケーションの安全性を高めましょう。