Securiser une Application Next.js : Le Guide Complet de Cybersecurite pour 2026

// next.config.ts
import type { NextConfig } from "next";
 
const securityHeaders = [
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=63072000; includeSubDomains; preload",
  },
  {
    key: "X-Frame-Options",
    value: "SAMEORIGIN",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "Referrer-Policy",
    value: "strict-origin-when-cross-origin",
  },
  {
    key: "Permissions-Policy",
    value: "camera=(), microphone=(), geolocation=()",
  },
];
 
const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: securityHeaders,
      },
    ];
  },
};
 
export default nextConfig;

curl -I https://votre-domaine.com

// middleware.ts
import { NextRequest, NextResponse } from "next/server";
 
export function middleware(request: NextRequest) {
  const nonce = Buffer.from(crypto.randomUUID()).toString("base64");
 
  const cspHeader = `
    default-src 'self';
    script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
    style-src 'self' 'nonce-${nonce}';
    img-src 'self' blob: data: https:;
    font-src 'self';
    object-src 'none';
    base-uri 'self';
    form-action 'self';
    frame-ancestors 'none';
    upgrade-insecure-requests;
  `.replace(/\s{2,}/g, " ").trim();
 
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set("x-nonce", nonce);
 
  const response = NextResponse.next({
    request: { headers: requestHeaders },
  });
 
  response.headers.set("Content-Security-Policy", cspHeader);
 
  return response;
}
 
export const config = {
  matcher: [
    {
      source: "/((?!api|_next/static|_next/image|favicon.ico).*)",
      missing: [
        { type: "header", key: "next-router-prefetch" },
        { type: "header", key: "purpose", value: "prefetch" },
      ],
    },
  ],
};

// app/layout.tsx
import { headers } from "next/headers";
import Script from "next/script";
 
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const headersList = await headers();
  const nonce = headersList.get("x-nonce") ?? "";
 
  return (
    <html lang="fr">
      <body>
        {children}
        <Script
          nonce={nonce}
          strategy="afterInteractive"
          src="/scripts/analytics.js"
        />
      </body>
    </html>
  );
}

npm install next-auth@beta

// auth.ts
import NextAuth from "next-auth";
import Credentials from "next-auth/providers/credentials";
import { z } from "zod";
import bcrypt from "bcryptjs";
 
const loginSchema = z.object({
  email: z.string().email("Adresse email invalide"),
  password: z
    .string()
    .min(8, "Le mot de passe doit contenir au moins 8 caracteres")
    .max(128, "Le mot de passe est trop long"),
});
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Mot de passe", type: "password" },
      },
      async authorize(credentials) {
        // Valider les donnees d'entree
        const parsed = loginSchema.safeParse(credentials);
        if (!parsed.success) return null;
 
        const { email, password } = parsed.data;
 
        // Rechercher l'utilisateur en base de donnees
        const user = await getUserByEmail(email);
        if (!user || !user.hashedPassword) return null;
 
        // Verifier le mot de passe
        const isValid = await bcrypt.compare(password, user.hashedPassword);
        if (!isValid) return null;
 
        return {
          id: user.id,
          email: user.email,
          name: user.name,
        };
      },
    }),
  ],
  session: {
    strategy: "jwt",
    maxAge: 24 * 60 * 60, // 24 heures
  },
  pages: {
    signIn: "/connexion",
    error: "/connexion?error=true",
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id;
      }
      return token;
    },
    async session({ session, token }) {
      if (token.id) {
        session.user.id = token.id as string;
      }
      return session;
    },
  },
});

// lib/auth-utils.ts
import bcrypt from "bcryptjs";
 
const SALT_ROUNDS = 12;
 
export async function hashPassword(password: string): Promise<string> {
  return bcrypt.hash(password, SALT_ROUNDS);
}
 
export async function verifyPassword(
  password: string,
  hash: string
): Promise<boolean> {
  return bcrypt.compare(password, hash);
}

// middleware.ts (section authentification)
import { auth } from "@/auth";
 
const protectedRoutes = ["/dashboard", "/profil", "/parametres"];
const authRoutes = ["/connexion", "/inscription"];
 
