I have some html that loads a page into an iframe. This works fine with this page, for example:
/
However, a page like this:
/
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=""></iframe>
<iframe src="/"></iframe>
</body>
</html>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./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./seandavis12/"></iframe>
</body>
</html>- 1 show us the code you are using so we can attempt to reproduce the problem – Andrew L Commented Dec 3, 2017 at 17:52
2 Answers
Reset to default 5You 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:
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./web/embedded-tweets
Short answer is you can't use iframe/frame/embed/object or any other regular embedding html tag.
Most large pany 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 panies 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.