CODEWITHSUNDEEP
javascripthtmliframe
seandavi
seandavi

Reputation: 2968

Why won't this page load into an iframe?

I have some html that loads a page into an iframe. This works fine with this page, for example:

https://seandavi.github.io/

However, a page like this:

https://twitter.com/seandavis12/

results in an empty iframe. I suspect this has to do with the page from twitter being rendered in parts using javascript, but I am not sure how to force the page to display in an iframe. Any suggestions?

Environments I have tested: chrome & safari on mac OS

Minimal example:

<html>
  <body>
    <iframe src="https://seandavi.github.io"></iframe>
    <iframe src="https://twitter.com/seandavis12/"></iframe>
  </body>
</html>

Upvotes: 3

Views: 3015

Answers (2)

Micah
Micah

Reputation: 691

Short answer is you can't use iframe/frame/embed/object or any other regular embedding html tag.

Most large company websites that aren't simply static, video streaming (ex. youtube), or informational, will likely have the "X-Frame-Options" set to 'sameorigin'. This is known as a Frame-Killer, disabling iframes/frames/etc from embedding content because they are highly vulnerable to being Click-Jacked.

Check out the security section here in Dev Moz

Oftentimes, high profile companies with desirable endpoints and webpages will provide alternate embedding options or even API's that allow you to safely request access for displaying their resources.

Upvotes: 1

madebydavid
madebydavid

Reputation: 6517

You won't be able to embed Twitter in an iframe - they have HTTP headers set which your browser sees and prevents the iframe content from being rendered.

If you open your browser console you will be able to see it being blocked:

enter image description here

Twitter will allow you to embed a specific tweet on a page, however, but you must follow their guide on how to do this: https://dev.twitter.com/web/embedded-tweets

Upvotes: 5

Related Questions