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>
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:
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
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.
Related
I'm trying to put a url from my web app in an iframe to be displayed on another website.
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://mywebsite.com/a-page"></iframe>
But right now the page doesn't show up inside the iframe. It's completely blank. Some internet research shows that it means my web app is not set up to allow iframes. What should I do (e.g. change certain settings on my server) to allow iframe embed?
I only want to allow certain url patterns from my web app to be embeddable, i.e. https://mywebsite/embeds/page-number. The site is built with react.js and using Nginx server.
The client (browser in this case) is blocking the web site from being rendered. You have to whitelist the origin from which you are trying to access the content to be loaded in the iframe
If you open dev tools, you should see something like this
This article should provide the solution you are looking for to fix your issue :
Google Content Security Policy
How can I see the personal account of the Telegram in the iframe tag?
I tried the following code but it does not work:
<iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe>
Telegram does not allow you to show their webpage in an iframe. You can see the message when you view the console:
This is, because the Site explicitly refuses it using X-Frame-Options header set to sameorigin. You'd probably need to use the telegram-api. There is a JavaScript Library for that but it's a bit more advanced then just showing an IFrame. It will take you some time, you need to authenticate against the App etc.
I want to load another website on my website using the iframe.
I have seen some other issues while loading using the iframe in some other websites.
So can't we implement iframe to load other domain website pages? If so, do we have another way to load the websites?
The following is the way I tested:
I have tried in
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe with the following code.
<!DOCTYPE html>
<html>
<body>
<iframe src="https://github.com/mattlewis92/angular-bootstrap-calendar/issues" width="800" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I got the following error.
Refused to display 'https://github.com/mattlewis92/angular-bootstrap-calendar/issues' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".
Short answer is NO, you cannot embed this site using iFrame.
If the site allowed it, your code is fine - however in this case you do not have a valid way to embed this site.
The frame-ancestors directive specifies valid parents that may embed a page using the <frame> and <iframe> elements
Obviously they do not WANT you to embed their site:
The look and feel of the Service is copyright © GitHub, Inc. All rights reserved. You may not duplicate, copy, or reuse any portion of the HTML/CSS, Javascript, or visual design elements or concepts without express written permission from GitHub.
HOWEVER
You can use javascript to get the content since their API allows you to do so.
Try ajaxing to https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues - I see Access-Control-Allow-Origin:* so you are able to return that in an Ajax response to your page
$(function() {
$.get("https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues",function(data) {
console.log(data)
$("#result").html(data[0].title);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="result"></div>
or write a proxy on your own server using
curl -i "https://api.github.com/repos/mattlewis92/angular-bootstrap-calendar/issues"
You can put a page from another origin in an iframe if that page allows it. That one doesn't, it uses the Content Security Policy to tell the browser it's not okay via the frame-ancestors policy:
The frame-ancestors directive indicates whether the user agent should allow embedding the resource using a frame, iframe, object, embed or applet element, or equivalent functionality in non-HTML resources. Resources can use this directive to avoid many UI Redressing [UIREDRESS] attacks by avoiding being embedded into potentially hostile contexts.
For whatever reason, that's not important, i'm trying to combine google shopping with another page via an iframe.
I've tried the approach proposed here, consisting of embedding a google custom search query in an iframe, but google custom search does not allow access to the shopping tab.
I figured, if you can't embed Google, embed yourself in it. So I proceeded to inject some jQuery in the page
var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();
clean up the google shopping search results page to what I needed, namely the html inside the div#search
jQuery(function($) {$('#search').show().parentsUntil('body').andSelf().siblings().hide();});
Create an iframe and inject it:
var iframe = document.createElement('iframe')
iframe.src="http://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)
Only problem is the iframe doesn't load the contents of the page and in turn is blank. If you try the above snippet in any other page, it works. It seems like Google is blocking the iframe from loading. How can I get around that?
Google seems not to work using an iframe... Even if you are not using JS.
What you should use instead is the Google Custom Search API, wich allows you to create a custom search engine.
You just have to enter an example website, change the Option to Search all the web. and remove your entered website again.
To create a custom Search engine you'll need a google account.
Start here.
When I run that code, the following error is reported in my console:
VM259:7 Mixed Content: The page at 'https://www.google.co.uk/?gws_rd=ssl' was loaded over HTTPS, but requested an insecure resource 'http://example.com/'. This request has been blocked; the content must be served over HTTPS.
Changing it to an HTTPS URL:
var iframe = document.createElement('iframe')
iframe.src="https://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)
… makes it work fine (albeit it tucked behind the logo):
Tnx for #Quentins comment.
UPD:
Embedding code to google website:
In general you can't embed code for page that you don't own.
if user opens your website and open another tab with google or your website opens another tab with google, your website doesn't have access to google website source code/context and you can't affect on google website, because there are completely isolated from each other.
Seems your actions for cleaning results and embedding your iframe in google page you made in your browser console. That changes affect only locally for your browser and doesn't affect for any other users that open google website.
Possible solutions:
Actually, you can embed some code to other pages, but you need to use:
Browser extensions (too complicated, because user need to install your extension for browser)
XSS/other vulnerables (that's almost impossible for google search website)
Embedding google to your page:
You can't embed iframe from google because of x-frame-options header in http response for google.com. There is no good workaround, sorry.
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
I'm building a web application (a web site) which has a feature where you can embed it inside your own web site (using an iframe).
So, my app has Google Ads, and sometimes when the it is inside another site as embed (inside an iFrame) it doesn't show Ads, I mean, ads are being rendered, but sometimes that html from google is blank.
I'm concern about the Policy of GoogleAds and to not use iFrames to show ads, but I'm not using iframes to show them, my app is just inside another site as a feature.
My question is: can this be done?, or by that policy I won't be able to show ads on my embed feature?
EDIT 1
This is the content which Google is rendering (inside another iframe of another iframe):
<html>
<head>
</head>
<body style="background-color:transparent" marginwidth="0" marginheight="0">
</body>
</html>
and also, I getting an error on the console:
Blocked a frame with origin "http://googleads.g.doubleclick.net" from
accessing a frame with origin "http://example.com". Protocols,
domains, and ports must match.
where "example.com" is some site that is using my feature
EDIT 2
So, I step at the Network tab of the console, and watch what was calling. Does a GET
http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-XXXX.... With 200 OK always, but sometimes it returns just the blank HTML (posted above) and sometimes the actual html with an AD.
One more thing I didn't tell, I'm using the Asynch new Beta method, not the Synch, so I'm thinking of try the Synch and see what happens.
You might try loading the page outside an IFRAME and run network capture on the traffic to/from Google. Explore the response headers - they might be using X-Frame-Options to prevent illicit click activity on ads. There's likely very little you can do about it aside from doing a server-side request and embedding the response HTML yourself. This will dramatically slow down your page loads and might violate your ad agreement.
EDIT:
After reading your follow-up testing, it sounds more like your site just doesn't meet the criteria of enough ad campaigns to serve ads with every request. I'd look at Google's FAQs or marketing information to find out how often ads are served or why you might not be getting ads on every request. Remember, the ads are for the benefit of the advertiser and they have good tools to make sure their ads are specifically targeted to the right audience to maximize their return. Your site just might not meet enough criteria to get many ads.
EDIT 2: A quick Google search turned up this FAQ for why Ads might not be showing. They seem geared to why ads don't show at all, not intermittent appearance.