Next.js: セキュリティ強化とバージョン移行

# ステップ 1: セキュリティ脆弱性の即時修正
npm audit fix
# next.config.js にセキュリティヘッダーを追加
# 全フォームに CSRF トークンを追加

# ステップ 2: バージョン移行（14→15→16）
npm install next@16 react@19 react-dom@19

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'standalone',

  async headers() {
    return [
      {
        // 全ルートに適用
        source: '/(.*)',
        headers: [
          {
            key: 'Content-Security-Policy',
            value: [
              "default-src 'self'",
              "script-src 'self' 'unsafe-eval' 'unsafe-inline' https://www.googletagmanager.com https://app.posthog.com",
              "style-src 'self' 'unsafe-inline'",
              "img-src 'self' blob: data: https://*.taskflow.io https://avatars.githubusercontent.com",
              "font-src 'self' data:",
              "connect-src 'self' https://api.taskflow.io https://app.posthog.com https://o450000000.ingest.sentry.io",
              "frame-ancestors 'none'",
              "form-action 'self'",
              "base-uri 'self'",
              "object-src 'none'"
            ].join('; ')
          },
          {
            key: 'Strict-Transport-Security',
            value: 'max-age=31536000; includeSubDomains; preload'
          },
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          },
          {
            key: 'Referrer-Policy',
            value: 'strict-origin-when-cross-origin'
          },
          {
            key: 'Permissions-Policy',
            value: [
              'camera=()',
              'microphone=()',
              'geolocation=()',
              'interest-cohort=()'
            ].join(', ')
          },
          {
            key: 'X-XSS-Protection',
            value: '1; mode=block'
          }
        ]
      },
      {
        // API ルートの追加セキュリティ制限
        source: '/api/(.*)',
        headers: [
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff'
          },
          {
            key: 'Cache-Control',
            value: 'no-store, no-cache, must-revalidate'
          }
        ]
      }
    ]
  }
}

module.exports = nextConfig

// src/components/Form.tsx
'use client'

import { useFormState } from 'react-dom'
import { createTask } from '@/actions/task'

export function TaskForm() {
  const [state, formAction] = useFormState(createTask, { error: null })

  return (
    <form action={formAction}>
      {/* CSRF トークン隠しフィールド */}
      <input type="hidden" name="csrf_token" value={getCsrfToken()} />
      
      <input
        type="text"
        name="title"
        placeholder="タスク名"
        className="border p-2 rounded"
      />
      
      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        タスクを作成
      </button>
      
      {state.error && (
        <p className="text-red-600 mt-2">{state.error}</p>
      )}
    </form>
  )
}

# セキュリティヘッダーの確認
curl -I https://taskflow.io

# 期待される出力
HTTP/2 200
content-security-policy: default-src 'self'; script-src 'self' 'unsafe-eval'...
strict-transport-security: max-age=31536000; includeSubDomains
x-frame-options: DENY
x-content-type-options: nosniff
referrer-policy: strict-origin-when-cross-origin
permissions-policy: camera=(), microphone=(), geolocation=()

{"status":"ok","data":{}}

# ✅ 安全: プレフィックスなしの変数を使用
DATABASE_URL=postgresql://user:pass@host:5432/db
AUTH_SECRET=super-secret-key-here
STRIPE_SECRET_KEY=sk_live_xxx
SENTRY_DSN=https://xxx@sentry.io/123
AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE

# ✅ 正しい: NEXT_PUBLIC_ は公開キーに使用
NEXT_PUBLIC_POSTHOG_KEY=phc_publicKey
NEXT_PUBLIC_SENTRY_DSN=https://public@sentry.io/123
NEXT_PUBLIC_APP_URL=https://taskflow.io

# ❌ 危険: NEXT_PUBLIC_ でキーを保存しないでください
NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_live_xxx  # ブラウザに露出！
NEXT_PUBLIC_DATABASE_URL=postgresql://...    # データベース接続が露出！

# .gitignore — 環境変数セキュリティ
.env
.env*.local
.env.development.local
.env.test.local
.env.production.local

# .env.example は見落とさないでください（テンプレートファイルです）
!.env.example

// src/lib/env-validation.ts
// 機密環境変数がクライアントサイドでアクセス不可であることを確認
function validateEnv() {
  if (typeof window !== 'undefined') {
    const nextPublicVars = Object.keys(process.env)
      .filter(key => key.startsWith('NEXT_PUBLIC_'))
    
    // プライベート変数の誤った露出をチェック
    const sensitiveSuffixes = ['SECRET', 'KEY', 'PASSWORD', 'TOKEN', 'PRIVATE']
    
    for (const key of nextPublicVars) {
      const suffix = key.replace('NEXT_PUBLIC_', '')
      if (sensitiveSuffixes.some(s => suffix.toUpperCase().includes(s))) {
        console.warn(
          `[セキュリティ警告] ${key} は NEXT_PUBLIC_ で始まっていますが ` +
          `機密キーワードを含んでいます: ${suffix}。` +
          `これはクライアントバンドルに露出します！`
        )
      }
    }
  }
}

