What are HTTP security headers?

HTTP security headers are response headers sent by your web server that instruct browsers how to behave when loading your pages. They enable browser-level protections against XSS, clickjacking, MIME sniffing, and other common attacks without changing your application code.

Which header is most important to add?

Content-Security-Policy (CSP) provides the strongest protection against XSS attacks but requires the most configuration. As a starting point, add X-Content-Type-Options: nosniff, X-Frame-Options: DENY, and Strict-Transport-Security: these are simple one-liners with immediate impact.

What does Strict-Transport-Security (HSTS) do?

HSTS tells browsers to always connect to your site over HTTPS for the specified max-age period (usually one year). Once a browser sees this header, it will refuse to connect over HTTP even if a link or bookmark uses http://. The preload directive allows inclusion in browser preload lists.

What does X-Frame-Options do?

X-Frame-Options prevents your page from being embedded in an iframe on another origin, protecting against clickjacking attacks where an attacker overlays invisible frames to trick users into clicking unintended elements.

What is Permissions-Policy?

Permissions-Policy (formerly Feature-Policy) restricts which browser APIs third-party scripts and iframes can access. Setting camera=(), microphone=(), geolocation=() prevents embedded content from accessing these sensitive APIs.

What does Cross-Origin-Embedder-Policy do?

COEP requires all resources loaded by your page to explicitly opt in via CORS or Cross-Origin Resource Policy (CORP). Combined with COOP, this enables cross-origin isolation, which is required to use SharedArrayBuffer and protects against Spectre-type side-channel attacks.

Will adding CSP break my site?

A strict CSP can block inline scripts and styles that your site currently relies on. Start with Content-Security-Policy-Report-Only to observe violations without blocking, then gradually tighten the policy. The snippet generator includes a permissive starter policy.

How do I add headers in Next.js?

In next.config.js, export an async headers() function that returns an array of route-to-headers mappings. The snippet generator produces ready-to-use code for this pattern. Alternatively, you can add headers in middleware.ts using NextResponse.headers.set().

What is the difference between X-XSS-Protection and CSP?

X-XSS-Protection is a legacy header that enabled a built-in XSS filter in old browsers (IE, early Chrome). It is now recommended to set it to 0 (disabled) because the filter itself introduced vulnerabilities in some browsers. CSP is the modern and more powerful replacement.

Hash Generator HMAC Generator Password Strength AES Encrypt / Decrypt JWT Debugger Secure Token Generator CSP Builder Checksum Verifier Security Headers RSA Key Generator Website Scanner Bcrypt Hasher CRC32 Checksum DES / 3DES Cipher XOR Cipher

HTTP Security Headers

Reference and snippet generator for 10 HTTP security headers: HSTS, CSP, X-Frame-Options, Permissions-Policy, and more.

Strict-Transport-SecurityXSS / Injection

Prevents SSL stripping and protocol downgrade attacks.

Forces browsers to use HTTPS for all future requests to this domain.

max-age=31536000; includeSubDomains; preload

X-Frame-OptionsXSS / Injection

Prevents clickjacking attacks.

Prevents the page from being embedded in iframes on other origins. Use SAMEORIGIN to allow same-origin embeds.

DENY

X-Content-Type-OptionsXSS / Injection

Prevents MIME confusion attacks.

Prevents browsers from MIME-type sniffing a response away from the declared content-type.

nosniff

Referrer-PolicyXSS / Injection

Prevents leaking sensitive URL paths to third-party sites.

Controls how much referrer information is sent with requests. The modern browser default.

strict-origin-when-cross-origin

Permissions-PolicyXSS / Injection

Limits attack surface from malicious third-party scripts.

Restricts browser features (camera, mic, geolocation). Replaces the deprecated Feature-Policy header.

camera=(), microphone=(), geolocation=(), payment=()

Content-Security-PolicyXSS / Injection

The most powerful header: prevents XSS and data injection attacks.

Defines trusted sources for scripts, styles, images, and other resources.

default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:

Cross-Origin-Embedder-PolicyXSS / Injection

Enables cross-origin isolation for SharedArrayBuffer, protects against Spectre.

Prevents loading cross-origin resources unless they explicitly grant permission (CORP/CORS).

require-corp

Cross-Origin-Opener-PolicyXSS / Injection

Prevents cross-origin attacks via window references.

Isolates the browsing context from other origins, cutting off cross-window communication.

same-origin

Cross-Origin-Resource-PolicyXSS / Injection

Prevents cross-site leaks and Spectre-style side-channel attacks.

Prevents other origins from reading this resource's response. Works alongside COEP.

same-origin

X-XSS-ProtectionXSS / Injection

The filter itself can introduce vulnerabilities in some browsers.

