Web Security Headers Explained: HSTS, CSP, X-Frame-Options, and Best Practices

Security Headers

Security headers are HTTP response headers that instruct a browser on how to handle your website securely. They operate silently in the background and help reduce risks such as insecure connections, script injection, clickjacking, and unintended data exposure. When configured, this allows consistent enforcement across environments.

Common Web Security Headers and Their Purpose

1) Strict-Transport-Security (HSTS)

Strict-Transport-Security ensures that a browser connects to your website using HTTPS only.

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

When a user visits your site over HTTPS and receives this header, the browser remembers the rule for the duration defined in max-age. In this example, 31536000 seconds equals one year.

If the user later types:
http://example.com

the browser automatically converts it to:
https://example.com

before sending the request. If includeSubDomains is present, the same rule applies to all subdomains.

This header is commonly used to prevent downgrade attacks and to make sure encrypted communication is always enforced. It is especially important for login pages, APIs, dashboards, and applications handling sensitive information.

Operational conflicts:
• Any subdomain still serving HTTP will immediately stop working if includeSubDomains is enabled.
• Once cached by the browser, HSTS cannot be removed until the max-age period expires.
• If preload is used and submitted to browser preload lists, removal becomes complex and time-consuming.
• Testing environments that rely on HTTP may become inaccessible.

2) Content-Security-Policy (CSP)

Content-Security-Policy controls which sources the browser is allowed to load content from.

Example:
Content-Security-Policy:
default-src 'self';
script-src 'self';
img-src 'self' https://cdn.example.com;
object-src 'none';

In this configuration, the browser loads resources only from the same domain unless explicitly allowed. Scripts are restricted to your own site. Images may load from your domain and from a trusted CDN. Plugins such as Flash are blocked entirely.

If someone attempts to inject a script like:
<script src="https://malicious-site.com/attack.js"></script>

the browser blocks it because it does not match the approved sources.

CSP is widely used to reduce the risk of Cross Site Scripting and unauthorized content injection. It significantly limits what an attacker can execute inside a compromised page. When using third party services, those domains must be explicitly permitted in the policy.

Operational conflicts:
• Inline scripts and styles will fail unless nonces or hashes are implemented.
• Third-party services such as analytics, chat widgets, payment gateways, or ad scripts will break if not explicitly allowed.
• frame-ancestors in CSP overrides X-Frame-Options and may unintentionally block embeds.
• SPA frameworks often require additional connect-src and script-src permissions.

3) X-Content-Type-Options

This header prevents browsers from guessing file types.

Example:
X-Content-Type-Options: nosniff

Browsers sometimes attempt to interpret files differently from the declared Content-Type. With nosniff, the browser strictly follows the declared type.

For example, if a response is labeled as:
Content-Type: image/jpeg

but actually contains JavaScript, the browser will not attempt to execute it.

This header is commonly used to reduce the risk of file upload abuse and accidental execution of improperly labeled files.

Operational conflicts:
• Assets served with incorrect Content-Type headers will stop loading.
• File upload systems that mislabel content types may cause user-facing errors.

4) X-Frame-Options

X-Frame-Options controls whether your site can be displayed inside an iframe.

Example:
X-Frame-Options: DENY
If another site tries to embed your login page using:
<iframe src="https://example.com/login"></iframe>

the browser blocks it.

Another option is:
X-Frame-Options: SAMEORIGIN

This allows embedding only if the parent page belongs to the same domain.

This header is typically enabled to prevent clickjacking attacks, where users are tricked into interacting with hidden elements layered over a legitimate page.

Operational conflicts:
• Legitimate iframe integrations such as payment processors, embedded dashboards, or partner portals may fail.
• If CSP includes frame-ancestors, it overrides X-Frame-Options.
• Some legacy integrations still rely on iframe embedding.

5) Referrer-Policy

Referrer-Policy determines how much information is sent in the Referer header when users navigate away from your site.

Example:
Referrer-Policy: strict-origin-when-cross-origin
If a user clicks a link from:
https://example.com/order?id=789

to another domain, the browser sends only:
Referer: https://example.com

The full URL including parameters is not shared.

This helps prevent sensitive query parameters from being exposed to external sites while still preserving useful referral data for analytics.

Operational conflicts:
• Marketing attribution tools may receive reduced URL data.
• Affiliate platforms that rely on full referrer URLs may not function as expected.
• Debugging cross-domain flows becomes harder with strict referrer trimming.