validateEnv()

# ビルド後のクライアント JS にキーが含まれているか確認
npm run build

# ビルド成果物内の機密キーワードを検索
grep -r "sk_live_" .next/static/ 2>/dev/null || echo "✅ クライアントバンドルに Stripe シークレットはありません"
grep -r "DATABASE_URL" .next/static/ 2>/dev/null || echo "✅ クライアントバンドルに DATABASE_URL はありません"
grep -r "AUTH_SECRET" .next/static/ 2>/dev/null || echo "✅ クライアントバンドルに AUTH_SECRET はありません"

  ▲ Next.js 16.0.0

   最適化された本番ビルドを作成中 ...
 ✓ コンパイル成功
 ✓ 型のリントと検証
 ✓ ページデータの収集
 ✓ 静的ページの生成 (5/5)
 ✓ ページ最適化の最終処理

ルート (app)              サイズ     初回ロード JS
┌ ○ /                    5.1 kB       89 kB
├ ○ /about               2.3 kB       86 kB
└ λ /api/items           0 B          84 kB

○  (静的)   静的コンテンツとしてプリレンダリング
λ  (動的)   オンデマンドでサーバーレンダリング
✅ クライアントバンドルに Stripe シークレットはありません
✅ クライアントバンドルに DATABASE_URL はありません
✅ クライアントバンドルに AUTH_SECRET はありません

# 基本監査
npm audit

# 深刻度レベルでフィルタリング
npm audit --audit-level=high

# 自動修復（互換性を壊す可能性あり）
npm audit fix

# パッチバージョンのみ修復
npm audit fix --target=patch

# JSON レポートの生成
npm audit --json > security-report.json

# Snyk CLI のインストール
npm install -g snyk

# 認証
snyk auth

# プロジェクトのテスト
snyk test

# 継続的監視
snyk monitor

# Docker イメージスキャン
snyk container test taskflow:latest --file=Dockerfile

# .github/workflows/security.yml
name: Security Audit

on:
  push:
    branches: [main]
  schedule:
    - cron: '0 6 * * 1'  # 毎週月曜日午前 6 時

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: 依存関係のインストール
        run: npm ci
      
      - name: npm audit の実行
        run: npx audit-ci --high --report-type summary
        continue-on-error: true
      
      - name: Snyk セキュリティスキャン
        uses: snyk/actions/node@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
        with:
          args: --severity-threshold=high
      
      - name: SARIF のアップロード
        if: always()
        uses: github/codeql-action/upload-sarif@v3
        with:
          sarif_file: snyk.sarif

// ❌ v14（旧） — 同期 params
export default function ProjectPage({
  params
}: {
  params: { id: string }
}) {
  return <div>プロジェクト {params.id}</div>
}

