Hardening Production Web Apps with Content-Security-Policy (CSP), HSTS & Subresource Integrity
Configure strict HTTP response headers in Vercel, Nginx, and Express to block Cross-Site Scripting (XSS), clickjacking, MIME sniffing, and SSL stripping.
Even if your backend APIs use parameterized SQL queries and strict authentication, a single reflected or DOM-based Cross-Site Scripting (XSS) flaw or unverified third-party script can exfiltrate user session tokens. HTTP security response headers provide a defense-in-depth browser sandbox that neutralizes entire classes of client-side attacks.
Audit your live domain's HTTP response headers, TLS certificate chain, and DNS security records right now using our Web Guard Security & Header Scanner.
1. Essential Production Security Headers
| HTTP Response Header | Recommended Value | Attack Mitigated |
|---|---|---|
| Strict-Transport-Security | max-age=63072000; includeSubDomains; preload | SSL stripping & downgrade attacks |
| X-Content-Type-Options | nosniff | MIME-type sniffing of uploaded files |
| X-Frame-Options | SAMEORIGIN | UI redress & iframe clickjacking |
| Referrer-Policy | strict-origin-when-cross-origin | Leaking sensitive URL paths in Referer headers |
2. Copy-Ready vercel.json Security Headers Configuration
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "X-Content-Type-Options", "value": "nosniff" },
{ "key": "X-Frame-Options", "value": "SAMEORIGIN" },
{ "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" },
{ "key": "Strict-Transport-Security", "value": "max-age=63072000; includeSubDomains; preload" }
]
}
]
}Frequently Asked Questions
Why does adding a strict Content-Security-Policy break inline scripts or Google Analytics?
By default, a CSP with script-src 'self' blocks all inline <script> blocks and external third-party domains unless you explicitly whitelist the domain or attach a cryptographic nonce/hash to the script tag.
What is the safest way to roll out a new CSP without breaking production traffic?
Deploy the policy first using the Content-Security-Policy-Report-Only header. The browser will log violations to the console and your reporting endpoint without blocking any scripts or stylesheets.