export default auth((req) => {
  const { nextUrl } = req;
  const isLoggedIn = !!req.auth;
 
  const isProtected = protectedRoutes.some((route) =>
    nextUrl.pathname.startsWith(route)
  );
  const isAuthRoute = authRoutes.some((route) =>
    nextUrl.pathname.startsWith(route)
  );
 
  // Rediriger les utilisateurs non connectes
  if (isProtected && !isLoggedIn) {
    const callbackUrl = encodeURIComponent(nextUrl.pathname);
    return Response.redirect(
      new URL(`/connexion?callbackUrl=${callbackUrl}`, nextUrl)
    );
  }
 
  // Rediriger les utilisateurs connectes loin des pages d'auth
  if (isAuthRoute && isLoggedIn) {
    return Response.redirect(new URL("/dashboard", nextUrl));
  }
});

// MAUVAIS — revele si l'email existe dans la base
if (!user) return { error: "Aucun compte avec cet email" };
if (!isValid) return { error: "Mot de passe incorrect" };
 
// BON — message generique qui ne revele rien
if (!user || !isValid) {
  return { error: "Identifiants invalides" };
}

npm install zod

// lib/validations/user.ts
import { z } from "zod";
 
export const createUserSchema = z.object({
  name: z
    .string()
    .min(2, "Le nom doit contenir au moins 2 caracteres")
    .max(50, "Le nom est trop long")
    .regex(
      /^[a-zA-ZÀ-ÿ\s'-]+$/,
      "Le nom ne peut contenir que des lettres, espaces, apostrophes et tirets"
    ),
  email: z
    .string()
    .email("Adresse email invalide")
    .toLowerCase()
    .trim(),
  password: z
    .string()
    .min(8, "Le mot de passe doit contenir au moins 8 caracteres")
    .max(128, "Le mot de passe est trop long")
    .regex(
      /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
      "Le mot de passe doit contenir au moins une majuscule, une minuscule et un chiffre"
    ),
});
 
export const updateProfileSchema = z.object({
  name: z
    .string()
    .min(2)
    .max(50)
    .regex(/^[a-zA-ZÀ-ÿ\s'-]+$/)
    .optional(),
  bio: z
    .string()
    .max(500, "La bio ne peut pas depasser 500 caracteres")
    .optional(),
  website: z
    .string()
    .url("URL invalide")
    .optional()
    .or(z.literal("")),
});
 
export type CreateUserInput = z.infer<typeof createUserSchema>;
export type UpdateProfileInput = z.infer<typeof updateProfileSchema>;

// app/actions/user.ts
"use server";
 
import { createUserSchema } from "@/lib/validations/user";
import { hashPassword } from "@/lib/auth-utils";
 
export async function createUser(formData: FormData) {
  const rawData = {
    name: formData.get("name"),
    email: formData.get("email"),
    password: formData.get("password"),
  };
 
  // Valider les donnees cote serveur
  const result = createUserSchema.safeParse(rawData);
 
  if (!result.success) {
    return {
      success: false,
      errors: result.error.flatten().fieldErrors,
    };
  }
 
  const { name, email, password } = result.data;
 
  // Hasher le mot de passe avant stockage
  const hashedPassword = await hashPassword(password);
 
  // Creer l'utilisateur en base de donnees
  try {
    await db.user.create({
      data: { name, email, hashedPassword },
    });
    return { success: true };
  } catch (error) {
    // Ne jamais exposer les erreurs de base de donnees
    return {
      success: false,
      errors: { _form: ["Une erreur est survenue. Veuillez reessayer."] },
    };
  }
}

// lib/sanitize.ts
import DOMPurify from "isomorphic-dompurify";
 
export function sanitizeHtml(dirty: string): string {
  return DOMPurify.sanitize(dirty, {
    ALLOWED_TAGS: ["b", "i", "em", "strong", "a", "p", "br"],
    ALLOWED_ATTR: ["href", "target", "rel"],
  });
}
 
export function escapeForDisplay(input: string): string {
  return input
    .replace(/&/g, "&")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#x27;");
}

npm install @upstash/ratelimit @upstash/redis

// lib/rate-limit.ts
import { Ratelimit } from "@upstash/ratelimit";
import { Redis } from "@upstash/redis";
 
const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL!,
  token: process.env.UPSTASH_REDIS_REST_TOKEN!,
});
 
// Rate limiter pour les endpoints generaux : 60 requetes par minute
export const generalLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(60, "1 m"),
  analytics: true,
  prefix: "ratelimit:general",
});
 
