So I need to get the body code of an Iframe, in javascript or Jquery or whatever to communicate with my server. I set up my iframe like this:
<iframe src="http://localhost:9090" name="frame" id="frame"></iframe>
and it displays what my http server sent to it just fine, but when I attempt to get the body of my website/HTTP server using this code:
var content=$("#frame").contents().find("body").html(); alert(content);
But it just returns nothing. PS I am using chrome
If your iframe is pointing at a page that is not from the same domain as the page that contains, then the Same Origin Policy will prohibit your page from reading the DOM of the iframe.
If you really have a pressing need to know the contents of the iframe, then use a library like CURL to load the same page on the server side.
Using Chrome or any other browser isn't the problem here. Same-origin policy is. This policy would prevent you to read the content of a site that is hosted at some other domain. Even proxy matters in this case.
You cannot just read the contents of Iframe by just loading it.
https://en.wikipedia.org/wiki/Same-origin_policy Read this to learn more about it.
Related
I think the question is pretty simple: what reasons could an iframe have for not loading its content?
This came up because I have an iframe in my site's "thank you" page to track conversions. For some reason, when using dev tools in Chrome I can't find any content inside the body or head tags inside the iframe.
But if I click on the iframe's URL, the conversion is correctly activated and I see the message "Conversion logged: true".
Could there be something in my own site preventing the iframe from loading? How can I assure that the iframe will load correctly? Could using an img pixel instead solve this problem?
Because your iframe is coming from a different domain, it is possible the domain you are attempting to serve the iframe from has a security policy which prevents you from embedding it in your page.
There are two potential technologies related to this.
X-FRAME-OPTIONS HTTP header: page owners can specify that their content should not show in an iframe or only show in an iframe on the same origin (domain).
Content Security Policy (CSP): has "frame-src" (non-standard implementation in Firefox) and "frame-options" (standardized) directives. It allows setting policies for iframes similar to X-FRAME-OPTIONS.
In essence, if you're serving content from a third-party site you don't control, it's possible they may have an HTTP header or security policies in place that would prevent the iframe content from showing in your page.
More Resources:
CSP support (caniuse.com)
Other possibilities (which I think are unlikely since it worked when you loaded the page directly):
Ad-blocking browser extensions
"Do Not Track" policy
Browser extensions that block tracking tools
Tracking elements are often blocked by browser add-ons like Adblock Plus and NoScript.
For being more specific in your case, we need an example page that is demonstrating the problem.
I have an application that uses Google Drive for document storage and preview functionality, but recently the iFrames that the documents are loading into are not displaying anything. Upon inspection of the console, Chrome declares that it blocked the fram from running insecure content, and that is why the file preview did not load.
The initial call to preview this file is to a url that looks like this:
https://docs.google.com/document/d//preview
There is a redirect along the way that takes the following form but because it uses http instead of https, Chrome blocks the content from loading.
http://www.google.com/url?sa=p&q=https://www.google.com/accounts/ServiceLogin?service%3Dwise%26passive%3Dtrue%26go%3Dtrue%26continue%3Dhttps://docs.google.com/document/d//preview?pref%253D2%2526pli%253D1
Is there any way around this issue? It is blocking a core functionality of my application currently, so any advice would be appreciated. I can provide a screenshot of the full stack of network loads in necessary, but this is the only URL that is not http compliant.
Thanks in advance for your help.
Hacked that. Add a "?pli=1" without quotes at the end of the URL to avoid redirect (after "/preview" or "/edit") and land directly to the document.
I haven't been able to figure this out, but for some reason when I use the google libraries and look for a script to use (https://developers.google.com/speed/libraries/devguide#jquery), they are provided without the http... why is that? I've also noticed that google is now doing this on Youtube embed code (which causes my ckeditor youtube embed plugin to see this as an invalid src for an iframe).
Example (without http):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Why not this (with http):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
I have a feeling it has something to do with merging everything over to https. Perhaps this is preparation?
Basically it allows the browser to determine whether to use http:// or https:// based on the protocol that your page is using. If your page is on https then it will use https to get the scripts. Because if you hard code to say http and you page is using https then the browser will throw errors telling the user that the site might not be safe for instance.
Bottom line always use relative URL for scripts, images and all resources and don't hard code the http protocol.
It's a relative URI. It maintains the same scheme as the page was requested with while changing the host and everything subsequent.
I've switched my Facebook page to pull an iframe as a result of Facebook's recent announcement that they were supporting iframes in pages. Since you need to host the iframe page outside of Facebook, I figured it would be nice to do using Cloudfront to host the files (an HTML page, a CSS stylesheet and a jpg image). Unfortunately, despite setting the permissions on the Cloudfront files to 744, the iframe page loads correctly in a browser, but when called from Facebook, I get this error message.
When I host the same files on my Media Temple server, the iframe on the actual Facebook page also loads correctly.
Is there a reason why Facebook and Cloudfront don't play together? I haven't been able to find one so far.
Unfortunately Facebook loads the iframe page using an HTTP POST, not an HTTP GET and is not compatible since Amazon has a REST interface and properly uses POST to upload/modify content.
Best,
David Bullock
I ran into this problem today and it caused some headscratching. As David Bullock points out the problem is that Facebook loads the HTML page via a POST request but S3 (and thus by extension CloudFront) won't serve resources in response to this (it returns 405 Method Not Allowed).
You can host your CSS, scripts and images on S3 / CloudFront, but the initial HTML page has to be on some other server. If you're concerned about load or latency from across the globe then you could try implementing a tiny redirector that forwards the Facebook POST request to the CloudFront-cached location (you'll have to return 303 See Other to do this redirection so the browser makes a GET request instead: see RFC 2616).
There is a shockingly easy workaround to the fact that AWS rejects POST requests and the fact that Facebook requires page tabs to be hosted via HTTPS: just redirect the request through https://bit.ly/….
Yes, it's really that easy.
Host the HTML page wherever you like. HTTP is fine.
Create a bit.ly-shortened URL to the page.
Use it—substituting https:// for http://—as the "Secure Page Tab
URL" as you create your Facebook Page Tab.
Activate the tab using this highly-undocumented dialog URL: https://www.facebook.com/dialog/pagetab?app_id=app_id&redirect_uri=bitly_url
Boom: done.
OK, it can be done: but you need to host the images on Cloudfront and the rest of the content on S3. Amazon provides a set of clear instructions on how to this. Issue solved.
Use Cloudfront to trap the 405 error and serve your html as the "Custom Error Response" page to the desired index page
Updated:
This was down voted, however I'm going to help lots of Facebook developers with the following. The final Issue that we had with hosting a facebook application on S3 was with CORS. We fixed the 405's by doing a "Custom Error Response" See this link for details:
http://blog.celingest.com/en/2014/10/02/tutorial-using-cors-with-cloudfront-and-s3/
I want to remove insecure content from site
I added facebook social networking box by using following GWT code in HTMLPanel
< iframe width='244' height='242' class='fb-fan-box' src='https://www.facebook.com/connect/connect.php?id="+ FacebookConstants.FB_DUBLIN_PAGE_ID+ "&connections=10&stream=0&css=https://www.supergroupers.com/facebook.css' frameBorder='0' scrolling='no' allowTransparency='allowtransparency'>
but when i run above code in browser it internally adds following css file which is insecure
< LINK rel=stylesheet type=text/css href="http://external.ak.fbcdn.net/fbml_static_get.php?src=https%3A%2F%2Fwww.supergroupers.com%2Ffacebook.css&appid=106562422725875&pv=1&sig=52d2643d471dad5f75d528ba4ea74dcb&filetype=css">
Is there any why to change that http to https
Thanks
but
You should realize that adding content from any other external domain is in itself a security and privacy issue. If you are building a website that warrants https, you should NOT be including content from facebook.
Second, the issue you describe is a problem with facebook. They should be using protocol relative urls, and they are not. Nothing you can do to fix it, unless facebook provides a https version of their site that has a different url.