Why does my iframe say refused to connect?

The site you framed told the browser not to allow it, with an X-Frame-Options header or a Content-Security-Policy frame-ancestors rule. Chrome shows its own "refused to connect" page inside the frame. Nothing is wrong with your network or your code, and reloading will not help.

What does X-Frame-Options SAMEORIGIN mean?

Only pages from the same origin as the framed page may put it in a frame. Your site is a different origin, so the browser blocks it. DENY means no site at all may frame it, including the site itself.

What does X-Frame-Options do?

It tells the browser whether a page may be shown inside a frame on another site. DENY blocks all framing; SAMEORIGIN allows it only on pages from the same origin. It exists to stop clickjacking.

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

Both tell the browser who may frame a page. Content-Security-Policy frame-ancestors is the newer rule and can list specific sites; X-Frame-Options only knows DENY and SAMEORIGIN. When a response sends both, modern browsers follow frame-ancestors.

Can I bypass X-Frame-Options?

You can remove the header in your own browser for local testing. You cannot remove it for your visitors, and you should not: the header is the site owner's decision and it protects their users from clickjacking.

X-Frame-Options and "refused to connect"

You put a page in an <iframe> and get a blank box with refused to connect. Nothing is broken: the other site told your browser not to frame it. Here is what the header does, how to set it for your own site, and what you can honestly do when it isn't your site.

What the header says

X-Frame-Options: DENY        # no site may frame this page
X-Frame-Options: SAMEORIGIN  # only pages from the same origin may

It exists to stop clickjacking: someone frames a real, logged-in page, covers it with their own buttons, and gets a click that goes to the real site. Browsers enforce it before the page renders, which is why you see the error and no content.

The modern replacement: frame-ancestors

Content-Security-Policy does the same job with more control, and where both are present, frame-ancestors wins in modern browsers:

Content-Security-Policy: frame-ancestors 'self' https://partner.example.com;

If your iframe is still refused after you removed X-Frame-Options, check for this header too.

Your own site: allow the framing you want

Send one header, from the server that serves the page being framed.

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

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

# Express
app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "frame-ancestors 'self' https://partner.example.com");
  next();
});

Name the origins you actually want. frame-ancestors * allows everyone, which brings back the clickjacking risk the header exists to stop.

Not your site: what's honest

For local testing, you can strip the header in your own browser to see how your layout behaves. It changes nothing for anyone else.
For your users, you can't. If you need to embed a third-party page in production, ask them to allow your origin, or use whatever embed or API they publish.
Ask first when the page is behind a login. Framing someone's logged-in page is exactly the attack the header blocks.

Removing the header while you test

HeaderForge has a one-click preset that removes X-Frame-Options (and one for Content-Security-Policy) for the sites you choose, in your browser only, with a switch to turn it off again. Free, no analytics, no account.

Get HeaderForge for Chrome

Checklist when an iframe won't load

Open DevTools → Console: the message names the header that blocked it.
Check the framed page's response headers in the Network tab for X-Frame-Options and Content-Security-Policy.
If it's your page, set frame-ancestors and drop X-Frame-Options.
If it isn't, ask the owner, or use their embed. CORS errors are a different problem with a similar feel.

More on this topic: “Refused to load … violates the following Content Security Policy directive”: fixes · Mixed content error: “loaded over HTTPS, but requested an insecure resource” · How to change your user agent in Chrome (and what it really changes) · ModHeader alternative