Security headers

How to fix: X-Frame-Options header

X-Frame-Options controls whether other websites may embed your pages in an iframe. The modern equivalent is the frame-ancestors directive in a Content-Security-Policy.

Not sure whether your site has this problem? Check it in seconds.

Security Headers checker Run a free audit

Why it matters

If any site can frame yours, an attacker can overlay your page with invisible or disguised elements and trick visitors into clicking things (clickjacking), such as a button that changes a setting while they think they're clicking something harmless.

How to check

Check the response headers for X-Frame-Options, or for a Content-Security-Policy containing frame-ancestors. Either one is enough.

How to fix it

Header value

X-Frame-Options: SAMEORIGIN

Nginx

add_header X-Frame-Options "SAMEORIGIN" always;

Apache

Header always set X-Frame-Options "SAMEORIGIN"

Next.js (next.config.ts)

const nextConfig = {
  async headers() {
    return [
      {
        source: "/:path*",
        headers: [{ key: "X-Frame-Options", value: "SAMEORIGIN" }],
      },
    ];
  },
};
export default nextConfig;

CSP alternative

Content-Security-Policy: frame-ancestors 'self'

Common mistakes

Using the old ALLOW-FROM value: modern browsers ignore it. Use CSP frame-ancestors with the exact origins you want to allow.
Setting DENY when you genuinely embed your own pages (for example a preview iframe). Use SAMEORIGIN in that case.

Frequently asked questions

Which should I use: X-Frame-Options or frame-ancestors?

frame-ancestors is the current standard and takes precedence in browsers that support both. Sending both is common and harmless.

Related guides

Guidance is general. Test header and DNS changes on a staging copy first, and check your hosting provider's documentation for platform-specific steps.