HTTPセキュリティヘッダー

Security headers cost nothing to add and prevent entire classes of attacks — yet most production apps ship missing two or three of them. The bug isn't a bug, exactly; it's missing armor. The browser is willing to enforce a half-dozen protective behaviors for free, but only when the server explicitly asks. Skip the ask, lose the protection. The headers are well-understood, well-documented, supported across every modern browser, and configurable in a few lines of edge config — the persistence of the gap is purely operational. The compounding effect is what matters most: a missing CSP turns a found XSS into account takeover; a missing HSTS turns a hostile-WiFi connection into session hijack; a missing X-Frame-Options enables clickjacking-driven OAuth grants. Each header alone is small; together they're the difference between defense-in-depth and defense-of-one.

Each response header instructs the browser to apply a specific defense. `Content-Security-Policy` restricts which sources scripts, styles, frames, and connects can come from — preventing XSS even when input sanitization fails. `Strict-Transport-Security` (HSTS) forces HTTPS for the configured duration, defeating downgrade attacks on hostile networks. `X-Frame-Options: DENY` (or CSP's `frame-ancestors 'none'`) blocks the page from being embedded in iframes, defeating clickjacking. `X-Content-Type-Options: nosniff` stops the browser from MIME-sniffing a response and treating it as a different content type than the server declared. `Referrer-Policy` limits how much URL info is sent in the `Referer` header on outbound links — protecting tokens that some apps embed in URLs. `Permissions-Policy` disables dangerous browser APIs (camera, geolocation, payment, USB) so an XSS can't suddenly get camera access.

Missing headers rarely cause breaches in isolation — they remove cheap defense layers. A missing CSP means an XSS in your app, however found, escalates to full account takeover via cookie theft and on-page action hijacking. A missing HSTS means hostile-WiFi networks can downgrade users' connections and sniff sessions. A missing X-Frame-Options enables clickjacking — an attacker iframes your OAuth-grant page over a bait UI and tricks users into clicking 'authorize.' Each missing header is a removed safety net.

Add the recommended headers via your edge layer — Next.js middleware (`headers()` in `next.config.js`), Vercel `headers` config, Cloudflare Worker, nginx `add_header`, or wherever your responses originate. Start with: `Content-Security-Policy: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-{NONCE}'; style-src 'self' 'unsafe-inline'; object-src 'none'; base-uri 'self'`. Add `Strict-Transport-Security: max-age=31536000; includeSubDomains; preload` and submit to the HSTS preload list once you're sure subdomains can support it. Set `X-Content-Type-Options: nosniff` and `Referrer-Policy: same-origin` (or `strict-origin-when-cross-origin` for mostly-public sites). Use Permissions-Policy to disable browser features your app doesn't use: `Permissions-Policy: camera=(), microphone=(), geolocation=(), payment=()`. Validate with securityheaders.com — A grade is achievable with afternoon work, A+ with a strict CSP. Re-check after every framework upgrade.