IFrame Embedding Checker

What determines whether a page can be embedded?

Quick guide: response header setup

If you own the site, control framing directly through response headers.

Note: X-Frame-Options is superseded by CSP frame-ancestors. When both are present, CSP wins — prefer frame-ancestors.

How does the server detect a request comes from an iframe?

• Sec-Fetch-Dest: document — top-level navigation, not inside any frame.
• Sec-Fetch-Dest: iframe — the request is loaded inside an <iframe> element.
• Sec-Fetch-Dest: frame — loaded inside a legacy <frame> (frameset).
• Sec-Fetch-Dest: embed / object — loaded inside an <embed> or <object> element.

Server config examples: block iframe embedding

The snippets below show how to configure each server or framework to block iframe embedding entirely (X-Frame-Options: DENY + CSP frame-ancestors 'none') — the strictest of the recipes from the quick guide above.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

Only need to allow your own site, or a short allow-list, to frame the page instead of blocking everyone? Swap DENY for SAMEORIGIN, and 'none' for 'self' or an explicit list of origins — the rest of the configuration stays the same.

Known platform gotchas

General header rules aside, some well-known platforms have their own quirks — worth knowing before you assume "blocked" or "embeddable" from headers alone.

Common use cases

• Decide whether a third-party widget, dashboard, or document can be embedded in your own product before writing integration code.
• Verify that your own site sends the X-Frame-Options or CSP frame-ancestors policy you intended.
• Debug clickjacking protection: understand why a page shows about:blank or a refusal message inside an iframe.
• Batch-screen candidate URLs during content aggregation or portal integration, using the session history to revisit results.
• Prepare for security reviews or penetration tests by documenting the framing policy of external dependencies.

FAQs