Refused to display a website in a frame because of its 'X-Frame-Options'

Ashraf Bashir picture Ashraf Bashir · Oct 2, 2013 · Viewed 20.8k times · Source

I'm trying to display Facebook page in an simple HTML page which only contains an iframe.

Here's my HTML code:

<html>
    <body>
        <iframe src="http://www.facebook.com"></iframe>
    </body>
</html>

I'm always getting this error in Google Chrome's console:

Refused to display 'http://www.facebook.com/' in a frame because it set 'X-Frame-Options' to 'DENY'.

BTW, I'm having this problem also with these iframes:

<iframe src="https://mail.google.com/mail/mu/mp/any"></iframe>
<iframe src="http://m.facebook.com"></iframe>
<iframe src="http://m.youtube.com"></iframe>
<iframe src="http://m.dropbox.com"></iframe>
<iframe src="http://m.yahoo.com"></iframe>
<iframe src="http://www.google.com"></iframe>
<iframe src="http://mail.google.com"></iframe>
<iframe src="http://www.facebook.com"></iframe>
<iframe src="http://www.youtube.com"></iframe>
<iframe src="http://www.dropbox.com"></iframe>
<iframe src="http://www.yahoo.com"></iframe>

Meanwhile, this iframe is working well !

<iframe src="http://www.google.com/custom"></iframe>

How to solve this ?

EDIT based on comments:
Is there an alternative of using iframe if this is unsolvable ? Something like browser tag in XUL ? I already tried browser tag in Firefox extension and it works well, but I'm now coding a chrome extension, so I cannot depend on XUL anymore ?

Answer

Chloe picture Chloe · Nov 25, 2013

Yes, you could

  • use server-side includes, to fetch it from the server and include it in an iframe
  • use a custom browser which does not recognize that header
  • complicated: use websockets to create your own Javascript HTTP client, fetch the page, and insert it into the DOM