X-Frame-Options is one of the security headers our security headers checker looks for, and it's one of the easiest to fix. It takes one line of server configuration, it doesn't change how your site looks, and it closes off a whole class of attack.
Here's what it does, which value to pick, and how to add it on the most common hosting setups.
What it protects against: clickjacking
Any web page can load another site inside a frame (an iframe). That's how embedded maps and videos work, and most of the time it's harmless.
Clickjacking abuses it. An attacker loads your page in a frame on their own site, makes the frame invisible, and lines it up under a button of their own, something like "Claim your prize". The visitor thinks they're clicking the attacker's button. They're actually clicking a button on your page, in their own logged-in session.
On a simple brochure site the risk is lower, but it isn't zero. Anywhere a visitor can take an action on your site, such as submitting a form, changing an account setting, making a booking or paying, is something a framed page could trick them into doing.
X-Frame-Options stops it at the source. It's an HTTP header your server sends with each page, telling the browser whether other sites are allowed to frame it. If they're not, the browser refuses to show your page inside their frame, and the trick doesn't work.
Which value to use
The header takes one of two values:
| Value | What it means | Use it when |
|---|---|---|
SAMEORIGIN | Only pages on your own site can frame it | The safe default for almost every site |
DENY | Nobody can frame it, including you | Your pages never appear inside frames, even on your own site |
SAMEORIGIN is the right choice for most small business sites. It blocks other sites while still allowing frames within your own, which some page builders and CMS preview screens use.
You'll sometimes see a third value, ALLOW-FROM, recommended in older guides for allowing one specific site to frame yours. Modern browsers no longer support it, so don't use it. If you need to allow specific sites, use CSP frame-ancestors instead (below).
X-Frame-Options vs CSP frame-ancestors
Content-Security-Policy (CSP) is a broader security header, and its frame-ancestors directive does the same job as X-Frame-Options with more control:
Content-Security-Policy: frame-ancestors 'self'
That's equivalent to SAMEORIGIN. frame-ancestors 'none' is equivalent to DENY. And unlike X-Frame-Options, you can list specific trusted sites:
Content-Security-Policy: frame-ancestors 'self' https://partner.example.com
frame-ancestors is the modern standard, and browsers that support it ignore X-Frame-Options when both are present. In practice, many sites send both: frame-ancestors for modern browsers and X-Frame-Options as a fallback. Our security headers checker counts either one as protection.
If you don't already have a Content-Security-Policy, adding X-Frame-Options on its own is the simpler fix. A full CSP touches every script and style on your site and needs testing; X-Frame-Options doesn't.
How to add it
X-Frame-Options must be sent as an HTTP header. Putting it in a <meta> tag in your page's HTML does nothing, as browsers ignore it there. (The same is true of frame-ancestors.) So it goes in your server or hosting configuration, not your page templates.
Apache (in your site config, or .htaccess if your host allows it; needs mod_headers):
Header always set X-Frame-Options "SAMEORIGIN"
Nginx (in the server block):
add_header X-Frame-Options "SAMEORIGIN" always;
Vercel (in vercel.json):
{
"headers": [
{
"source": "/(.*)",
"headers": [{ "key": "X-Frame-Options", "value": "SAMEORIGIN" }]
}
]
}
Netlify (in a _headers file in your publish folder):
/*
X-Frame-Options: SAMEORIGIN
Cloudflare: if your site sits behind Cloudflare, you can add the header there without touching your server, using a response header Transform Rule.
WordPress: the header is usually best added at the server level, by you or your host, using one of the snippets above. Some security plugins can add it for you too.
Hosted website builders (Wix, Squarespace, Shopify and similar) generally don't let you set your own headers. They control them for you, and some already send X-Frame-Options or frame-ancestors. Run your domain through the checker to see what yours sends; if it's missing, it's a question for the platform's support team rather than something you can change yourself.
Before you switch it on
One thing to check first: does anything legitimately frame your site? For example, a booking widget of yours embedded on a partner's website, or your site shown inside another tool. If so, SAMEORIGIN will break that embed. Use CSP frame-ancestors with that partner's address listed instead.
Embedding other sites in yours (a Google Map, a YouTube video, a booking form from another provider) is not affected. X-Frame-Options only controls who can frame your pages, not what your pages can frame.
Check your site
Run your domain through the free security headers checker. It fetches your page, reads the headers your server actually sends, and tells you whether you're protected against clickjacking, alongside the other headers that matter: HSTS, Content-Security-Policy, X-Content-Type-Options and Referrer-Policy.
For why these headers matter beyond clickjacking, and how they fit with HTTPS, see our guide to HTTPS and security headers. The website security audit guide covers the rest of the checklist.