// ✅ v15（新） — 非同期 params
export default async function ProjectPage({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <div>プロジェクト {id}</div>
}

// ❌ v14 — 同期 generateMetadata
export function generateMetadata({ params }: { params: { id: string } }) {
  return { title: `プロジェクト ${params.id}` }
}

// ✅ v15 — 非同期 generateMetadata
export async function generateMetadata({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return { title: `プロジェクト ${id}` }
}

generateMetadata コンポーネントの UI をレンダリングします。

// ❌ v14 — 同期 cookies 取得
import { cookies } from 'next/headers'

export function Layout({ children }: { children: React.ReactNode }) {
  const token = cookies().get('session_token')
  return <div>{children}</div>
}

// ✅ v15 — 非同期 cookies 取得
import { cookies } from 'next/headers'

export default async function Layout({
  children
}: {
  children: React.ReactNode
}) {
  const cookieStore = await cookies()
  const token = cookieStore.get('session_token')
  return <div>{children}</div>
}

Layout コンポーネントの UI をレンダリングします。

// src/proxy.ts — v16 で middleware.ts を置き換え
// ============================================
// proxy.ts は宣言的なルーティングルール設定です
// ============================================
import { defineProxy } from 'next/proxy'

export default defineProxy({
  // ルートマッチングルール
  matcher: [
    // 認証が必要なパス
    { pathname: '/dashboard/:path*', requireAuth: true },
    { pathname: '/projects/:path*', requireAuth: true },
    { pathname: '/settings/:path*', requireAuth: true },
    
    // リダイレクトルール
    { pathname: '/old-blog/:slug*', redirect: '/blog/:slug*' },
    
    // 静的リソースをスキップ
    { pathname: '/_next/:path*', bypass: true },
    { pathname: '/favicon.ico', bypass: true }
  ],

  // 認証チェック
  async auth(request) {
    const session = await getSession(request)
    if (!session) {
      return new Response(null, {
        status: 307,
        headers: { Location: '/login' }
      })
    }
    return null  // 通過
  },

  // リクエストヘッダー注入
  async headers(request) {
    return {
      'x-request-id': crypto.randomUUID(),
      'x-user-locale': getPreferredLocale(request)
    }
  }
})

// ユーティリティ関数
async function getSession(request: Request) {
  const cookie = request.headers.get('cookie') || ''
  const token = cookie.split('session_token=')?.[1]?.split(';')?.[0]
  if (!token) return null
  return { userId: 'user_123', role: 'admin' }
}

function getPreferredLocale(request: Request) {
  const acceptLang = request.headers.get('accept-language') || 'en'
  return acceptLang.split(',')[0].split('-')[0]
}

// ❌ v15 — fetch キャッシュを使用
async function getProjects() {
  const res = await fetch('https://api.example.com/projects', {
    next: { revalidate: 300 }
  })
  return res.json()
}

// ✅ v16 — use cache + cacheTag を使用
import { cacheTag, cacheLife } from 'next/cache'

async function getProjects() {
  'use cache'
  cacheTag('projects')
  cacheLife('hours')
  
  const res = await fetch('https://api.example.com/projects')
  return res.json()
}

// next.config.js — v16 簡略化バージョン
/** @type {import('next').NextConfig} */
const nextConfig = {
  // v16 では Turbopack がデフォルトです。設定不要
  // 以下の v15 設定を削除してください：
  // swcMinify: true,       // Turbopack デフォルト
  // compiler: { ... },     // すでに組み込み
  // webpack: (config) => config,  // カスタム webpack を削除
  
  output: 'standalone',
  
  // v16 PPR 安定版
  ppr: true,
  
  // 必要なカスタマイズを保持
  serverExternalPackages: ['@prisma/client'],
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

module.exports = nextConfig

Next.js の設定が適用されました。変更はサーバー再起動時に有効になります。

// === v14 オリジナルコード ===
// page.tsx
export default function Page({ params }: { params: { id: string } }) {
  return <div>{params.id}</div>
}

// layout.tsx
import { cookies } from 'next/headers'
export default function Layout({ children }: { children: React.ReactNode }) {
  const theme = cookies().get('theme')
  return <div className={theme?.value}>{children}</div>
}

// middleware.ts
import { NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
  if (!request.cookies.has('token')) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

// === v16 移行後 ===
// page.tsx
export default async function Page({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <div>{id}</div>
}

// layout.tsx
import { cookies } from 'next/headers'
export default async function Layout({
  children
}: {
  children: React.ReactNode
}) {
  const cookieStore = await cookies()
  const theme = cookieStore.get('theme')
  return <div className={theme?.value}>{children}</div>
}

// proxy.ts（middleware.ts を置き換え）
import { defineProxy } from 'next/proxy'
export default defineProxy({
  matcher: [{ pathname: '/:path*', requireAuth: true }],
  async auth(request) {
    const token = request.headers.get('cookie')?.includes('token')
    if (!token) return Response.redirect('/login')
    return null
  }
})

セクションに記載されている ▶ サンプル: 完全移行前後のシステム比較 コンポーネントの UI をレンダリングします。

# ============================================
# security-migration.sh
# 機能: セキュリティ強化 + バージョン移行の完全スクリプト
# ============================================
#!/bin/bash
set -euo pipefail

echo "=== TaskFlow セキュリティ & 移行 ==="

# フェーズ 1: セキュリティ強化
echo ""
echo "--- フェーズ 1: セキュリティ強化 ---"

# 1.1 ランタイム依存関係の監査
echo "npm audit を実行中..."
npm audit --audit-level=high
npm audit fix --target=minor || true

# 1.2 ヘッダー検証
echo "セキュリティヘッダーレポートを生成中..."
curl -sI http://localhost:3000 | grep -E "^(content-security-policy|strict-transport-security|x-frame-options)" \
  || echo "警告: セキュリティヘッダーが不足しています！"

# 1.3 NEXT_PUBLIC 漏洩チェック
echo "漏洩したシークレットをチェック中..."
grep -r "NEXT_PUBLIC_.*SECRET\|NEXT_PUBLIC_.*KEY\|NEXT_PUBLIC_.*PASSWORD" \
  .env* 2>/dev/null && echo "警告: NEXT_PUBLIC にシークレットがあります！" || echo "✅ 漏洩したシークレットはありません"

# 1.4 XSS 保護の検証
echo "XSS 保護を検証中..."
# 入力エンコーディングのテスト
echo "<script>alert('xss')</script>" | node -e "
  const { escape } = require('querystring')
  process.stdin.on('data', d => console.log('エンコード:', escape(d.toString())))
"

# フェーズ 2: バージョン移行
echo ""
echo "--- フェーズ 2: バージョン移行 ---"

# 2.1 現在のバージョンを確認
CURRENT_VERSION=$(node -e "console.log(require('./node_modules/next/package.json').version)")
echo "現在の Next.js バージョン: v$CURRENT_VERSION"

# 2.2 バックアップ
echo "現在の node_modules をバックアップ中..."
mv node_modules node_modules_v${CURRENT_VERSION}.bak
mv package-lock.json package-lock_v${CURRENT_VERSION}.json.bak

# 2.3 アップグレード
echo "Next.js 16 にアップグレード中..."
npm install next@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest

# 2.4 codemod の実行
echo "codemod を実行中..."
npx @next/codemod@latest built-in-next-font .
npx @next/codemod@latest metadata-to-viewport-export .
npx @next/codemod@latest async-request-params .

# 2.5 middleware を proxy.ts に変換
if [ -f src/middleware.ts ]; then
  echo "middleware.ts を proxy.ts に変換中..."
  mv src/middleware.ts src/middleware_v15.bak.ts
fi

# 2.6 ビルドと検証
echo "Next.js 16 でビルド中..."
npm run build

# 2.7 完全テストの実行
echo "テストスイートを実行中..."
npm test
npm run test:e2e

echo ""
echo "=== 移行完了 ==="
echo "Next.js $(node -e "console.log(require('./node_modules/next/package.json').version)")"
echo "React $(node -e "console.log(require('./node_modules/react/package.json').version)")"
echo "ビルド: ✅"
echo "テスト: ✅"
echo "セキュリティ: ✅"

// src/app/security/report/page.tsx
// ============================================
// セキュリティレポートページ
// ============================================
import { headers } from 'next/headers'
import { execSync } from 'child_process'

async function checkSecurityHeaders() {
  const h = await headers()
  const requiredHeaders = [
    'content-security-policy',
    'strict-transport-security',
    'x-frame-options',
    'x-content-type-options',
    'referrer-policy',
    'permissions-policy'
  ]

  const results = requiredHeaders.map(name => ({
    name,
    present: h.has(name),
    value: h.get(name) || ''
  }))

  const score = results.filter(r => r.present).length / results.length * 100
  return { results, score }
}

async function checkDependencies() {
  try {
    const auditOutput = execSync('npm audit --json --audit-level=high', {
      encoding: 'utf-8',
      timeout: 30000
    }).toString()
    const audit = JSON.parse(auditOutput)
    return {
      vulnerabilities: audit.metadata?.vulnerabilities || { high: 0, critical: 0 },
      total: audit.metadata?.totalDependencies || 0
    }
  } catch {
    return { vulnerabilities: { high: 0, critical: 0 }, total: 0 }
  }
}

const gradeMap: Record<number, string> = {
  100: 'A+', 90: 'A', 80: 'B', 70: 'C', 60: 'D', 0: 'F'
}

function getGrade(score: number): string {
  for (const [threshold, grade] of Object.entries(gradeMap)) {
    if (score >= Number(threshold)) return grade
  }
  return 'F'
}

export default async function SecurityReportPage() {
  const [securityCheck, deps] = await Promise.all([
    checkSecurityHeaders(),
    checkDependencies()
  ])

  return (
    <div className="p-6 space-y-6">
      <h1 className="text-2xl font-bold">セキュリティレポート</h1>

      {/* HTTP セキュリティ評価 */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">
          HTTP セキュリティヘッダー
          <span className="ml-2 px-2 py-1 text-sm rounded bg-blue-100">
            グレード: {getGrade(securityCheck.score)}
          </span>
        </h2>
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-gray-500">
              <th className="pb-2">ヘッダー</th>
              <th className="pb-2">ステータス</th>
              <th className="pb-2">値</th>
            </tr>
          </thead>
          <tbody>
            {securityCheck.results.map(r => (
              <tr key={r.name} className="border-t">
                <td className="py-2 font-mono">{r.name}</td>
                <td className="py-2">
                  {r.present ? '✅' : '❌'}
                </td>
                <td className="py-2 text-xs text-gray-500 truncate max-w-md">
                  {r.value || '—'}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* 依存関係セキュリティ */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">依存関係監査</h2>
        <p>合計パッケージ数: {deps.total}</p>
        <div className="flex gap-4 mt-2">
          <span className="text-red-600">
            重大: {deps.vulnerabilities.critical}
          </span>
          <span className="text-orange-600">
            高: {deps.vulnerabilities.high}
          </span>
        </div>
      </div>

      {/* 環境変数チェック */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">環境変数</h2>
        <p className="text-green-600">✅ NEXT_PUBLIC_ シークレットは検出されませんでした</p>
      </div>
    </div>
  )
}