iframe and external website

Question

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?

Solution 1

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:

• Framekiller (Wikipedia)
• Busting a tough FRAME killer

Solution 2

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.

Solution 3

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

Comments

[JohnB]

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.

[Juha Vehnia]

Allow-from is deprecated and will not work in moderns browsers.