Free Next.js Security Scanner

Next.js Security Risks

Next.js is the most popular React framework, powering millions of production applications. Its hybrid SSR/CSR architecture creates unique security considerations that traditional SPA frameworks don't have.

1. Exposed API Routes

Next.js API routes (/api/*) are serverless functions that run on the server. By default, they have no authentication, no rate limiting, and no input validation. Any API route you create is publicly accessible.

// VULNERABLE — No authentication
// pages/api/users.js
export default async function handler(req, res) {
  const users = await db.query('SELECT * FROM users');
  res.json(users); // Exposes all user data!
}

// SECURE — With authentication and authorization
import { getServerSession } from 'next-auth';
export default async function handler(req, res) {
  const session = await getServerSession(req, res, authOptions);
  if (!session || session.user.role !== 'admin') {
    return res.status(403).json({ error: 'Forbidden' });
  }
  const users = await db.query('SELECT id, name, email FROM users');
  res.json(users);
}

2. Environment Variable Exposure

Variables prefixed with NEXT_PUBLIC_ are embedded in the client-side JavaScript bundle and visible to anyone. Never use this prefix for secrets.

# .env — DANGEROUS
NEXT_PUBLIC_DATABASE_URL=postgres://user:pass@host/db  # Exposed to client!
NEXT_PUBLIC_STRIPE_SECRET_KEY=sk_live_xxx              # Exposed to client!

# .env — CORRECT
DATABASE_URL=postgres://user:pass@host/db              # Server-only
STRIPE_SECRET_KEY=sk_live_xxx                          # Server-only
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_xxx         # Safe for client

3. Missing Security Headers

Next.js does not add security headers by default. You must configure them in next.config.js:

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self' 'unsafe-inline'" },
        { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
        { 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=()' },
      ],
    }];
  },
};

4. Server-Side Request Forgery (SSRF)

When getServerSideProps or Server Components fetch URLs based on user input, attackers can make the server request internal resources:

// VULNERABLE — User controls the URL
export async function getServerSideProps({ query }) {
  const res = await fetch(query.url); // SSRF! User can request internal services
  const data = await res.json();
  return { props: { data } };
}

// SECURE — Validate and whitelist URLs
const ALLOWED_HOSTS = ['api.example.com', 'cdn.example.com'];
export async function getServerSideProps({ query }) {
  const url = new URL(query.url);
  if (!ALLOWED_HOSTS.includes(url.hostname)) {
    return { notFound: true };
  }
  const res = await fetch(url.toString());
  const data = await res.json();
  return { props: { data } };
}

Next.js Security Checklist

1. Authenticate all API routes — use NextAuth.js or custom middleware
2. Add rate limiting to API routes (use next-rate-limit or Vercel's built-in)
3. Validate all input with Zod, Joi, or similar
4. Never prefix secrets with NEXT_PUBLIC_
5. Configure security headers in next.config.js
6. Set up CORS properly for API routes
7. Validate URLs in getServerSideProps to prevent SSRF
8. Use dangerouslySetInnerHTML only with DOMPurify
9. Run npm audit regularly and fix vulnerabilities
10. Enable Vercel's DDoS protection and WAF if deployed there
11. Set up SPF, DKIM, and DMARC for your domain
12. Schedule regular security scans

Related guides:

• Security Headers Guide
• API Security Best Practices
• CORS Fix Guide
• XSS Prevention Guide
• React App Security Scanner