Frontend Security in Next.js 15

در Next.js 15 امنیت فقط به بک‌اند محدود نمی‌شود.
به‌دلیل

• App Router
• Server Components
• Edge Middleware
• API Routes

تنظیم درست امنیت در لایه فرانت‌اند اهمیت بسیار بالایی دارد.

1️⃣ تنظیم Security Headers در Next.js

بهترین نقطه شروع، تنظیم هدرهای امنیتی در next.config.js است.

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  async headers() {
    return [
      {
        source: "/(.*)",
        headers: [
          {
            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=()",
          },
          {
            key: "Strict-Transport-Security",
            value: "max-age=31536000; includeSubDomains; preload",
          },
        ],
      },
    ];
  },
};

module.exports = nextConfig;

2️⃣ Content Security Policy (CSP)

بله، CSP یکی از مهم‌ترین لایه‌های دفاعی در برابر XSS است.

{
  key: "Content-Security-Policy",
  value: `
    default-src 'self';
    script-src 'self';
    style-src 'self' 'unsafe-inline';
    img-src 'self' data: https:;
    font-src 'self';
    connect-src 'self' https://api.example.com;
    frame-ancestors 'none';
  `.replace(/\n/g, ""),
}

نکته مهم:
در پروژه‌های دارای Third-party script (مثل Analytics)، باید domain آن‌ها را به script-src اضافه کنید.

3️⃣ محافظت از API Routes

Next.js 15 (App Router)

    app/api/.../route.ts

مثال بررسی Authorization Header

import { NextResponse } from "next/server";

export async function GET(req: Request) {
  const authHeader = req.headers.get("authorization");

  if (!authHeader) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  // validate token here

  return NextResponse.json({ success: true });
}

همیشه ورودی‌ها را validate کنید (با Zod یا هر validator دیگر).

4️⃣ استفاده از httpOnly Cookies

در Next.js می‌توانید کوکی امن را در Route Handler تنظیم کنید:

import { cookies } from "next/headers";

export async function POST() {
  const cookieStore = cookies();

  cookieStore.set({
    name: "token",
    value: "jwt_token_here",
    httpOnly: true,
    secure: true,
    sameSite: "strict",
    path: "/",
  });

  return new Response("OK");
}

مزایا:

• جلوگیری از دسترسی JavaScript به Token
• کاهش ریسک سرقت Token در صورت XSS

5️⃣ Middleware برای امنیت سراسری

خب Edge Middleware در Next.js 15 می‌تواند درخواست‌ها را قبل از رسیدن به صفحه بررسی کند.

middleware.ts

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

export function middleware(req: NextRequest) {
  const token = req.cookies.get("token");

  if (!token && req.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", req.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ["/dashboard/:path*"]
,
};

کاربرد:

• محافظت از مسیرهای خصوصی
• بررسی توکن
• اعمال Rate Limiting (در صورت نیاز)

6️⃣ جلوگیری از XSS در React Components

در Next.js همچنان قوانین React برقرار است:

• از dangerouslySetInnerHTML بدون sanitize استفاده نکنید
• ورودی‌های کاربر را validate و sanitize کنید

import DOMPurify from "dompurify";

const safeHTML = DOMPurify.sanitize(userInput);

7️⃣ تنظیم CORS در API

اگر از API جداگانه استفاده می‌کنید، CORS را دقیق تنظیم کنید:

return new Response(data, {
  headers: {
    "Access-Control-Allow-Origin": "https://yourdomain.com",
    "Access-Control-Allow-Credentials": "true",
  },
});

هرگز برای API خصوصی از:

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

استفاده نکنید.

8️⃣ Dependency & Build Security

• اجرای منظم:

npm audit

• استفاده از lockfile
• به‌روزرسانی وابستگی‌ها
• غیرفعال کردن source map در production در صورت حساس بودن کد:

productionBrowserSourceMaps: false;

چک‌لیست امنیت Next.js 15

• تنظیم Security Headers
• فعال‌سازی CSP
• استفاده از httpOnly + Secure Cookies
• محافظت از API Routes
• استفاده از Middleware برای مسیرهای خصوصی
• تنظیم دقیق CORS
• بررسی وابستگی‌ها
• اجباری بودن HTTPS

جمع‌بندی

امنیت در Next.js 15 ترکیبی از:

• تنظیم صحیح Headerها
• مدیریت امن Token
• محافظت از Routeها
• و کنترل دقیق منابع مرورگر

امنیت یک تنظیم اضافه نیست؛ بخشی از معماری پایه پروژه است.