<iframe> and <object> are both blank, but only in Firefox

If you knew the source code (right click and view source of url to embed - but you control it in this case so you can copy and paste) and it was only a reasonably small amount of code (probable because you're using an iframe), then you could use the HTML5 srcdoc attribute to embed the html code, instead of pointing to the url. This would save a lot of hassle regarding unknown factors regarding the site you want to embed (CORS etc..) which you would not usually know if you didn't have control over the second site.

According to caniuse.com the srcdoc property has full support in Firefox since vsn 25 onwards (so since Sept 2013).

Hope this helps (Here's a tested jsfiddle example)


I reproduced the issue on my server which serves 2 domains, and then fixed it this way:

X-Frame-Options: ALLOW-FROM https://SITE1.COM

I added https://, as seen in MDN page for X-Frame-Options

You can observe the difference here (only with Firefox of course, as with other browsers both frames are shown): I pushed a php page that inserts the header without or with https://, and created this fiddle that insert 2 iframes: Firefox shows first iframe as empty, and second one with content (which echoes the value in header) on the right.

screenshot of firefox

Since you are forced to put a "serialized origin" (protocol+FQDN), I wondered if you can put multiple entries, or wildcards. My understanding of RFC 7034 says you cannot.

Now about this detail:

The most interesting thing is that if I open the developer console and reload the page, I see the requests to fetch site1.com and its CSS and so on, but there are no requests made for site2.com. It isn't that there is a problem showing site2.com, it is never requested at all.

That's because it was cached. I also saw that, but a force-refresh rightly showed a new request was made.