Refused to Display in a Frame: X-Frame-Options Fix (iframe Blocked)

This error means a page you tried to load inside an <iframe>, <frame> or <object> told the browser it does not allow being framed by your site. The browser obeys that instruction and shows a blank box or a sad-face icon. The response header responsible is X-Frame-Options, or the newer frame-ancestors directive of Content Security Policy.

You see it in the browser developer console when embedding a login page, a payment form, a dashboard or someone else's website. Chrome words it as in the example above, and Firefox shows "Firefox Can't Open This Page" or a console message mentioning frame-ancestors.

What the headers mean

Sites set these to prevent clickjacking, where an attacker frames a real page invisibly and tricks a user into clicking it. It is a protection, not a bug. The old ALLOW-FROM value of X-Frame-Options is obsolete and ignored by modern browsers, so it cannot be relied on. When both headers are present, browsers that support frame-ancestors use it and ignore X-Frame-Options.

Step 1: confirm which header blocks you

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

The HTTP Header Checker और सिक्योरिटी हेडर चेकर show the same without a terminal. Note both headers, since frame-ancestors may be inside a long CSP line. Check the headers on the exact framed URL, including after redirects; the final response is what counts. Different paths can send different headers.

If you control the site being framed

First decide whether framing should be allowed at all. Only allow trusted parents, and never *, for pages with logins, payments or account actions.

Preferred: use frame-ancestors.

# nginx
add_header Content-Security-Policy "frame-ancestors 'self' https://app.partner.com" always;

# Apache (mod_headers)
Header always set Content-Security-Policy "frame-ancestors 'self' https://app.partner.com"

// Express with helmet
app.use(helmet.contentSecurityPolicy({
  directives: { frameAncestors: ["'self'", "https://app.partner.com"] }
}));

Remove the old header so it does not conflict, since X-Frame-Options can only say deny or same-origin:

proxy_hide_header X-Frame-Options;      # if a backend adds it

Header always unset X-Frame-Options

Reload the server and re-check headers. Be careful that several layers may add the header: the application, the web server, a CDN rule and a security plugin. In WordPress, security plugins and host-level settings commonly add X-Frame-Options; look in their header settings. Note that frame-ancestors cannot be set through a <meta http-equiv> tag; it must be an HTTP header.

Also remember that embedded content needs cookies to work in third-party context. A framed login that relies on SameSite=Lax cookies may fail even once framing is allowed; see cookie flags: Secure, HttpOnly and SameSite.

If you do not control the site

You cannot override another site's header from your page, and workarounds that strip headers through a proxy defeat the protection and may breach the site's terms. Better options:

• Use the provider's embed URL. Many services have a specific embeddable address. YouTube, for example, offers https://www.youtube.com/embed/VIDEO_ID for iframes, while normal watch pages refuse framing.
• Link instead of embedding, opening the page in a new tab with target="_blank" rel="noopener".
• Use an official API or widget the provider supports.
• Ask the owner to add your origin to their frame-ancestors list.

Mixed content can look similar

If your page uses HTTPS and the iframe URL is HTTP, the browser blocks it with a mixed content message instead. Fix that by using an HTTPS URL; see how to fix mixed content and the मिक्स्ड कंटेंट चेकर.

How to verify

Reload the page that embeds the frame with the developer console open, and confirm no "Refused to display" message appears and the frame renders. Then re-check headers with the HTTP Header Checker to ensure only the intended policy is sent, and run the सिक्योरिटी हेडर चेकर to confirm you did not weaken protection on other pages. If a CDN sits in front, the CDN डिटेक्टर tells you where to look for header rules.

अगले कदम

• Inspect headers with the HTTP Header Checker.
• Grade your policy with the सिक्योरिटी हेडर चेकर.
• Read the HTTP security headers guide.
• If cross-origin requests also fail, see CORS no Access-Control-Allow-Origin.

सामान्य प्रश्न

What is the difference between X-Frame-Options and frame-ancestors?

X-Frame-Options is the older header and supports only deny or same-origin. frame-ancestors is part of Content Security Policy and can list specific allowed origins. Modern browsers prefer it when both are present.

Does ALLOW-FROM work?

No. It was never consistently supported and modern browsers ignore it. Use frame-ancestors for allowing specific sites.

Can I embed any site in an iframe?

Only if the site allows it. Many sites forbid framing to prevent clickjacking, and nothing on your side can override that.

Why does it work in my browser but not for users?

A browser extension, cache or a different CDN edge may alter headers. Check the actual response headers from outside with a header checker.

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.