Utilumo
LightDarkSystem
Explainer1 min readUpdated June 29, 2026

What are HTTP security headers?

Short answer

HTTP security headers are response headers that set browser rules for a page. They can require HTTPS, reduce cross-site scripting risk, block framing, limit referrer data, and disable sensitive browser features.

Why security headers matter

A browser cannot guess every security rule for a website. Security headers let the site tell the browser what is allowed: where scripts may load from, whether the page can be embedded in an iframe, how much referrer information to send, and whether HTTPS must be used.

Privacy-first defaultGood headers are not only about attacks. Referrer-Policy and Permissions-Policy also reduce unnecessary data sharing and browser feature access.
Try it: Security Headers GeneratorGenerate a Cloudflare Pages _headers file with CSP, HSTS, Referrer-Policy, Permissions-Policy, and other browser security headers.Open tool

The most important headers

  • Content-Security-Policy controls where scripts, styles, images, fonts, frames, and connections can load from.
  • Strict-Transport-Security tells browsers to use HTTPS for future visits.
  • X-Content-Type-Options: nosniff prevents browsers from guessing a different file type.
  • Referrer-Policy limits how much URL information is sent to other sites.
  • Permissions-Policy disables browser features such as camera, microphone, geolocation, or payment by default.
  • X-Frame-Options or CSP frame-ancestors can prevent clickjacking through unwanted framing.

Why CSP needs testing

Content Security Policy is powerful, but a strict policy can break a site if scripts, styles, analytics, images, or embeds are not listed correctly. Start with a balanced policy, test important pages, then tighten it over time.

/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()
  Content-Security-Policy: default-src 'self'; object-src 'none'; frame-ancestors 'none'
Example Cloudflare Pages _headers entry

How to roll out changes

  • Deploy headers to a preview environment first.
  • Open the most important pages and check the browser console.
  • Confirm analytics, images, fonts, forms, and downloads still work.
  • Only then deploy to production.

References

Questions

Do security headers replace application security?

No. They are a browser-side safety layer. You still need secure code, safe dependencies, correct authentication, and careful handling of user input.

Should every site use HSTS?

Production HTTPS sites usually should. Do not enable preload unless you are confident all subdomains support HTTPS, because preload is intentionally hard to undo quickly.

Is X-Frame-Options enough?

X-Frame-Options is still useful, but CSP frame-ancestors is more flexible and is the modern way to control which sites can embed your pages.

Does this send my data anywhere?

No. Utilumo's developer tools parse and transform input inside the browser tab. Nothing is uploaded, stored, or logged.

Keep reading