Next.js: Fortalecimento de Segurança & Migração de Versão

# Etapa 1: Corrigir Vulnerabilidades de Segurança Imediatamente
npm audit fix
# Adicionar um cabeçalho de segurança ao next.config.js
# Adicionar Token CSRF a Todos os Formulários

# Etapa 2: Migração de Versão (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 [
      {
        // Aplicar a todas as rotas
        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'
          }
        ]
      },
      {
        // Restrições de Segurança Adicionais em Rotas de 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}>
      {/* Campos Ocultos do Token CSRF */}
      <input type="hidden" name="csrf_token" value={getCsrfToken()} />
      
      <input
        type="text"
        name="title"
        placeholder="Título da tarefa"
        className="border p-2 rounded"
      />
      
      <button
        type="submit"
        className="bg-blue-600 text-white px-4 py-2 rounded"
      >
        Criar Tarefa
      </button>
      
      {state.error && (
        <p className="text-red-600 mt-2">{state.error}</p>
      )}
    </form>
  )
}

# Verificar Cabeçalhos de Segurança
curl -I https://taskflow.io

# Saída Esperada
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":{}}

# ✅ Seguro: Usando Variáveis Sem Prefixo
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

# ✅ Correto: NEXT_PUBLIC_ Para chaves públicas
NEXT_PUBLIC_POSTHOG_KEY=phc_publicKey
NEXT_PUBLIC_SENTRY_DSN=https://public@sentry.io/123
NEXT_PUBLIC_APP_URL=https://taskflow.io

# ❌ Perigo: Não armazene chaves sob NEXT_PUBLIC_
NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_live_xxx  # Exposto no navegador!
NEXT_PUBLIC_DATABASE_URL=postgresql://...    # Conexões de Banco de Dados Expostas!

# .gitignore — Segurança de Variáveis de Ambiente
.env
.env*.local
.env.development.local
.env.test.local
.env.production.local

# Não ignore o .env.example (Este é um arquivo de modelo)
!.env.example

// src/lib/env-validation.ts
// Garante que variáveis de ambiente sensíveis estejam inacessíveis no lado do cliente
function validateEnv() {
  if (typeof window !== 'undefined') {
    const nextPublicVars = Object.keys(process.env)
      .filter(key => key.startsWith('NEXT_PUBLIC_'))
    
    // Verificar exposição acidental de variáveis privadas
    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(
          `[AVISO DE SEGURANÇA] ${key} começa com NEXT_PUBLIC_ ` +
          `mas contém palavra-chave sensível: ${suffix}. ` +
          `Isso será exposto no bundle do cliente!`
        )
      }
    }
  }
}

validateEnv()

# Verificar se o JS do cliente contém alguma chave após o build
npm run build

# Procurar palavras-chave sensíveis nos artefatos de build
grep -r "sk_live_" .next/static/ 2>/dev/null || echo "✅ Nenhum segredo do Stripe no bundle do cliente"
grep -r "DATABASE_URL" .next/static/ 2>/dev/null || echo "✅ Nenhum DATABASE_URL no bundle do cliente"
grep -r "AUTH_SECRET" .next/static/ 2>/dev/null || echo "✅ Nenhum AUTH_SECRET no bundle do cliente"

  ▲ Next.js 16.0.0

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types
 ✓ Collecting page data
 ✓ Generating static pages (5/5)
 ✓ Finalizing page optimization

Route (app)              Size     First Load JS
┌ ○ /                    5.1 kB       89 kB
├ ○ /about               2.3 kB       86 kB
└ λ /api/items           0 B          84 kB

○  (Static)   prerendered as static content
λ  (Dynamic)  server-rendered on demand
✅ Nenhum segredo do Stripe no bundle do cliente
✅ Nenhum DATABASE_URL no bundle do cliente
✅ Nenhum AUTH_SECRET no bundle do cliente

# Auditoria Básica
npm audit

# Filtrar por nível de severidade
npm audit --audit-level=high

# Correção Automática (Pode quebrar compatibilidade)
npm audit fix

# Corrigir apenas versões patch
npm audit fix --target=patch

# Gerar Relatório JSON
npm audit --json > security-report.json

# Instalação do Snyk CLI
npm install -g snyk

# Autenticação
snyk auth

