Platform Guide

How to Add Security Headers on Vercel

Add CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy to Vercel. Copy-paste configuration included.

The 6 Essential Security Headers

Content-Security-Policy (CSP)

Controls which sources of scripts, styles, and resources are allowed. Prevents XSS by blocking inline scripts and unauthorized external scripts.

Strict-Transport-Security (HSTS)

Forces browsers to always use HTTPS, preventing protocol downgrade attacks and cookie hijacking over HTTP.

X-Frame-Options

Prevents your page from being loaded in an iframe, blocking clickjacking attacks.

X-Content-Type-Options

Prevents browsers from MIME-sniffing the content type, stopping attacks that rely on content type confusion.

Referrer-Policy

Controls how much referrer information is sent with requests, protecting user privacy and preventing information leakage.

Permissions-Policy

Controls which browser features (camera, microphone, geolocation) your page can use, reducing attack surface.

Vercel Configuration

Add this to next.config.js (Next.js) or vercel.json (other frameworks) in your project root:

// next.config.js (for Next.js on Vercel)
const nextConfig = {
  poweredByHeader: false,
  async headers() {
    return [{
      source: '/(.*)',
      headers: [
        { key: 'X-Frame-Options', value: 'DENY' },
        { key: 'X-Content-Type-Options', value: 'nosniff' },
        { key: 'Strict-Transport-Security', value: 'max-age=63072000; includeSubDomains; preload' },
        { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
        { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
        { key: 'Content-Security-Policy', value: "default-src 'self'; script-src 'self' 'unsafe-inline';" },
      ],
    }];
  },
};
module.exports = nextConfig;

Vercel automatically provides HTTPS. Set poweredByHeader: false to remove the X-Powered-By header. For non-Next.js frameworks, use vercel.json headers configuration.

How to Test Your Headers

curl -I https://your-app.vercel.app

Or use Cybrove's free security check to automatically validate all security headers and get specific fix recommendations.

Complete guide to fixing missing security headers

In-depth blog post covering all headers across all platforms

Frequently Asked Questions

How do I add security headers to Vercel?

Add security headers to Vercel by modifying next.config.js (Next.js) or vercel.json (other frameworks) in your project root. The essential headers are CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, and Permissions-Policy. See the configuration example above.

How do I test if my Vercel security headers are working?

Run: curl -I https://your-app.vercel.app and check the response headers. Or use Cybrove's free security check at cybrove.com/scan which automatically validates all security headers and reports which are missing.

Which security headers are most important for Vercel?

CSP (prevents XSS), HSTS (forces HTTPS), and X-Frame-Options (prevents clickjacking) are the most critical. X-Content-Type-Options and Referrer-Policy provide additional protection with minimal configuration effort.

Check if your Vercel headers are configured correctly

Free security check validates all 6 headers plus SSL, DNS, and email authentication.

Free Security Check