Legacy XSS filter in older browsers. Modern recommendation is to disable it (set to 0) and rely on CSP.

0

Server Config Snippet

Ready-to-paste configuration for your web server or framework.

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" always;
add_header X-Frame-Options "DENY" always;
add_header X-Content-Type-Options "nosniff" always;
add_header Referrer-Policy "strict-origin-when-cross-origin" always;
add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=()" always;
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Resource-Policy "same-origin" always;
add_header X-XSS-Protection "0" always;

HTTP security headers explained

Modern browsers support a set of HTTP response headers that enable powerful security features without requiring changes to your application logic. These headers are set by your web server or application framework and are evaluated by the browser when rendering each page.

This reference covers the 10 most important security headers, explains what attack each one prevents, and provides recommended values with ready-to-paste snippets for Nginx, Apache, Next.js, and Express.js. Each header card includes a one-click copy button so you can add individual values to your existing configuration.

Step-by-step guide

1
Review the header cards
Each card explains a security header, the risk it mitigates, and the recommended value to use.
2
Copy individual header values
Click the copy icon on any card to copy that header's recommended value to your clipboard.
3
Select your server or framework
Use the tabs below the cards to switch between Nginx, Apache, Next.js, and Express configuration formats.
4
Copy the full snippet
Click 'Copy Snippet' to get a complete, ready-to-paste server configuration block with all 10 headers.
5
Add to your server config
Paste the snippet into your server configuration file and restart or reload the server to apply the headers.

Related Tools

#️⃣

Hash Generator

Compute MD5, SHA-1, SHA-256, SHA-384, and SHA-512 hashes for text or files. All hashes shown simultaneously with one-click copy.

🔐

HMAC Generator

Generate HMAC-SHA-256, HMAC-SHA-384, and HMAC-SHA-512 message authentication codes with a secret key.

💪

Password Strength

Analyze password entropy, character composition, and estimated crack time across different attack scenarios.

🔒

AES Encrypt / Decrypt

Encrypt and decrypt text with AES-256-GCM. Password-derived key via PBKDF2. Output includes salt and IV: fully self-contained.

Frequently Asked Questions

What are HTTP security headers?: HTTP security headers are response headers sent by your web server that instruct browsers how to behave when loading your pages. They enable browser-level protections against XSS, clickjacking, MIME sniffing, and other common attacks without changing your application code.
Which header is most important to add?: Content-Security-Policy (CSP) provides the strongest protection against XSS attacks but requires the most configuration. As a starting point, add X-Content-Type-Options: nosniff, X-Frame-Options: DENY, and Strict-Transport-Security: these are simple one-liners with immediate impact.
What does Strict-Transport-Security (HSTS) do?: HSTS tells browsers to always connect to your site over HTTPS for the specified max-age period (usually one year). Once a browser sees this header, it will refuse to connect over HTTP even if a link or bookmark uses http://. The preload directive allows inclusion in browser preload lists.
What does X-Frame-Options do?: X-Frame-Options prevents your page from being embedded in an iframe on another origin, protecting against clickjacking attacks where an attacker overlays invisible frames to trick users into clicking unintended elements.
What is Permissions-Policy?: Permissions-Policy (formerly Feature-Policy) restricts which browser APIs third-party scripts and iframes can access. Setting camera=(), microphone=(), geolocation=() prevents embedded content from accessing these sensitive APIs.
What does Cross-Origin-Embedder-Policy do?: COEP requires all resources loaded by your page to explicitly opt in via CORS or Cross-Origin Resource Policy (CORP). Combined with COOP, this enables cross-origin isolation, which is required to use SharedArrayBuffer and protects against Spectre-type side-channel attacks.
Will adding CSP break my site?: A strict CSP can block inline scripts and styles that your site currently relies on. Start with Content-Security-Policy-Report-Only to observe violations without blocking, then gradually tighten the policy. The snippet generator includes a permissive starter policy.
How do I add headers in Next.js?: In next.config.js, export an async headers() function that returns an array of route-to-headers mappings. The snippet generator produces ready-to-use code for this pattern. Alternatively, you can add headers in middleware.ts using NextResponse.headers.set().
What is the difference between X-XSS-Protection and CSP?: X-XSS-Protection is a legacy header that enabled a built-in XSS filter in old browsers (IE, early Chrome). It is now recommended to set it to 0 (disabled) because the filter itself introduced vulnerabilities in some browsers. CSP is the modern and more powerful replacement.

AlteredIdea vs alternatives

vs server-side tools: Everything runs in your browser: your data never leaves your device.

vs command-line tools: No setup needed. Works instantly in any browser.

vs paid tools: Completely free, no account required.

Share:Share on X Share on LinkedIn