# Testar Itens
snyk test

# Monitoramento Contínuo
snyk monitor

# Varredura de Imagem Docker
snyk container test taskflow:latest --file=Dockerfile

# .github/workflows/security.yml
name: Auditoria de Segurança

on:
  push:
    branches: [main]
  schedule:
    - cron: '0 6 * * 1'  # Toda segunda-feira às 6h da manhã

jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - name: Instalar dependências
        run: npm ci
      
      - name: Executar npm audit
        run: npx audit-ci --high --report-type summary
        continue-on-error: true
      
      - name: Varredura de Segurança Snyk
        uses: snyk/actions/node@master
        env:
          SNYK_TOKEN: ${{ secrets.SNYK_TOKEN }}
        with:
          args: --severity-threshold=high
      
      - name: Fazer upload do SARIF
        if: always()
        uses: github/codeql-action/upload-sarif@v3
        with:
          sarif_file: snyk.sarif

// ❌ v14 (antigo) — params síncrono
export default function ProjectPage({
  params
}: {
  params: { id: string }
}) {
  return <div>Projeto {params.id}</div>
}

// ✅ v15 (novo) — params assíncrono
export default async function ProjectPage({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return <div>Projeto {id}</div>
}

// ❌ v14 — generateMetadata síncrono
export function generateMetadata({ params }: { params: { id: string } }) {
  return { title: `Projeto ${params.id}` }
}

// ✅ v15 — generateMetadata assíncrono
export async function generateMetadata({
  params
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  return { title: `Projeto ${id}` }
}

Renderiza a UI do componente generateMetadata.

// ❌ v14 — Obtenção síncrona de cookies
import { cookies } from 'next/headers'

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

// ✅ v15 — Obtenção assíncrona de 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>
}

Renderiza a UI do componente Layout.

// src/proxy.ts — v16 Substitui middleware.ts
// ============================================
// proxy.ts é uma configuração declarativa de regras de roteamento
// ============================================
import { defineProxy } from 'next/proxy'

export default defineProxy({
  // Regras de Correspondência de Rota
  matcher: [
    // Caminhos que Exigem Autenticação
    { pathname: '/dashboard/:path*', requireAuth: true },
    { pathname: '/projects/:path*', requireAuth: true },
    { pathname: '/settings/:path*', requireAuth: true },
    
    // Regras de Redirecionamento
    { pathname: '/old-blog/:slug*', redirect: '/blog/:slug*' },
    
    // Pular recursos estáticos
    { pathname: '/_next/:path*', bypass: true },
    { pathname: '/favicon.ico', bypass: true }
  ],

  // Inspeção de Autenticação
  async auth(request) {
    const session = await getSession(request)
    if (!session) {
      return new Response(null, {
        status: 307,
        headers: { Location: '/login' }
      })
    }
    return null  // Permitido
  },

  // Injeção de Cabeçalhos de Requisição
  async headers(request) {
    return {
      'x-request-id': crypto.randomUUID(),
      'x-user-locale': getPreferredLocale(request)
    }
  }
})

// Funções Utilitárias
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 — Usando cache do fetch
async function getProjects() {
  const res = await fetch('https://api.example.com/projects', {
    next: { revalidate: 300 }
  })
  return res.json()
}

// ✅ v16 — Usando 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 — Versão Simplificada v16
/** @type {import('next').NextConfig} */
const nextConfig = {
  // v16: Turbopack é o padrão. Nenhuma configuração necessária
  // Remova a seguinte configuração do v15:
  // swcMinify: true,       // Padrão do Turbopack
  // compiler: { ... },     // Já integrado
  // webpack: (config) => config,  // Remover webpack personalizado
  
  output: 'standalone',
  
  // v16 PPR Estável
  ppr: true,
  
  // Manter personalizações necessárias
  serverExternalPackages: ['@prisma/client'],
  images: {
    formats: ['image/avif', 'image/webp']
  }
}

module.exports = nextConfig

Configuração do Next.js aplicada. As alterações entram em vigor na reinicialização do servidor.

// === Código Original 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))
  }
}

// === Após a migração 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 (Substitui 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
  }
})

Renderiza a UI do componente ▶ Exemplo: Comparação do sistema antes e depois de uma migração completa conforme descrito na seção.

