Checking headers with browser DevTools

Open Chrome DevTools (F12) → Network tab → click any request → Headers tab → scroll to Response Headers. Look for Strict-Transport-Security, Content-Security-Policy, X-Content-Type-Options, X-Frame-Options, and Referrer-Policy. Missing headers mean the browser uses permissive defaults, leaving your site exposed.

// JavaScript — check security headers of a URL
async function checkHeaders(url) {
  const res = await fetch(url, { method: "HEAD" });
  const required = [
    "strict-transport-security",
    "content-security-policy",
    "x-content-type-options",
    "x-frame-options",
    "referrer-policy",
    "permissions-policy"
  ];
  return required.map(h => ({
    header: h,
    present: res.headers.has(h),
    value: res.headers.get(h) || "missing"
  }));
}

// Note: fetch() cannot read all headers cross-origin
// Use curl or server-side check for full analysis

Common issues and fixes

Missing HSTS: Add Strict-Transport-Security header after confirming HTTPS works on all pages and subdomains. Missing X-Content-Type-Options: Always add nosniff — it has no side effects. X-Frame-Options ALLOW-FROM: Deprecated in most browsers — use CSP frame-ancestors instead. X-XSS-Protection: 1: Deprecated and can introduce vulnerabilities — set to 0 and use CSP.

Platform-specific configuration

Nginx: Use add_header directives in server blocks (add 'always' flag for error pages). Apache: Use Header directives in .htaccess or httpd.conf. Vercel: Add headers array in vercel.json. Netlify: Create a _headers file in publish directory. Cloudflare: Use Transform Rules or _headers file with Pages. Each platform has different syntax — use the generator above to get the right format.