Reference a Window from Frame - javascript

I have a jsp in which charge an iframe which belongs to a different domain. Inside that iframe there is a JSP which navigates to a servlet who navigates to another JSP.
What I want is to make changes in the primary JSP (in which the iframe is loaded) from the iframes second JSP (have to do that way because they are independent web apps).
I tried to window.top, parent, and all reference the Servlet from the JSP loaded, and in other cases have obtained an access denied response.
There any option to do it or would I have to rethink everything?
In summary:
....
<br>< div id="xxxx">< /div>
<br>< div id="yyyy">
<br>< iframe src=(other domain)><br>
Here I load a webpage. it navigates to a servlet and to a second JSP. This is the JSP to do the inner.html in the "xxxx" div
<br>< /iframe>
<br>< /div>
....
Edited:
For more information:
1.- window.top.getElementById("xxxx")... gets an error (does not accept getElementById)
2.- window.top.location.href = "http://www.google.com"; Works fine

You can use messages between window frames. The content in your iframe will send a message to parent frame and parent frame has to explicitly receive that message and take action.
Messages are sent using
parentWindowObject.postMessage(message, targetOrigin);
Are received using
addEvent(window, "message", function(e){
console.log(e.data);
});
That way you can send objects with instructions on what the parent frame should do. Please note that sending JS to be evaluated is not recommended.
You can read more about posting/receiving messages between windows here:
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
Excerpt from the page:
The window.postMessage method safely enables cross-origin communication. Normally, scripts on different pages are allowed to access each other if and only if the pages that executed them are at locations with the same protocol (usually both https), port number (443 being the default for https), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.

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.

Using JavaScript, is it possible to see the URL or header info of a redirect from a PHP page?

I have an iframe and it loads a page, random.php, which immediatly redirects to another page.
header('Location: /random_page');
This page is not on the same domain as the parent of the iframe. Is there a way using JavaScript to see the URL of the redirect or the header information or is it impossible due to security?
This is what I have tried so far but the value is always random.php. This is called after the iframe finishes loading.
var source = $("iframe").attr('src');
Short answer: It is not possible. You can use three different methods to get URL content:
Request page as a resource
Send XMLHttpRequest
Use iframe
None of these three methods allow you to distinguish between 200 (OK) and 302 (MOVED) response codes. If page writes redirection header, browser engine immediatelly jumps to that page.

Capture the POST or GET data of an iframe

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.

How to get the parent protocol from within an iFrame using javascript?

I have two CDN domains, one that delivers content over https and the other one through http. And I'm creating a widget (inside an iframe) that could be used in a variety of domains and sometimes in secure pages and sometimes not.
Is there a way to infer using JavaScript the parent's protocol from within the widget's iFrame ?
I figured it out, if I ommit the protocol in the iframe of my widget then it will inherit the protocol of the parent, eg:
In my widget html:
<script>document.write("my protocol is " + document.location.protocol);</script>
The iframe code that points to my widget (to insert into the other sites):
<iframe src="//my-widget.example.com/widget"></iframe>
This requires my-wdiget.example.com/widget to work for both secure and unsecure connections (ie: http://my-widget.example.com/widget and https://my-widget.example.com/widget should both point to the same content) but that's OK because in my situation the only domains I don't have control over are the ones used as CDN.
You can get informations from the main window just using:
window.parent.

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