# ============================================
# security-migration.sh
# Funcionalidades: Script Completo de Fortalecimento de Segurança + Migração de Versão
# ============================================
#!/bin/bash
set -euo pipefail

echo "=== Segurança e Migração do TaskFlow ==="

# Fase 1: Fortalecimento de Segurança
echo ""
echo "--- Fase 1: Fortalecimento de Segurança ---"

# 1.1 Auditoria de Dependências em Tempo de Execução
echo "Executando npm audit..."
npm audit --audit-level=high
npm audit fix --target=minor || true

# 1.2 Validação de Cabeçalhos
echo "Gerando relatório de cabeçalhos de segurança..."
curl -sI http://localhost:3000 | grep -E "^(content-security-policy|strict-transport-security|x-frame-options)" \
  || echo "AVISO: Cabeçalhos de segurança ausentes!"

# 1.3 Inspeção de Vazamento NEXT_PUBLIC
echo "Verificando segredos vazados..."
grep -r "NEXT_PUBLIC_.*SECRET\|NEXT_PUBLIC_.*KEY\|NEXT_PUBLIC_.*PASSWORD" \
  .env* 2>/dev/null && echo "AVISO: Segredos em NEXT_PUBLIC!" || echo "✅ Nenhum segredo vazado"

# 1.4 Verificação de Proteção XSS
echo "Verificando proteção XSS..."
# Testar Codificação de Entrada
echo "<script>alert('xss')</script>" | node -e "
  const { escape } = require('querystring')
  process.stdin.on('data', d => console.log('Codificado:', escape(d.toString())))
"

# Fase 2: Migração de Versão
echo ""
echo "--- Fase 2: Migração de Versão ---"

# 2.1 Verificar a versão atual
CURRENT_VERSION=$(node -e "console.log(require('./node_modules/next/package.json').version)")
echo "Versão atual do Next.js: v$CURRENT_VERSION"

# 2.2 Backup
echo "Fazendo backup do node_modules atual..."
mv node_modules node_modules_v${CURRENT_VERSION}.bak
mv package-lock.json package-lock_v${CURRENT_VERSION}.json.bak

# 2.3 Atualizar
echo "Atualizando para Next.js 16..."
npm install next@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest

# 2.4 Executar codemod
echo "Executando codemods..."
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 Converter middleware para proxy.ts
if [ -f src/middleware.ts ]; then
  echo "Convertendo middleware.ts para proxy.ts..."
  mv src/middleware.ts src/middleware_v15.bak.ts
fi

# 2.6 Build e Verificação
echo "Construindo com Next.js 16..."
npm run build

# 2.7 Executar teste completo
echo "Executando suíte de testes..."
npm test
npm run test:e2e

echo ""
echo "=== Migração Concluída ==="
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 "Build: ✅"
echo "Testes: ✅"
echo "Segurança: ✅"

// src/app/security/report/page.tsx
// ============================================
// Página de Relatório de Segurança
// ============================================
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">Relatório de Segurança</h1>

      {/* Classificação de Segurança HTTP */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">
          Cabeçalhos de Segurança HTTP
          <span className="ml-2 px-2 py-1 text-sm rounded bg-blue-100">
            Nota: {getGrade(securityCheck.score)}
          </span>
        </h2>
        <table className="w-full text-sm">
          <thead>
            <tr className="text-left text-gray-500">
              <th className="pb-2">Cabeçalho</th>
              <th className="pb-2">Status</th>
              <th className="pb-2">Valor</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>

      {/* Segurança de Dependências */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">Auditoria de Dependências</h2>
        <p>Total de pacotes: {deps.total}</p>
        <div className="flex gap-4 mt-2">
          <span className="text-red-600">
            Crítico: {deps.vulnerabilities.critical}
          </span>
          <span className="text-orange-600">
            Alto: {deps.vulnerabilities.high}
          </span>
        </div>
      </div>

      {/* Verificação de Variáveis de Ambiente */}
      <div className="bg-white rounded-lg shadow p-4">
        <h2 className="text-lg font-semibold mb-4">Variáveis de Ambiente</h2>
        <p className="text-green-600">✅ Nenhum segredo NEXT_PUBLIC_ detectado</p>
      </div>
    </div>
  )
}