Capture the POST or GET data of an iframe - javascript

I have an iframe on my webpage which is on a different domain. I know for security reasons in the browser it's not possible to access the content of that iframe using javascript, but can I detect any POSTs or GETs that take place as the user navigates from page to page of the iframe?

If you own both application you can teach them to communicate with postMessage API: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
With not much work you can create a simple method on iframe side that will tell what is its current window.location.

If you control the server, you can pass back some vars by printing them to parent.yourMethodToHandle() with some server side code. For example:
with php on the child page(in the iframe):
$post_var = $_POST['var'];
echo "<script type='text/javascript'>$(function(){parent.yourMethodToHandle('$post_var')}); </script>";
and the JS on your parent page(containing the iframe):
<script type='text/javascript'>
function yourMethodToHandle(post_var){//Do things}
</script>

If it is same domain a service worker might help you capture requests being made, intercept and return whatever you want.

Related

JQuery: Select div under iframe with JQuery

I'm trying to select a div used in an iframe, but the select instruction always return an empty object, any idea how to solve this please:
console.log($(this).contents().find('div'));
JSFiddle: https://jsfiddle.net/8jxvry4c/6/
Div is not accessible because it is not part of your DOM but part of iframe which itself consist different DOM for some other place.
In order to get div of iframe, you need to fetch all content of iframe and then find the div you wanted.
Following code can be used to fetch iframe content but it should be within same domain if not it will throws cross domain error
$('iframe').contentWindow.document.body.innerHTML
Or you can use cross-document messaging in Javascript where message is sent to iFrame and iFrame respond accordingly.
Main page
myIframe.contentWindow.postMessage('hello', '*');
iframe
window.onmessage = function(e){
if (e.data == 'hello') {
alert('It works!');
}
};
You can refer this link for more detail.
There are also some plugin available to perform these kinds of task more swiftly.
You can't access to DOM of a different domain because of Same-origin policy
Under the policy, a web browser permits scripts contained in a first
web page to access data in a second web page, but only if both web
pages have the same origin.
This policy prevents a malicious script on one page from obtaining
access to sensitive data on another web page through that page's
Document Object Model.
But you can accomplish this on server side of course performming a GET/POST request. And again you can't perform a GET/POST request from javascript (ajax) unless the other domain have Access-Control-Allow-Origin header.

block direct access to file but allow access through jquerys load function

I'm using jQuery to display a certain page to a user through it's .load() function. I am doing this to allow user customization to the website, allowing them to fit it to their needs.
At the moment, I am trying to display the file feed.php inside of a container within main.php;
I have come across a problem where I would like to prevent direct access to the file (i.e: going directly to the path of it (./feed.php)), but still allowing it to be served through the .load() function.
If I use the .htaccess deny from all method for this, I get a 403 on that specific part of the page. I can't find any other solution to this problem; disallowing me to achieve what I want.
This is my current (simplified) script and html:
<script type="text/javascript">
$("#dock-left-container").load("feed.php"); // load feed.php into the dock-left-container div
</script>
<div class="dock-leftside" id="dock-left-container"></div> // dock-left-container div
If anyone could suggest a solution through .htaccess, php, or even a completely different way to do this, I'd be very grateful!
Thanks in advance.
Please follow below steps to achieve:
In the .load function of jquery post a security code.
In the Feed.php page place a PHP condition if the posted security_code params found and match with security_code passed in the .load then only allow to access the page otherwise restrict.
Please follow below changes in your existing code to achieve it.
JS
<?php
$_SESSION['security_code'] = randomCode();
?>
<script type="text/javascript">
$("#dock-left-container").load("feed.php", {
security_code: '<?= $_SESSION['security_code']; ?>'
}); // load feed.php into the dock-left-container div
</script>
PHP
Place php condition in the top of feed.php
if(isset($_POST['security_code']) && $_POST['security_code'] == $_SESSION['security_code']){
//Feed.php page's all the stuff will go here
}else{
echo "No direct access of this page will be allowed.";
}
feed.php:
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
readfile('myfeed.xml');
} else {
header('HTTP/1.0 403 Forbidden');
}
jQuery sends a HTTP_X_REQUESTED_WITH header by default. This is not, by far, anything remotely secure since HTTP headers are easily sent/spoofed. But it will stop the occasional user trying to access the feed directly.
You can, additionaly, check the $_SERVER['HTTP_REFERER'] header (but, again, this is easily spoofed) and, ofcourse, use your normal session logic to make sure the user is logged on if that's a requirement to access the feed.
Either way: there's no way to make this 'water tight'. If your browser can (should be able to) access the feed in some way then it's simply a matter of opening the debugger, having a look at the actual request sent in the network tab and sending the exact same headers/request to get to the file from, say, Curl. Actually, you will see the response of the request (i.e. the actual feed) in the debugger as well.
Repeat after me: if my (or a user's) browser can access the feed 'from jQuery' (via an AJAX request or whatever) then the feed is accessible to that user if he's even just a little bit more persistent than giving up immediately. Only using a session will keep out 'unauthorized' users because it relies on being logged in. After having logged in the request is visible no matter what and that request can be 'forged' to be sent from any other application no matter what.

How to get browser's current page URL from iframe?

Ok. This might have been asked several times but my problem is slightly different. I have following page tab in my facebook application:
Facebook Page Tab
This facebook page tab has my website embedded as iframe into it. What I want is that is to get the URL of current page inside my application.
For example, if you open above link you see facebook URL in your browser(obviously) address bar. In my iframe I just want to retrieve the URL of the parent page in which it is embedded.
I know same-origin policies in Javascript don't allow playing with cross-domain parent page's markup using javascript but I just want to retrieve the parent page URL, thats it.
Is that possible in ANY way?
Any way to access the address bar URL in my PHP application?
Thanks.
You probably don’t need the “actual URL”, but only the page id, I assume …? That you can get by decoding the signed_request parameter that gets POSTed to your app on initial load into the iframe.
How to “decode” it is described here, https://developers.facebook.com/docs/facebook-login/using-login-with-games#parsingsr
If you’re using the PHP SDK, that has a method already that does this for you.
You can use this to access it in JavaScript:
top.location.href
"top" is better than "parent". Because if your iframe is itself in another iframe then parent will return that iframe's location. "top" will return the highest location.
This will be a tough one, because CORS forbids to access the outside frame:
The referrer doesn't help very much either.
If you want to use the signed_request, and want to send custom data/parameters to your app, have a look at https://developers.facebook.com/docs/appsonfacebook/pagetabs#integrating
You can then fill the app_data parameter, and decode that in your app.
Try one of these:
parent.document.location
parent.window.document.location
parent.window.location
parent.document.location.href
I'm not sure if this will work on facebook though

Copy html content from iframe into div ( ajax )?

Lets assume I have my browser load an Iframe with <iframe src="test.html">
Can I, using ajax, load the content of test.html into a div in the main html page?
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts. The plan is to generate the dynamic page with 0 sized iframe which makes report request to remote host. Then, after the page (& iframe content) loads I will copy the iframe content into a div using JS.
Tips are appreciated,
Thank you,
Maxim.
No, you can't.
When you load a page from a different domain into the iframe, it becomes unreachable. You can no longer access the contents of the iframe, as it comes from a different domain.
The only thing that I know of that you can reliably load from a different domain is a script, which JSONP uses.
Can I, using ajax, load the content of test.html into a div in the main html page?
Yes (since your example has a relative URI and is on the same host) …
This idea is my solution for that fact that I'm actually trying to overcome the limitation with making ajax submits to remote hosts.
… and no. You still can't read data from remote hosts.
I'm sure someone will correct me if I'm wrong, but I believe that scripting across domain boundaries is restricted. Have you tried it? Here's a function that may help out.
function insertDivFromFrame(divname, framename) {
var frame = document.getElementById(framename);
var d = frame.contentWindow || frame.contentDocument;
if (oDoc.document) {d = d.document;}
document.getElementById('yourdiv').innerHTML = d.body.innerHTML;
}
I'm not sure this code works... see http://xkr.us/articles/dom/iframe-document/ for more help on this.
... you may, however, design an AJAX request to local host and retrieve information from the remote server (as described here).
If you write a php/perl/etc. script to output the contents of a document from another domain, it'll give you access to the contents as the resulting page would be considered by javascript to belong to your domain. If you're not familiar with any server-side scripting languages, I'm sure you'd be able to find a script that'll do this for you by doing a simple google search.
Best of luck.

Retrieve the content of an iframe

I have a window, with an iframe in it.
When i clicking a button, then the iframe will load (loaded from a web site).
Is it possible to retrieve the content of that iframe? How can I retrieve the content of that page?
I can view the source code by left clicking iframes View Source.
I need to store the source in a DB.
1.
var iframe = document.getElementById("ifrm");
alert(iframe.contentWindow.document.body.innerHTML );
2.alert(window.frames['ifrm'].document.body.innerHTML);
these two comments are showing "access denied" error.
Please help me.
This should work (if it's on the same domain):
document.getElementById('iframeId').contentWindow.document.body.innerHTML
Note that you need to make sure the frame has been loaded completely before you run this code. Otherwise, you will get strange exceptions.
Disclaimer: I have not tested this.
Here's the google query I used: google query
It is generally not possible to read the contents of an iframe loaded from another server, due to the same origin security policy. However, it looks like you want to store the content on the server anyway, so why not request the content from the server?

Categories

Resources