Essential HTTP Security Headers for Static Sites: CSP, HSTS, and CORS

Static site generators like Astro, Next.js, and Hugo are inherently more secure than WordPress. Because there is no underlying PHP execution or MySQL server to breach, SQL injections and common server exploits are virtually impossible.

However, deploying a static site without properly configuring HTTP Security Headers leaves your visitors exposed to Cross-Site Scripting (XSS), clickjacking, and unauthorized third-party iframe embeds.

Even worse, enterprise prospective clients and security audit scanners will flag your brand as unprofessional if you fail baseline SSL and header checks on tools like SecurityHeaders.com.

Configuring security headers on modern static hosts like Cloudflare Pages, Netlify, or Vercel takes less than 15 minutes.

Here is the exact set of essential HTTP security headers I deploy on every static project, along with real configuration code.

The Essential 6 Security Headers

To achieve an A+ grade on SecurityHeaders.com, your server must return these six response headers:

1. Content-Security-Policy (CSP)

CSP is your primary defense against Cross-Site Scripting (XSS). It tells the browser strictly which external domains are authorized to execute scripts, styles, images, and fonts on your site.

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://challenges.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://api.stripe.com; frame-ancestors 'none';

2. Strict-Transport-Security (HSTS)

Forces browsers to communicate with your domain exclusively over encrypted HTTPS connections, preventing downgrade attacks.

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

3. X-Frame-Options

Prevents your website from being embedded inside an <iframe> on third-party sites, protecting your users against clickjacking attacks.

X-Frame-Options: DENY

4. X-Content-Type-Options

Prevents browsers from MIME-sniffing a response away from the declared content-type (e.g., executing an uploaded text or image file as executable JavaScript).

X-Content-Type-Options: nosniff

5. Referrer-Policy

Controls how much referrer information (the full URL path vs. just the origin domain) is sent to external sites when visitors click external outbound links.

Referrer-Policy: strict-origin-when-cross-origin

6. Permissions-Policy

Disables unnecessary browser hardware APIs (like microphone, camera, geolocation, and battery status) that your static content site has no business accessing.

Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()

Implementation: Cloudflare Pages _headers File

If you host your static site on Cloudflare Pages, configuring these headers requires zero backend code.

Simply create a plain text file named _headers inside your public/ folder (so it gets copied to the root of your build output):

# public/_headers
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' data:; connect-src 'self';

Deploy your site, visit securityheaders.com, enter your domain, and verify your instant A+ rating.

Common Breakage Pitfalls and How to Debug Them

When first rolling out strict security headers—especially a restrictive Content-Security-Policy (CSP)—developers frequently break their own third-party integrations:

1. Google Fonts Blocked: If you load web fonts from Google Fonts, you must include both style-src https://fonts.googleapis.com (for the CSS stylesheet) and font-src https://fonts.gstatic.com (for the actual WOFF2 font binary files). Omitting either causes browsers to fall back silently to system serif fonts.
2. Inline Script Execution: Modern analytics tools and theme-toggle dark mode scripts often rely on tiny inline JavaScript snippets in your document <head>. Using script-src 'self' without 'unsafe-inline' (or cryptographic SHA-256 hashes) will block the theme toggler entirely.
3. Third-Party Payment Frames: If you embed Stripe Elements or Lemon Squeezy overlay modals, you must explicitly allow them under frame-src https://js.stripe.com and connect-src https://api.stripe.com.

To test your CSP without risking production downtime, use the Content-Security-Policy-Report-Only header first.

This directive instructs browsers to log security violations in the DevTools console without actually blocking the resources, letting you discover and fix broken external assets before turning on hard enforcement.

Related Operational Guides

To optimize your domain infrastructure and static web architecture, review:

• Zero-downtime domain migrations: moving DNS cleanly
• Why heavy single-page apps hurt mobile conversion for content sites
• Evaluating Cloudflare R2 vs AWS S3 for solo web app asset storage