// Rate limiter strict pour l'authentification : 5 tentatives par 15 minutes
export const authLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(5, "15 m"),
  analytics: true,
  prefix: "ratelimit:auth",
});
 
// Rate limiter pour les API : 100 requetes par minute
export const apiLimiter = new Ratelimit({
  redis,
  limiter: Ratelimit.slidingWindow(100, "1 m"),
  analytics: true,
  prefix: "ratelimit:api",
});

// middleware.ts (section rate limiting)
import { generalLimiter, authLimiter } from "@/lib/rate-limit";
import { NextRequest, NextResponse } from "next/server";
 
function getClientIp(request: NextRequest): string {
  const forwarded = request.headers.get("x-forwarded-for");
  const ip = forwarded?.split(",")[0]?.trim() ?? request.ip ?? "unknown";
  return ip;
}
 
async function handleRateLimit(request: NextRequest) {
  const ip = getClientIp(request);
  const path = request.nextUrl.pathname;
 
  // Rate limiting strict pour les routes d'authentification
  if (path.startsWith("/api/auth") || path === "/connexion") {
    const { success, remaining, reset } = await authLimiter.limit(ip);
 
    if (!success) {
      return NextResponse.json(
        {
          error: "Trop de tentatives. Veuillez reessayer plus tard.",
          retryAfter: Math.ceil((reset - Date.now()) / 1000),
        },
        {
          status: 429,
          headers: {
            "Retry-After": String(Math.ceil((reset - Date.now()) / 1000)),
            "X-RateLimit-Remaining": String(remaining),
          },
        }
      );
    }
  }
 
  // Rate limiting general pour les API
  if (path.startsWith("/api/")) {
    const { success, remaining, reset } = await generalLimiter.limit(ip);
 
    if (!success) {
      return NextResponse.json(
        { error: "Limite de requetes atteinte." },
        {
          status: 429,
          headers: {
            "Retry-After": String(Math.ceil((reset - Date.now()) / 1000)),
            "X-RateLimit-Remaining": String(remaining),
          },
        }
      );
    }
  }
 
  return null; // Pas de rate limit atteint
}

// lib/rate-limit-memory.ts
const requests = new Map<string, { count: number; resetTime: number }>();
 
export function rateLimit(
  ip: string,
  maxRequests: number = 60,
  windowMs: number = 60_000
): { success: boolean; remaining: number } {
  const now = Date.now();
  const record = requests.get(ip);
 
  if (!record || now > record.resetTime) {
    requests.set(ip, { count: 1, resetTime: now + windowMs });
    return { success: true, remaining: maxRequests - 1 };
  }
 
  if (record.count >= maxRequests) {
    return { success: false, remaining: 0 };
  }
 
  record.count++;
  return { success: true, remaining: maxRequests - record.count };
}
 
// Nettoyer les anciennes entrees toutes les 5 minutes
setInterval(() => {
  const now = Date.now();
  for (const [key, value] of requests) {
    if (now > value.resetTime) {
      requests.delete(key);
    }
  }
}, 5 * 60 * 1000);

// lib/csrf.ts
export function validateOrigin(request: Request): boolean {
  const origin = request.headers.get("origin");
  const host = request.headers.get("host");
 
  if (!origin || !host) return false;
 
  const allowedOrigins = [
    `https://${host}`,
    process.env.NEXT_PUBLIC_APP_URL,
  ].filter(Boolean);
 
  return allowedOrigins.includes(origin);
}

// lib/api-middleware.ts
import { NextRequest, NextResponse } from "next/server";
import { validateOrigin } from "@/lib/csrf";
 
