Find the header that blocks your iframe
When a site refuses to load in your iframe, the server is reachable. The page you framed sent X-Frame-Options or CSP frame-ancestors, and that header does not allow your site. Only the owner of the framed page can fix it.
5 min read · Updated
What the error looks like
Chrome and Edge show a gray page with a sad face inside the frame:
your-site.com refused to connect.
The error code under the hood is ERR_BLOCKED_BY_RESPONSE. The name is misleading. The connection worked, and the server sent a normal page. The browser read a header in that page and refused to show it.
Firefox shows this inside the frame:
Firefox Can't Open This Page
To protect your security, your-site.com will not allow Firefox to display the page if another site has embedded it. To see this page, you need to open it in a new window.
Safari often shows an empty frame with no message. Check its console.
Each of these texts has its own page with the cause and the fix: "example.com refused to connect." and Firefox Can't Open This Page.
Quick test: open the frame URL in a new tab. If it loads there, the network is fine and a framing header is the cause.
Read the console message
Open DevTools (F12) and look at the Console tab. Chrome prints the exact reason.
X-Frame-Options
Refused to display 'https://your-site.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
The page allows only same-origin frames. With 'deny', it allows no frames at all. See the error pages for sameorigin and deny, and how X-Frame-Options works.
Conflicting X-Frame-Options values
Refused to display 'https://your-site.com/' in a frame because it set multiple 'X-Frame-Options' headers with conflicting values ('SAMEORIGIN, DENY'). Falling back to 'deny'.
Two layers send the header, for example the app and the proxy. Remove both, then set the policy in one place.
CSP frame-ancestors
Framing 'https://your-site.com/' violates the following Content Security Policy directive: "frame-ancestors 'self'". The request has been blocked.
Older Chrome versions word it like this:
Refused to frame 'https://your-site.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".
Your site is not in the frame-ancestors list of the framed page. See the error pages for Chrome and Edge and Safari, and the CSP frame-ancestors guide.
The parent blocks the frame
Framing 'https://your-site.com/' violates the following Content Security Policy directive: "frame-src 'self'". The request has been blocked.
Here, the directive is frame-src, not frame-ancestors. Your own page blocks the frame with its CSP. Add the origin to frame-src on the parent page. See Blank iframe, no error.
Who can fix it
| You own | What to do |
|---|---|
| The framed page | Remove X-Frame-Options and set frame-ancestors to list the parent site. Use the fix guide for your server. |
| Only the parent page | You cannot override the header. Ask the site owner to allow your origin, use their official embed URL, or link to the page. |
There is no <iframe> attribute, sandbox flag, or JavaScript trick that removes these headers. A server-side proxy that strips them may break the site's terms of use. It also breaks the logins and cookies of the framed site.
Many large sites have an embed URL that allows framing. YouTube uses youtube.com/embed/VIDEO_ID, not the watch?v= page. Google Maps and Google Docs have "Embed" or "Publish to web" options. The sites directory lists the official embed method of popular services.
Fix guides by server
Find the blocking header
Paste the framed URL into the iframe tester. It tells you which header blocks the frame and shows the fix for it.
To check many pages at once, use the bulk check. It shows X-Frame-Options and frame-ancestors for up to 100 URLs.