24

So I have this code: 

<iframe id="theFrame" src="http://localhost" style="width:100%;" frameborder="0">
</iframe>

and the localhost site loaded in the iframe just fine..

but then when I change the src to an external website

<iframe id="theFrame" src="http://www.youtube.com" style="width:100%;" frameborder="0">
</iframe>

The website did not load.

What did I do wrong? I know that you can use external websites in an iframe since Google Image Search does so...

How can I get external sites to work in my iframe?

kamikaze_pilot
  • 14,304
  • 35
  • 111
  • 171
  • Your HTML coding is correct, rather I believe the network you are trying to access Youtube on has blocked the youtube.com domain. Can you verify this by trying a different domain? – Josh Ferrara Nov 27 '11 at 07:27

4 Answers4

35

The reason why external websites such as:

  1. youtube.com
  2. google.com
  3. stackoverflow.com
  4. etc.

are not loading in your frame, is because they are intentionally leveraging some sort of Frame Killer.

Example (uses jQuery):

<style> html{display:none;} </style>
<script type="text/javascript">
    $(document).ready(function () {
        if(window.self == window.top) {
            document.documentElement.style.display = 'block'; }
        else {
       window.top.location = window.self.location; }
    });
</script>

Suggested reading:

Community
  • 1
  • 1
JohnB
  • 18,046
  • 16
  • 98
  • 110
  • 1
    Sometimes the *Framekiller* pops the referenced website out of the frame, but in the case of the examples above, those *Framekillers* are setup to just leave the contents of the frame blank. – JohnB Apr 17 '13 at 15:38
11

Update: The X-Frame-Options: allow-from header is deprecated and will be ignored in modern browsers. Use Content-Security-Policy: frame-ancestors 'self' https://my-host-site.com; instead.

See MDN doc for more info: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors

If you run the code snippet below:

<iframe src="https://www.youtube.com"></iframe>

Then look at dev tools, it will throw the error:

Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

This is because the site you are trying to access limits embedding (via iframe, frame, embed, object) to the same origin using the X-Frame-Options header. So youtube.com can load iframes with youtube.com pages just fine, but nobody else can. Only site admins for the embedded site can change that setting.

If you have admin for the site you are embedding, you can whitelist the the host site:

X-Frame-Options: allow-from https://my-host-site.com/

This has to be sent as a HTTP Header by the server of the page you are trying to embed. It will not work as a meta tag inside the HTML head. This is how the browser knows the site you are embedding ok'd the site that is hosting to show the page in the iframe.

OXiGEN
  • 2,041
  • 25
  • 19
7

You are probably experiencing the same issues I am having, Most likely the iframe is being blocked by the X-frame-options or being blocked by the Deny property. For example if you access facebook from an outside source it will come back with a DENY response in google chrome

zack
  • 146
  • 1
  • 6
-12

It appears to be a youtube-only problem; src="http://www.mozilla.org" works for me in your code. If you want to display youtube videos in iframes, they'll probably want you to use "embed" option on the video page?