Security Headers: The First Line of Defense for Your Website

Security headers are HTTP response headers that tell browsers how to behave when handling your site's content. They're your first line of defense against attacks like cross-site scripting (XSS), clickjacking, and data injection.

The best part: implementing security headers is free and fast. Most can be added with a few lines of server configuration. Yet the majority of websites — including many well-known brands — are missing critical headers. Mozilla Observatory scans show that over 90% of websites score F on security headers.

Security headers don't just protect your users. They also affect your SEO and trust. Google considers site security as a ranking factor, and browsers increasingly warn users about insecure sites.

CSP is the most powerful and most complex security header. It tells the browser exactly which sources of content are allowed to load on your page — scripts, styles, images, fonts, frames, and more.

Why it matters: CSP is the primary defense against XSS attacks. If an attacker manages to inject a malicious script, CSP can prevent the browser from executing it because the script's source isn't in the allowlist.

Starting point:

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

Key directives:

• default-src 'self' — Only allow content from your own domain by default.
• script-src — Which domains can serve JavaScript. Avoid 'unsafe-inline' and 'unsafe-eval' for scripts.
• frame-ancestors 'none' — Prevents your site from being embedded in iframes (clickjacking protection).
• upgrade-insecure-requests — Automatically upgrades HTTP requests to HTTPS.

Start with Content-Security-Policy-Report-Only to test your policy without breaking anything. Monitor the reports, fix violations, then switch to enforcing mode.

HSTS tells browsers to always use HTTPS when communicating with your site, even if the user types http:// in the address bar.

Why it matters: Without HSTS, an attacker on a public Wi-Fi network can intercept the initial HTTP request (before the redirect to HTTPS) and perform a man-in-the-middle attack. HSTS eliminates this window.

Recommended value:

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

• max-age=31536000 — Browser remembers to use HTTPS for 1 year.
• includeSubDomains — Applies to all subdomains too.
• preload — Allows submission to the HSTS preload list, which hardcodes HTTPS into browsers.

Important: Before enabling HSTS, make sure your entire site works on HTTPS. Once the header is set and cached by browsers, there's no easy way to go back to HTTP.

Beyond CSP and HSTS, these headers take minutes to add and significantly improve your security posture:

• X-Frame-Options: DENY — Prevents clickjacking by blocking your site from being loaded in iframes. Use SAMEORIGIN if you embed your own content.
• X-Content-Type-Options: nosniff — Prevents browsers from MIME-sniffing a response away from the declared content type. Stops attacks that trick browsers into executing uploaded files as scripts.
• Referrer-Policy: strict-origin-when-cross-origin — Controls how much referrer information is sent with requests. Prevents leaking sensitive URL paths to third parties.
• Permissions-Policy — Controls which browser features (camera, microphone, geolocation, payment) your site can use. Disable what you don't need:

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

Together with CSP and HSTS, these headers can move your Mozilla Observatory score from F to A+ in under an hour.

After configuring headers, verify they're working correctly:

• Mozilla Observatory — Free online scan that grades your headers A+ through F. This is the same tool Webmatik uses in its security audit.
• securityheaders.com — Quick visual check of all response headers with color-coded ratings.
• Browser DevTools — Network tab → click any request → Headers tab shows exactly what your server is sending.
• curl — Run curl -I https://yoursite.com to see response headers from the command line.

Aim for at least a B+ on Mozilla Observatory. An A+ is achievable for most sites with proper CSP, HSTS, and the other headers listed above.