export function withCsrfProtection(
  handler: (req: NextRequest) => Promise<NextResponse>
) {
  return async (request: NextRequest) => {
    // Les requetes GET sont sures (pas de mutation)
    if (request.method === "GET" || request.method === "HEAD") {
      return handler(request);
    }
 
    // Verifier l'origine pour les requetes mutantes
    if (!validateOrigin(request)) {
      return NextResponse.json(
        { error: "Requete non autorisee" },
        { status: 403 }
      );
    }
 
    return handler(request);
  };
}

// app/api/articles/route.ts
import { NextRequest, NextResponse } from "next/server";
import { withCsrfProtection } from "@/lib/api-middleware";
import { auth } from "@/auth";
 
async function handler(request: NextRequest) {
  const session = await auth();
  if (!session?.user) {
    return NextResponse.json({ error: "Non authentifie" }, { status: 401 });
  }
 
  const body = await request.json();
  // ... traitement de la requete
  return NextResponse.json({ success: true });
}
 
export const POST = withCsrfProtection(handler);

// lib/env.ts
import { z } from "zod";
 
const envSchema = z.object({
  // Variables serveur uniquement — ne jamais prefixer par NEXT_PUBLIC_
  DATABASE_URL: z.string().url(),
  AUTH_SECRET: z.string().min(32),
  UPSTASH_REDIS_REST_URL: z.string().url(),
  UPSTASH_REDIS_REST_TOKEN: z.string().min(1),
 
  // Variables publiques — disponibles cote client
  NEXT_PUBLIC_APP_URL: z.string().url(),
});
 
// Valider au demarrage — crash immediat si une variable manque
export const env = envSchema.parse(process.env);

# .env.example — Copiez en .env.local et remplissez les valeurs
DATABASE_URL=postgresql://user:password@localhost:5432/mydb
AUTH_SECRET=votre-secret-de-32-caracteres-minimum
UPSTASH_REDIS_REST_URL=https://votre-instance.upstash.io
UPSTASH_REDIS_REST_TOKEN=votre-token-upstash
NEXT_PUBLIC_APP_URL=http://localhost:3000

// app/actions/article.ts
"use server";
 
import { auth } from "@/auth";
import { z } from "zod";
import { revalidatePath } from "next/cache";
 
const articleSchema = z.object({
  title: z.string().min(1).max(200),
  content: z.string().min(10).max(50000),
  published: z.boolean().default(false),
});
 
export async function createArticle(formData: FormData) {
  // 1. Verifier l'authentification
  const session = await auth();
  if (!session?.user?.id) {
    throw new Error("Non authentifie");
  }
 
  // 2. Valider les donnees
  const result = articleSchema.safeParse({
    title: formData.get("title"),
    content: formData.get("content"),
    published: formData.get("published") === "true",
  });
 
  if (!result.success) {
    return { error: result.error.flatten().fieldErrors };
  }
 
  // 3. Verifier les permissions (autorisation)
  const userRole = await getUserRole(session.user.id);
  if (!["admin", "editor"].includes(userRole)) {
    throw new Error("Permissions insuffisantes");
  }
 
  // 4. Effectuer l'operation
  await db.article.create({
    data: {
      ...result.data,
      authorId: session.user.id,
    },
  });
 
  revalidatePath("/articles");
  return { success: true };
}

// BON — Prisma echappe automatiquement les parametres
const user = await prisma.user.findUnique({
  where: { email: userInput },
});
 
// BON — Requete brute avec parametres lies
const results = await prisma.$queryRaw`
  SELECT * FROM users WHERE email = ${userInput}
`;
 
// MAUVAIS — Concatenation de chaines = injection SQL
const results = await prisma.$queryRawUnsafe(
  `SELECT * FROM users WHERE email = '${userInput}'` // VULNERABLE !
);

import { eq } from "drizzle-orm";
import { users } from "@/db/schema";
 
// BON — Drizzle utilise des parametres lies
const user = await db
  .select()
  .from(users)
  .where(eq(users.email, userInput));
 
// MAUVAIS — Ne jamais concatener l'input utilisateur dans du SQL
const user = await db.execute(
  sql`SELECT * FROM users WHERE email = '${userInput}'`  // VULNERABLE !
);
 
// BON — Utiliser sql.placeholder ou les parametres
const user = await db.execute(
  sql`SELECT * FROM users WHERE email = ${userInput}`
);

# Verifier les vulnerabilites connues
npm audit
 
