Vercel security headers can be configured two ways — via `vercel.json` for any framework, or via Next.js `headers()` for Next.js projects. This guide covers both approaches with complete, production-ready examples.
Anay Pandya
1,368 words
Anay Pandya
Founder of ZeriFlow · 10 years fullstack engineering · About the author
Key Takeaways
Vercel security headers are one of the most commonly missed configuration steps for teams deploying to the platform. Vercel's default behavior is to serve whatever headers your application sends — which, for most frameworks, means no security headers at all. Fixing this takes minutes and dramatically improves your security posture.
<div class="zf-stat-callout" style="background:#0d1117;border:1px solid rgba(16,185,129,0.25);border-left:3px solid #10b981;border-radius:4px;padding:16px 20px;margin:24px 0"> <p style="margin:0 0 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:#10b981;font-family:monospace">ZeriFlow Data — 12,400+ sites analyzed</p> <p style="margin:0;font-size:13px;color:#e2e8f0;line-height:1.6;font-family:monospace">ZeriFlow data: the average site passes only 4 out of 11 security header checks. The most commonly missing are Content-Security-Policy (64% absent), Permissions-Policy (77% absent), and HSTS (59% absent).</p> </div>
Keep reading
Is your site actually secure?
Run a free check — 60 seconds
This guide covers two configuration paths: vercel.json (works with any framework) and Next.js headers() (the recommended approach for Next.js projects). Both approaches are fully copy-paste ready.
Scan your Vercel deployment with ZeriFlow to see exactly which headers are missing before you start.
The vercel.json file at your project root controls deployment configuration including headers, redirects, and rewrites. This approach works for any framework deployed on Vercel — React, Vue, Svelte, Astro, or plain HTML.
Create or update vercel.json in your project root:
{
'headers': [
{
'source': '/(.*)',
'headers': [
{
'key': 'X-Frame-Options',
'value': 'DENY'
},
{
'key': 'X-Content-Type-Options',
'value': 'nosniff'
},
{
'key': 'X-XSS-Protection',
'value': '1; mode=block'
},
{
'key': 'Referrer-Policy',
'value': 'strict-origin-when-cross-origin'
},
{
'key': 'Permissions-Policy',
'value': 'geolocation=(), microphone=(), camera=(), payment=(), usb=()'
},
{
'key': 'Strict-Transport-Security',
'value': 'max-age=31536000; includeSubDomains; preload'
},
{
'key': 'Content-Security-Policy',
'value': 'default-src self; script-src self unsafe-inline; style-src self unsafe-inline; img-src self data: https:; font-src self https://fonts.gstatic.com; connect-src self; frame-ancestors none;'
}
]
},
{
'source': '/api/(.*)',
'headers': [
{
'key': 'Cache-Control',
'value': 'no-store'
}
]
}
]
}Important caveats for vercel.json:
- The source field uses path-to-regexp syntax. /(.*) matches all routes.
- Headers defined in vercel.json are merged with headers your application sends. If your application sends the same header, the application value takes precedence.
- Deploy the updated vercel.json and verify with curl -I https://yourdomain.vercel.app.
For Next.js projects, the headers() function in next.config.js (or next.config.mjs) is the idiomatic way to configure HTTP headers. It runs at build time and has access to Next.js's full path matching capabilities.
// next.config.js
const securityHeaders = [
{
key: 'X-DNS-Prefetch-Control',
value: 'on'
},
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload'
},
{
key: 'X-Frame-Options',
value: 'SAMEORIGIN'
},
{
key: 'X-Content-Type-Options',
value: 'nosniff'
},
{
key: 'X-XSS-Protection',
value: '1; mode=block'
},
{
key: 'Referrer-Policy',
value: 'strict-origin-when-cross-origin'
},
{
key: 'Permissions-Policy',
value: 'camera=(), microphone=(), geolocation=()'
},
{
key: 'Content-Security-Policy',
value: ContentSecurityPolicy.replace(/
/g, '')
}
]
module.exports = {
async headers() {
return [
{
source: '/(.*)',
headers: securityHeaders,
},
]
},
}Building a robust CSP for Next.js:
Next.js uses inline scripts for hydration, which complicates strict CSP implementation. The cleanest approach uses nonces:
// middleware.js (Next.js 13+ App Router)
import { NextResponse } from 'next/server'
import crypto from 'crypto'
export function middleware(request) {
const nonce = Buffer.from(crypto.randomUUID()).toString('base64')
const cspHeader = `
default-src 'self';
script-src 'self' 'nonce-${nonce}' 'strict-dynamic';
style-src 'self' 'nonce-${nonce}';
img-src 'self' blob: data: https:;
font-src 'self';
object-src 'none';
base-uri 'self';
form-action 'self';
frame-ancestors 'none';
block-all-mixed-content;
upgrade-insecure-requests;
`
const contentSecurityPolicyHeaderValue = cspHeader.replace(/\s{2,}/g, ' ').trim()
const requestHeaders = new Headers(request.headers)
requestHeaders.set('x-nonce', nonce)
requestHeaders.set('Content-Security-Policy', contentSecurityPolicyHeaderValue)
const response = NextResponse.next({ request: { headers: requestHeaders } })
response.headers.set('Content-Security-Policy', contentSecurityPolicyHeaderValue)
return response
}
export const config = {
matcher: [
{
source: '/((?!api|_next/static|_next/image|favicon.ico).*)',
missing: [
{ type: 'header', key: 'next-router-prefetch' },
{ type: 'header', key: 'purpose', value: 'prefetch' },
],
},
],
}Then in your layout.tsx:
import { headers } from 'next/headers'
export default function RootLayout({ children }) {
const nonce = headers().get('x-nonce')
return (
<html>
<head>
<script nonce={nonce} src='/your-inline-script.js' />
</head>
<body>{children}</body>
</html>
)
}The Strict-Transport-Security header in both configurations above uses max-age=63072000 (2 years), which is the value recommended for HSTS preload list inclusion. The preload directive allows your domain to be submitted to browser vendors' hard-coded HTTPS-only lists.
Before adding `preload`:
- Ensure ALL subdomains are HTTPS-ready (including www, api, cdn, etc.)
- Ensure you are committed to HTTPS permanently — preload removal takes months
- Test with max-age=300 (5 minutes) first, then increase gradually
Vercel automatically serves all deployments over HTTPS and redirects HTTP to HTTPS by default. You do not need to configure this manually. However, you can verify it is working and add additional redirect rules in vercel.json:
{
'redirects': [
{
'source': '/(.*)',
'has': [{ 'type': 'header', 'key': 'x-forwarded-proto', 'value': 'http' }],
'destination': 'https://yourdomain.com/$1',
'permanent': true
}
]
}This redirect rule catches any HTTP requests that somehow reach Vercel's origin (in practice, Vercel handles this at the edge, but this adds a belt-and-suspenders guarantee).
After deploying your header changes, run a ZeriFlow scan on your Vercel domain to confirm: - All security headers are present in HTTP responses - CSP is syntactically correct and present - HSTS max-age is sufficient - No mixed content is detected - X-Frame-Options or frame-ancestors CSP directive is present
### Q: Do Vercel headers apply to preview deployments?
A: Yes. Headers configured in vercel.json or next.config.js apply to all deployments — production, preview, and development (via vercel dev). This is useful for catching security regressions in PRs before they reach production.
### Q: Why does my CSP break Next.js hot reloading in development?
A: Next.js development mode uses WebSocket connections and inline scripts that violate strict CSP. Use process.env.NODE_ENV === 'development' to apply a relaxed CSP in development and the strict policy in production only.
### Q: Can I use environment variables in vercel.json headers?
A: Not directly — vercel.json is a static JSON file. For dynamic headers, use Next.js middleware or API routes where you have access to environment variables at request time.
### Q: How do I handle third-party scripts (analytics, chat widgets) in my CSP?
A: Add the script source to your script-src directive and any API endpoints they call to connect-src. For Google Analytics 4: add https://www.googletagmanager.com and https://www.google-analytics.com to both script-src and connect-src. Review the documentation for each third-party service — most provide CSP requirements in their integration docs.
### Q: What is the difference between X-Frame-Options and frame-ancestors in CSP?
A: X-Frame-Options is the older mechanism, supported by all browsers. frame-ancestors in CSP is more powerful — it can specify multiple allowed origins and is not ignored in cross-origin iframes like XFO sometimes is. Best practice is to set both: X-Frame-Options: DENY for legacy browser support and frame-ancestors 'none' in your CSP for complete coverage.
Vercel security headers require minimal effort to configure but provide substantial protection. The vercel.json approach takes five minutes and works immediately. The Next.js headers() approach with nonce-based CSP takes longer but provides the strongest security posture possible for a Next.js application.
Neither approach requires any Vercel paid plan features — security headers work identically on free, Pro, and Enterprise tiers.
Verify your complete security configuration with ZeriFlow after deploying. The 80+ automated checks will confirm your headers are correct, your HTTPS is configured properly, and flag any remaining issues with clear remediation guidance.
<!-- zf-internal-links -->
Scan your Vercel deployment's security headers.
80+ checks in 60 seconds — free.
Related resources
Website Vulnerability Scanner
Run a broader website security audit across headers, TLS, DNS, cookies, SEO, and disclosure checks.
Security Headers Checker
Check CSP, HSTS, X-Frame-Options, and other response headers.
SSL Checker
Review TLS certificate, HTTPS, and transport security signals.
DMARC Checker
Validate email authentication records for domain spoofing protection.
CSP Checker
Review Content-Security-Policy coverage and common gaps.
June 24, 2026
Best Security Tools for AI Startups
Monitor your security score
Schedule recurring scans and catch regressions after deployments.