Blank iframe, no error
An empty iframe with no error page usually means the frame never loaded, has no visible size, or loaded a page that cannot run. Open the browser console and the Network tab first. Most causes leave a message there, even when the frame shows nothing.
6 min read · Updated
Start with three checks
- Console. Open DevTools (F12) and read the red and yellow messages.
- Network. Reload, then find the request for the frame URL. Note the status code and any redirect.
- Elements. Select the
<iframe>and look at its real width and height.
Then match what you see to a cause below.
The frame never loads
Mixed content
An http:// frame inside an https:// page is blocked. The console says:
Mixed Content: The page at 'https://partner.example/' was loaded over HTTPS, but requested an insecure frame 'http://your-site.com/widget'. This request has been blocked; the content must be served over HTTPS.
Change the src to https://. If the framed site has no HTTPS, it cannot load in a secure page.
The parent page blocks it with frame-src
Your own page can have a CSP that limits which URLs it may frame. The console says:
Framing 'https://your-site.com/' violates the following Content Security Policy directive: "frame-src 'self'". The request has been blocked.
Add the framed origin to the parent policy:
Content-Security-Policy: frame-src 'self' https://your-site.com
If there is no frame-src, the browser uses child-src, then default-src. A policy of default-src 'self' blocks all cross-origin frames. Do not confuse frame-src with frame-ancestors. frame-src is set on the parent page. frame-ancestors is set on the framed page.
Lazy loading that never starts
With loading="lazy", the browser waits until the frame is near the viewport. A frame inside a closed tab, a hidden modal, or a scroll box that never shows it may never load.
To test, remove loading="lazy" or set loading="eager". If the frame now loads, load it when the tab or modal opens.
X-Frame-Options on a redirect target
The frame URL can redirect, for example to a login page or from http to https. The browser checks the framing headers of the final page, not the first one. In the Network tab, you see a 301 or 302 and then a page with X-Frame-Options or frame-ancestors.
A common case: the framed app sends signed-out users to a login provider. Login pages block framing, so the frame stays empty or shows an error. See Login doesn't stick in an iframe.
The frame loads but has no size
Zero height
In the Elements panel, a height of 0 or a very small number means the frame is there, but you cannot see it. Common causes:
height: 100%on the iframe, and a parent with no set height.- The iframe is in a flex or grid item that shrinks to 0.
- A parent has
display: noneoroverflow: hiddenwith a fixed small height.
Give the iframe a fixed height to test, for example height: 600px. Then size it as shown in Make an iframe responsive.
White on white
The frame may have loaded a white page with no content yet. The framed page may wait for data, or show an error only in its own console. Right-click inside the frame and pick the option to inspect it, then read the console of that frame.
The frame loads but cannot run
sandbox without allow-scripts
<iframe src="https://your-site.com/app" sandbox></iframe>
An empty sandbox blocks JavaScript. A React, Vue, or other client-rendered app then shows only its empty root element. The console says:
Blocked script execution in 'https://your-site.com/app' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.
Add allow-scripts. If the app reads cookies or localStorage, it also needs allow-same-origin. See Blocked script execution and The sandbox attribute.
Cookies and storage are blocked
Some apps show nothing when they cannot read their session or localStorage. In a cross-site frame, Safari blocks third-party cookies, and Firefox partitions them. See Cookies inside iframes.
Rule out a framing header
Paste the framed URL into the iframe tester. If the page sends a header that blocks framing, it tells you which one and how to fix it. If nothing blocks it, the cause is on the parent page, and the checks above apply.
An error page in the frame, such as "refused to connect.", is not a blank frame. See Find the header that blocks your iframe.