# Corriger automatiquement les failles benignes
npm audit fix
 
# Installer Dependabot ou Renovate pour les mises a jour automatiques

// lib/logger.ts
type LogLevel = "info" | "warn" | "error" | "security";
 
interface LogEntry {
  level: LogLevel;
  message: string;
  timestamp: string;
  ip?: string;
  userId?: string;
  path?: string;
  metadata?: Record<string, unknown>;
}
 
export function log(entry: Omit<LogEntry, "timestamp">) {
  const logEntry: LogEntry = {
    ...entry,
    timestamp: new Date().toISOString(),
  };
 
  // En production, envoyez vers un service de logging (Datadog, Sentry, etc.)
  if (entry.level === "security" || entry.level === "error") {
    console.error(JSON.stringify(logEntry));
  } else {
    console.log(JSON.stringify(logEntry));
  }
}
 
// Exemples d'utilisation
log({
  level: "security",
  message: "Tentative de connexion echouee",
  ip: "192.168.1.1",
  path: "/api/auth/signin",
  metadata: { email: "suspect@example.com", attempt: 5 },
});

// lib/url-validator.ts
const ALLOWED_DOMAINS = [
  "api.example.com",
  "cdn.example.com",
  "images.unsplash.com",
];
 
export function isAllowedUrl(url: string): boolean {
  try {
    const parsed = new URL(url);
 
    // Bloquer les protocoles dangereux
    if (!["http:", "https:"].includes(parsed.protocol)) {
      return false;
    }
 
    // Bloquer les adresses IP locales
    const hostname = parsed.hostname;
    if (
      hostname === "localhost" ||
      hostname === "127.0.0.1" ||
      hostname.startsWith("192.168.") ||
      hostname.startsWith("10.") ||
      hostname.startsWith("172.16.")
    ) {
      return false;
    }
 
    // Verifier la liste blanche de domaines
    return ALLOWED_DOMAINS.some(
      (domain) => hostname === domain || hostname.endsWith(`.${domain}`)
    );
  } catch {
    return false;
  }
}

#!/bin/bash
# security-check.sh — Verification rapide de securite
 
echo "=== Verification de securite ==="
 
# 1. Verifier les dependances vulnerables
echo "\n1. Audit des dependances..."
npm audit --production
 
# 2. Verifier que .env n'est pas committe
echo "\n2. Verification des fichiers sensibles..."
if git ls-files --error-unmatch .env 2>/dev/null; then
  echo "ALERTE : .env est suivi par git !"
else
  echo "OK : .env n'est pas dans git"
fi
 
# 3. Rechercher des secrets potentiels dans le code
echo "\n3. Recherche de secrets dans le code..."
grep -rn "password\|secret\|api_key\|private_key" --include="*.ts" --include="*.tsx" \
  --exclude-dir=node_modules --exclude-dir=.next \
  | grep -v "process.env" \
  | grep -v "schema" \
  | grep -v "type\|interface\|placeholder"
 
echo "\n=== Verification terminee ==="

// Exemple : autoriser Google Analytics et Intercom
const cspHeader = `
  script-src 'self' 'nonce-${nonce}' https://www.googletagmanager.com https://widget.intercom.io;
  connect-src 'self' https://www.google-analytics.com https://api-iam.intercom.io;
`;

"use client";
 
import { useActionState } from "react";
import { createUser } from "@/app/actions/user";
 
export function SignupForm() {
  const [state, formAction, isPending] = useActionState(createUser, null);
 
  return (
    <form action={formAction}>
      <input name="name" type="text" required />
      {state?.errors?.name && (
        <p className="text-red-500 text-sm">{state.errors.name[0]}</p>
      )}
 
      <input name="email" type="email" required />
      {state?.errors?.email && (
        <p className="text-red-500 text-sm">{state.errors.email[0]}</p>
      )}
 
      <input name="password" type="password" required />
      {state?.errors?.password && (
        <p className="text-red-500 text-sm">{state.errors.password[0]}</p>
      )}
 
      <button type="submit" disabled={isPending}>
        {isPending ? "Inscription en cours..." : "Creer un compte"}
      </button>
    </form>
  );
}