Six Security Mistakes I Shipped to Production

internet
|
v
+---------------------+
| Cloudflare Tunnel |
+---------------------+
|
v
+---------------------+
| Caddy (TLS) |
+---------------------+
|
v
+---------------------+
| UFW + fail2ban | <- drops known-bad IPs
+---------------------+
|
v
+---------------------+
| Vercel edge / |
| Railway ingress |
+---------------------+
|
v
+----------------------------------------+
| middleware.ts |
| |
| 1. matcher -> which routes apply |
| 2. headers -> CSP, HSTS, nosniff |
| 3. nonce -> fresh, per request |
| 4. rateLimit -> KEYED PER ENDPOINT |
| 5. session -> JWT check |
+----------------------------------------+
| |
allow | | deny / redirect
v v
+---------------+ +------------------+
| route.ts | | 307 -> /login |
| Zod validate | | headers RE-SET |
+---------------+ +------------------+
| |
v v
200 / 400 / 429 307 + Retry-After

// middleware.ts - Next.js 14 App Router
import { NextRequest, NextResponse } from 'next/server'

export function middleware(request: NextRequest) {
// WHY: fresh nonce every request. A static CSP string is decoration -
// an attacker only has to find one reflected value to bypass it.
const nonce = Buffer.from(crypto.randomUUID()).toString('base64')

const csp = [
"default-src 'self'",
// WHY: 'strict-dynamic' lets the nonce carry trust to the chunks it loads.
// 'unsafe-inline' is deliberately absent.
"script-src 'self' 'nonce-" + nonce + "' 'strict-dynamic'",
// WHY: Tailwind v4 and Next inject style tags at runtime, so styles
// need the nonce too - otherwise CSP blocks my own UI.
"style-src 'self' 'nonce-" + nonce + "'",
"img-src 'self' blob: data: https:",
"font-src 'self' data:",
// WHY: Prisma talks to Supabase from the browser during auth.
"connect-src 'self' https://*.supabase.co",
"object-src 'none'",
"base-uri 'self'",
"form-action 'self'",
// WHY: clickjacking. 'none' also covers old browsers that ignore CSP.
"frame-ancestors 'none'",
].join('; ')

const headers = new Headers()
headers.set('Content-Security-Policy', csp)
// WHY: exactly 'nosniff'. One hyphen and the browser ignores the header.
headers.set('X-Content-Type-Options', 'nosniff')
headers.set('Referrer-Policy', 'strict-origin-when-cross-origin')
headers.set('X-Frame-Options', 'DENY')
headers.set('Strict-Transport-Security', 'max-age=63072000; includeSubDomains')
headers.set('x-nonce', nonce)

// WHY: one exit point for every branch. This is the fix for mistake 5 -
// NextResponse.redirect() starts EMPTY, so headers must be re-applied.
const finish = (res: NextResponse) => {
headers.forEach((value, key) => res.headers.set(key, value))
return res
}

const token = request.cookies.get('session')?.value
const isPrivate = request.nextUrl.pathname.startsWith('/admin')

if (isPrivate && !token) {
const login = new URL('/login', request.url)
login.searchParams.set('from', request.nextUrl.pathname)
return finish(NextResponse.redirect(login, 307))
}

return finish(NextResponse.next())
}

export const config = {
// WHY: exclude static assets. Running CSP on a 40 KB chunk is wasted work.
matcher: ['/((?!api/auth|_next/static|_next/image|favicon.ico).*)'],
}

// lib/rate-limit.ts
type Bucket = { count: number; resetAt: number }

const buckets = new Map<string, Bucket>()

const DEFAULT_WINDOW_MS = 60_000
const DEFAULT_MAX = 10
// WHY: a hard ceiling. Even if the sweep is broken, memory is bounded.
const MAX_KEYS = 5_000

// WHY: ONE timer for the whole map. A setTimeout per key is how you
// end up with 10,000 live handles in production and no idea why.
const sweeper: ReturnType<typeof setInterval> = setInterval(() => {
const now = Date.now()
for (const [key, bucket] of buckets) {
if (bucket.resetAt <= now) buckets.delete(key)
}
}, DEFAULT_WINDOW_MS)

// WHY: unref only exists on Node handles; the edge runtime returns a number.
;(sweeper as { unref?: () => void }).unref?.()

export type Limit = { ok: boolean; remaining: number; retryAfter: number }

export function rateLimit(
key: string,
max = DEFAULT_MAX,
windowMs = DEFAULT_WINDOW_MS,
): Limit {
const now = Date.now()

// WHY: evict the oldest insertion when over budget. Map preserves
// insertion order, so this is a cheap FIFO - not a real LRU, but it
// keeps a flood of unique IPs from filling the heap.
if (buckets.size >= MAX_KEYS) {
const oldest = buckets.keys().next()
if (!oldest.done) buckets.delete(oldest.value)
}

const bucket = buckets.get(key) ?? { count: 0, resetAt: now + windowMs }

// WHY: roll the window instead of creating a new object, so the
// insertion order stays meaningful for the eviction above.
if (bucket.resetAt <= now) {
bucket.count = 0
bucket.resetAt = now + windowMs
}

bucket.count += 1
buckets.set(key, bucket)

return {
ok: bucket.count <= max,
remaining: Math.max(0, max - bucket.count),
// WHY: ceil, never floor. Rounding down tells clients to retry early.
retryAfter: Math.max(1, Math.ceil((bucket.resetAt - now) / 1000)),
}
}

// app/api/contact/route.ts
import { NextResponse } from 'next/server'
import { rateLimit } from '@/lib/rate-limit'

export async function POST(request: Request) {
// WHY: the key includes the endpoint. Sharing one bucket across routes
// is exactly the mistake that let a form burst starve the dashboard.
const ip =
request.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ?? 'unknown'
const limit = rateLimit('contact:' + ip, 5, 60_000)

// WHY: a 429 without Retry-After is a retry storm with extra steps.
if (!limit.ok) {
return NextResponse.json(
{ error: 'Too many requests. Try again shortly.' },
{
status: 429,
headers: {
'Retry-After': String(limit.retryAfter),
'X-RateLimit-Limit': '5',
'X-RateLimit-Remaining': '0',
'X-RateLimit-Reset': String(
Math.floor(Date.now() / 1000) + limit.retryAfter,
),
},
},
)
}

// ... Zod validate -> prisma -> Resend
}

// lib/schemas.ts
import { z } from 'zod'

// WHY: .strict() turns an unrecognised key into a loud error instead of
// silently dropping data - which is how telephone went missing for a week.
export const contactSchema = z
.object({
nom: z.string().min(2).max(80),
// WHY: the field the clinic actually calls people back on.
telephone: z.string().min(6).max(20),
message: z.string().min(10).max(2000),
reference: z.string().min(1).max(40),
})
.strict()

export type Contact = z.infer<typeof contactSchema>