Vercel Security Configuration with AI Prompts

Configure security headers in my Vercel project.

Create or update vercel.json:

{ "headers": { "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": "X-DNS-Prefetch-Control", "value": "on" } ] } }

Note: HSTS is handled automatically by Vercel for custom domains. For CSP, use Next.js middleware or next.config.js for more control.

Set up secure environment variables in Vercel.

Best practices:

1. Use Vercel Dashboard for secrets (not vercel.json) Dashboard > Settings > Environment Variables
2. Separate by environment:
   • Production: Real API keys
   • Preview: Test keys or mock endpoints
   • Development: Local development keys
3. Never expose server secrets to client: // Next.js: Only NEXT_PUBLIC_ vars go to browser NEXT_PUBLIC_API_URL=https://api.example.com // Exposed DATABASE_URL=postgresql://... // Server only
4. Sensitive variables should be "Sensitive" type:
   • Hidden after creation
   • Not visible in logs
   • Use for: API keys, database passwords
5. Never commit .env files: // .gitignore .env .env.local .env.production
6. Audit variable access: vercel env ls

Pull to local (for development): vercel env pull .env.local

Protect my Vercel preview deployments from public access.

Options:

1. Vercel Authentication (Pro/Enterprise): Dashboard > Settings > Deployment Protection
   • Enable "Vercel Authentication"
   • Only team members can access previews
2. Password Protection (Pro/Enterprise): Dashboard > Settings > Deployment Protection
   • Set a password for preview deployments
   • Share password with testers
3. Custom middleware (all plans): // middleware.ts import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server';
   export function middleware(request: NextRequest) { // Only protect preview deployments if (process.env.VERCEL_ENV === 'preview') { const authHeader = request.headers.get('authorization'); const expectedAuth = Basic ${Buffer.from(admin:${process.env.PREVIEW_PASSWORD}).toString('base64')};

   if (authHeader !== expectedAuth) {
     return new NextResponse('Authentication required', {
       status: 401,
       headers: { 'WWW-Authenticate': 'Basic realm="Preview"' },
     });
   }
   

   
   } return NextResponse.next(); }
4. IP Allowlist (Enterprise): Restrict access to specific IP ranges

Secure my Vercel serverless functions (API routes).

Key security measures:

1. Rate limiting (use Vercel KV or external service): import { Ratelimit } from '@upstash/ratelimit'; import { kv } from '@vercel/kv';
   const ratelimit = new Ratelimit({ redis: kv, limiter: Ratelimit.slidingWindow(10, '10 s'), });
2. Input validation: import { z } from 'zod'; const schema = z.object({ email: z.string().email() }); const result = schema.safeParse(req.body);
3. Authentication middleware: // middleware.ts export function middleware(request: NextRequest) { if (request.nextUrl.pathname.startsWith('/api/admin')) { const token = request.headers.get('authorization'); if (!validateToken(token)) { return NextResponse.json({ error: 'Unauthorized' }, { status: 401 }); } } }
4. Set function timeouts: // vercel.json { "functions": { "api/heavy-task.ts": { "maxDuration": 30 } } }
5. CORS configuration for external access only when needed.