Using X-Frame-Options to Avoid Clickjacking in Your Web Application

X-Frame-Options is a response header that tells the browser whether other sites may load your pages in a frame. Setting it reduces the risk of clickjacking, where an attacker hides your page under bait content to capture a user's clicks. DENY blocks all framing, SAMEORIGIN allows framing only by your own origin, and the older ALLOW-FROM value is obsolete and ignored by modern browsers. The Content Security Policy frame-ancestors directive is the modern standard for the same control, so sending both is generally the better practice.

Short answer

# server or location block (illustrative)
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self'" always;

# Then: sudo nginx -t && sudo systemctl reload nginx

curl -sI https://example.com | grep -i -E "x-frame-options|content-security-policy"

# Expected:
x-frame-options: SAMEORIGIN
content-security-policy: frame-ancestors 'self'

Clickjacking tricks a user into clicking something different from what they think they are clicking. An attacker loads your page in a hidden or transparent frame, positions it over bait content, and captures the click. It is an old technique, but plenty of applications still leave the door open.

How it works

Web pages are built in layers. Using CSS, an attacker can stack an invisible frame of your site on top of their own page and line up its buttons with theirs. When the user clicks, the action lands on your application in the context of their session.

X-Frame-Options vs CSP frame-ancestors

Use DENY or SAMEORIGIN as the legacy fallback, and put the real policy in frame-ancestors. Browsers that support CSP2 use frame-ancestors when both are set, so keep the two aligned.

Controlling who can frame your pages

The X-Frame-Options response header tells the browser whether your pages may be framed:

• DENY blocks all framing.
• SAMEORIGIN allows framing only by pages on your own origin.

The older ALLOW-FROM value is deprecated and inconsistently supported. For modern browsers, prefer the Content Security Policy frame-ancestors directive, which is more flexible and lets you name specific origins:

X-Frame-Options: SAMEORIGIN
Content-Security-Policy: frame-ancestors 'self'

Set both for broad coverage. Clickjacking is a common finding in a web security test, and it is usually a quick fix once identified.

Server snippets

These are illustrative. Review them against your own server before applying them. Nginx needs always, and Apache needs Header always set, so error pages get the same headers. If you already send a Content-Security-Policy header, add frame-ancestors to that policy instead of sending a second header. The generator above can adapt the values. The same add_header ... always; pattern appears when you hide the Nginx Server header.

# Nginx, server or location block (illustrative)
add_header X-Frame-Options "SAMEORIGIN" always;
add_header Content-Security-Policy "frame-ancestors 'self'" always;

# Apache, VirtualHost or .htaccess, needs mod_headers (illustrative)
Header always set X-Frame-Options "SAMEORIGIN"
Header always set Content-Security-Policy "frame-ancestors 'self'"

// Express with helmet (illustrative)
import helmet from "helmet";

app.use(
  helmet({
    xFrameOptions: { action: "sameorigin" },
    contentSecurityPolicy: {
      directives: {
        "frame-ancestors": ["'self'"],
      },
    },
  }),
);

Framing headers are a separate control from CORS, which tells the browser which origins may read responses. These headers tell it which origins may embed the page.

Verify checklist

• Against a site you own, run curl -sI https://your-site | grep -iE 'x-frame|frame-ancestors' and confirm the values you intended.
• On your own machine only, open a local HTML page that frames a URL you control and confirm the browser blocks or allows it as expected. Do not frame third-party sites.
• Repeat the curl check on an error page and on a redirect, not only on a 200 response.
• Confirm X-Frame-Options and frame-ancestors agree. Browsers that support CSP2 use frame-ancestors when both are set, so a DENY header will not override a looser frame-ancestors allowlist in those browsers.

Missing framing headers are a common finding in a web application security test. A penetration test is not a compliance certification. If you would like us to review framing headers along with the rest of the application, we can include that in a scoped web application test against a scope we agree together. Contact us to get started.

Frequently asked questions