Security Headers & CSP Generator
Generate Content-Security-Policy (CSP), HSTS, X-Frame-Options and Permissions-Policy security headers for Next.js 15+, Nginx, Cloudflare and Apache web servers, and armor your site against XSS and clickjacking at an A+ level.
Guide to HTTP Security Headers, Content Security Policy (CSP) and OWASP Security
In modern web applications, security is not limited to backend code quality. HTTP Security Headers, which work at the browser level, are the first line of defense that brings Cross-Site Scripting (XSS), clickjacking, man-in-the-middle (MITM) attacks and data leaks down to zero. This tool generates headers that deliver an A+ Security Score in one click for Next.js 15+, Nginx, Cloudflare and Apache.
1. Critical HTTP Security Headers and What They Do
The 6 core headers every modern site should have, according to Mozilla Observatory, SecurityHeaders.com and OWASP security criteria:
| Header | Recommended Value | Threat It Prevents | Security Score Impact |
|---|---|---|---|
| Content-Security-Policy (CSP) | default-src 'self'; script-src 'self'... | XSS (Cross-Site Scripting), data theft, unauthorized code injection. | +30 Points (Most Critical) |
| Strict-Transport-Security (HSTS) | max-age=63072000; includeSubDomains; preload | MITM (man-in-the-middle), SSL stripping, insecure HTTP connections. | +25 Points |
| X-Frame-Options | DENY (or SAMEORIGIN) | Clickjacking (embedding the site in a hidden iframe to trick users into clicking buttons). | +15 Points |
| X-Content-Type-Options | nosniff | MIME-type sniffing (malicious scripts disguised as images or text being executed). | +10 Points |
| Referrer-Policy | strict-origin-when-cross-origin | Sensitive URL parameters and session tokens leaking to external sites. | +10 Points |
| Permissions-Policy | camera=(), microphone=(), geolocation=() | Unauthorized access to the user's hardware sensors (camera, microphone, location). | +10 Points |
2. Next.js 15+ next.config.mjs or Middleware Integration
In Next.js projects, adding the headers to next.config.mjs is the most performant approach. The server attaches the response headers to every request:
// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
async headers() {
return [
{
source: '/(.*)',
headers: [
{
key: 'Content-Security-Policy',
value: "default-src 'self'; script-src 'self' 'unsafe-inline' https://apis.google.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:;",
},
{
key: 'Strict-Transport-Security',
value: 'max-age=63072000; includeSubDomains; preload',
},
{
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=()',
},
],
},
]
},
}
export default nextConfig3. Production Configuration for the Nginx Web Server
If you use an Nginx reverse proxy on Linux or Docker, you can place these directives in /etc/nginx/conf.d/security.conf:
# Nginx Security Headers
add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=()" always;
add_header Content-Security-Policy "default-src 'self'; img-src 'self' data: https:; script-src 'self' 'unsafe-inline';" always;