Security Headers

public/_headers applies HTTP security headers to every Cloudflare Pages response. No server config needed.

---

Full template

For a site using GA4 + Web3Forms + Google Maps + Cashfree:

/*
  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://www.googletagmanager.com https://www.google-analytics.com https://sdk.cashfree.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' https://www.google-analytics.com https://region1.google-analytics.com https://www.googletagmanager.com https://stats.g.doubleclick.net https://api.web3forms.com https://sdk.cashfree.com https://api.cashfree.com https://sandbox.cashfree.com; frame-src https://sdk.cashfree.com https://www.google.com; frame-ancestors 'self'; object-src 'none'; base-uri 'self'

---

What each header does

Header	Purpose
X-Frame-Options: SAMEORIGIN	Prevents clickjacking - page can only be framed by the same domain
X-Content-Type-Options: nosniff	Prevents MIME type sniffing attacks
Referrer-Policy	Controls how much referrer info is shared on navigation
Strict-Transport-Security	Forces HTTPS for 1 year, tells browsers to preload HSTS
Permissions-Policy	Disables camera, mic, and geolocation access
Content-Security-Policy	Whitelist of allowed content sources - main XSS defence

---

CSP sources by feature

Add or remove based on which third parties the site uses:

Always include (our stack baseline)

default-src 'self';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
img-src 'self' data: https:;
font-src 'self';
frame-ancestors 'self';
object-src 'none';
base-uri 'self';

GA4

script-src ... https://www.googletagmanager.com https://www.google-analytics.com;
connect-src ... https://www.google-analytics.com https://region1.google-analytics.com https://www.googletagmanager.com https://stats.g.doubleclick.net;

Web3Forms

connect-src ... https://api.web3forms.com;

Cashfree

script-src ... https://sdk.cashfree.com;
connect-src ... https://sdk.cashfree.com https://api.cashfree.com https://sandbox.cashfree.com;
frame-src ... https://sdk.cashfree.com;

Google Maps embed

frame-src ... https://www.google.com;

---

Common CSP errors

If the browser console shows Content Security Policy: The page's settings blocked...:

1. Identify the blocked source from the error message
2. Add it to the appropriate directive in _headers
3. Push - Cloudflare applies the new headers on the next deploy (no restart needed)

---

Testing headers

After deploying, check headers using:

• Browser DevTools -> Network -> any request -> Response headers
• securityheaders.com - grades your headers