6) X-XSS-Protection

X-XSS-Protection relates to legacy browser XSS filtering.
Example:
X-XSS-Protection: 0

Modern browsers rely on Content-Security-Policy for XSS protection. Setting this value to 0 disables older filtering mechanisms that may behave inconsistently.

It is typically configured to avoid relying on deprecated browser features.

Operational conflicts:
• Enabling legacy filtering modes may introduce unexpected behavior in older browsers.
• It provides no protection if CSP is properly configured.

7) Permissions-Policy

Permissions-Policy controls access to browser features and APIs.

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

In this configuration, camera, microphone, and geolocation access are disabled entirely. The Payment API is restricted to the same origin.

If a script attempts to use a blocked feature, the browser denies the request.

This header is used to reduce unnecessary browser capability exposure and to limit access to sensitive device features.

Operational conflicts:
• Video conferencing, maps, payment APIs, or camera-based features may silently fail.
• Third-party iframes requesting restricted permissions will not function.
• Some browser support remains partial.

8) Cross-Origin Isolation Headers

Cross-Origin Isolation headers control how your website interacts with resources from other domains. When enabled, they create a stricter security boundary inside the browser, limiting how cross-origin content is loaded and shared.

This setup requires three headers to work together:
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Resource-Policy: same-origin

When these headers are enabled:

• The browser isolates your website from other origins
• Cross-origin resources must explicitly allow being embedded
• Unapproved third-party resources are blocked automatically

For example, if your site loads a script from a third-party CDN and that CDN does not send compatible cross-origin headers, the browser will block the script from loading.

This prevents unintended data sharing between websites and strengthens protection against certain browser-level attacks.

These headers are typically required only for advanced use cases such as:

• Applications using SharedArrayBuffer
• High-performance WebAssembly workloads
• Security-sensitive environments requiring stronger browser isolation

For standard websites, dashboards, or APIs, cross-origin isolation is generally not required.

Operational conflicts:
• Third-party scripts, images, fonts, or iframes may be blocked if they do not provide compatible headers
• Many advertising, analytics, or external integrations may fail
• All three headers must be configured together to achieve proper isolation
• Incorrect rollout can cause frontend functionality to break

9) Cache-Control for Sensitive Content

Cache-Control determines how responses are stored and reused.

Example:
Cache-Control: no-store, no-cache, must-revalidate, private

With this configuration, the response is not stored permanently. The browser must validate it with the server before reuse, and shared proxies cannot cache it.

If a user logs out and presses the back button, the browser must request a fresh copy rather than displaying cached sensitive data.

This setting is commonly applied to login pages, financial dashboards, and other areas containing private information. It should not be applied to static assets such as images or stylesheets, as it negatively affects performance.

Operational conflicts:
• Disabling caching reduces CDN effectiveness and increases origin load.
• Applying no-store to static assets significantly impacts performance.
• Conflicts may arise with existing caching rules or performance optimization strategies.

Final Recommendation

Security headers should be deployed in a controlled and tested manner. While they improve browser-level protection, overly strict configurations can introduce outages or integration failures.

    • Related Articles

    • Security Shortcuts

      Overview Firewall Security Shortcuts make it easy to apply strong security protections with just a few clicks. Instead of building rules from scratch, each shortcut gives you a ready-to-use firewall configuration designed for a specific scenario such ...
    • Steps to Create a Secure Link

      Overview VergeCloud allows you to generate secure links for files that are protected from unauthorized access. The process involves creating a hash based on the visitor's IP, file path, expiry timestamp, and a secret key. This document will guide you ...
    • VergeCloud Page Rules: A Practical Guide to Fine-Tuning Your Site

      VergeCloud Page Rules allow you to customize and fine-tune how your domain behaves within the VergeCloud secure CDN ecosystem. They give you granular control over performance, security, caching, redirects, and request handling at the edge. Instead of ...
    • JA3 Fingerprinting for Powerful Bot Detection

      Overview Modern attackers frequently rotate IP addresses, modify User-Agent strings, and manipulate network identifiers in an attempt to evade detection. Traditional security methods that rely on these signals often fail when facing sophisticated ...
    • VergeCloud Firewall: A Step-by-Step Configuration Guide

      The VergeCloud Firewall provides granular control over the HTTP(S) traffic flowing to your website or application. Serving as an intelligent security layer at the edge, it allows you to filter requests, protect critical endpoints, block malicious ...