What does X-Frame-Options do?

X-Frame-Options prevents your web page from being embedded in an iframe on another site. This blocks clickjacking attacks where an attacker tricks users into interacting with your site without realizing it.

Should I use DENY or SAMEORIGIN?

Use DENY unless you need to embed your own pages in iframes on your own domain. DENY blocks all framing. SAMEORIGIN allows framing only from pages on the same origin.

Is X-Frame-Options still needed with CSP?

CSP's frame-ancestors directive supersedes X-Frame-Options and is more flexible. However, X-Frame-Options is still recommended for backward compatibility with older browsers that don't support CSP.

X-Frame-Options Header Explained

X-Frame-Options is an HTTP response header that controls whether your page can be embedded inside an iframe, frame, or object element. Setting it to DENY or SAMEORIGIN prevents clickjacking attacks where an attacker overlays your site with invisible iframes to trick users into clicking hidden buttons.

Recommended Value

X-Frame-Options: DENY

What Each Directive Does

Directive	Purpose
`DENY`	The page cannot be displayed in a frame regardless of the site attempting to do so
`SAMEORIGIN`	The page can only be displayed in a frame on the same origin as the page itself

What Happens Without This Header

Without X-Frame-Options, attackers can embed your login page in an invisible iframe, overlay it with a decoy UI, and trick users into entering credentials or clicking buttons they cannot see. This is called clickjacking or UI redressing.

How to Implement

# Nginx
add_header X-Frame-Options "DENY" always;

# Apache
Header always set X-Frame-Options "DENY"

# Express.js
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  next();
});

Testing and Report-Only

X-Frame-Options does not have a report-only mode. Use CSP frame-ancestors directive instead, which supersedes X-Frame-Options and supports report-only testing.