Refreshing an iframe which are in different domains - javascript

I have a page called main.jsp which is in domain domain1 and it has a iframe which loads contents from domain2. Basically main.jsp is a common contents and in iframe we load contents from other web applications deployed on different servers.
My problem is I want to refresh the content inside iframe automatically (say 5 seconds). I tried this code first:
<meta http-equiv="refresh" content="5;url=<s:url includeParams="all" />" />
Err: Blocked a frame with origin "http://localhost:8080" from accessing a cross-origin frame
I tried this code:
<script type="text/javascript">
window.setTimeout(function(){ window.location.reload() }, 15000);
</script>
Which also gives me same error. Can anyone guide me how to achieve this?
Note:
I have added this code to get rid of cross-domain issue:
<script type="text/javascript">
document.domain = window.location.hostname.replace('www.', '');
</script>

Try adding it dynamicaly
function addRefresh(){
var meta = document.createElement('meta');
meta.setAttribute("http-equiv", "refresh");
meta.setAttribute("content", "5");
document.getElementsByTagName('head')[0].appendChild(meta);
}
if(location.origin === 'domain1.com'){
addRefresh();
}

Related

How to open url from script html file and run query in new tab

I am trying to open a url from script html file and run the query there. I am able to open the page but my query doesn work in there. Can someone have any idea ?
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
window.location = "https://www.google.com/"
window.onload = function ()
{
alert("Hello World!");
}
</script>
</body>
</html>
Basicly you can't do this for security reasons. Here is some info about this. Tabs must have the same origin (port, protocol, host) to be able to interact with each other.
In your example problem is that u use onload in your CURRENT window, not in a new one. Here is correct code for https://www.google.com origin:
let windowProxy = window.open('https://www.google.com/');
windowProxy.addEventListener('load', () => {
windowProxy.alert('Hello');
});
But if you want to make interaction between two tabs with same origin there are better descisions: Broadcast API for example.

Why can't I obtain the external nodes in an iframe?

I have this piece of code. I can see the iframe content but it seems that edp0 is always undefined. Why?
<!DOCTYPE html><html>
<body>
<iframe src="DOM-copyB.html"></iframe>
<script>
ed = document.getElementsByTagName('iframe')[0].contentDocument;
edp0 = ed.getElementsByTagName('p')[0];
edp1 = ed.getElementsByTagName('p')[1];
alert(edp0);
</script>
</body></html>
Here is DOM-copyB.html:
<!DOCTYPE html><html><head></head>
<body>
<p>A<b>B</b>C</p>
<p>1<b>2</b>3</p>
</body></html>
Your JavaScript is probably running before the iframe's content is loaded. Try running your code in window.onload and see if that helps:
window.onload = function() {
ed = document.getElementsByTagName('iframe')[0].contentDocument;
edp0 = ed.getElementsByTagName('p')[0];
edp1 = ed.getElementsByTagName('p')[1];
alert(edp0);
};
If you're not running the code from a server, though, I suspect after you get the code to successfully reference the iframe content, you'll get an error like this in the Chrome console due to Cross-Origin security:
Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
If you run them from a server, that error should go away. See this question for more details on that:
Using iframe with local files in Chrome
I'm not sure about javascript. But jusing jQuery would be much easier:
<iframe src="DOM-copyB.html" id="myFrame"></iframe>
<script>
$("#myFrame").contents().find("p");
</script>

iframe not able to load website properly

I am using following code for making an frame and displaying it on my website. Login page of website is displaying properly but when i am logging in, Home page is unable to load properly.
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://54.200.2.210:8080/pentaho/Login");
ifrm.style.width = 800 + "px";
ifrm.style.height = 1200 + "px";
document.body.appendChild(ifrm);
}
Below is the code for calling this function
<script type="text/javascript">
makeFrame();
</script>
If you try to embed content from another domain in your iframe it will not load because of the same-origin-policy. You can bypass that by accessing a script on your domain instead of the original url, which will then load the content from that url (e.g. via file_get_contents in php) and echo it.
Read the answer to this question: does not permit cross-origin framing iframe
JS
ifrm.src = "http://yourdomain.com/yourscript.php?url="+encodeURI("http://54.200.2.210:8080/pentaho/Login");
PHP
<?php
echo file_get_contents($_GET['url']);
?>
OF COURSE you will have to make it more secure then just this one line of PHP!

java script and same origin policy confusion

I am trying to understand the same origin policy of browsers. Theoretically things seem ok. So i am now trying to practically understand it using a small demo.
I have 2 domains hosted on wamp, viz domain1.com and domain2.com
domain1.com consists of index.php, innocent.php and 2 js files in a javascript folder, namely dom1_javascript.js and dom1_normal.js
here are the details of the above files: -
index.php
<?php
$value = "domain 1 cookie";
// send a simple cookie
setcookie("Dom1Cookie",$value);
?>
<html>
<script type="text/javascript" src="../javascript/dom1_javascript.js">
</script>
<body>
this is from doamin 1
</body>
</html>
innocent.php
<?php
$userSecret=$_GET['userCreds'];
if($userSecret)
{
echo "the user's secret is "+$userSecret;
}
else
{
echo "sorry user secret not found";
}
?>
dom1_javascript.js
alert(document.cookie);
dom1_normal.js
alert("alert domain 1");
alert(document.cookie);
//referring the div
var bdy=null;
// creating the form
var secretForm=document.createElement("form");
secretForm.id="goodForm";
secretForm.method="get";
var myQryStr="http://domain1.com/innocent.php?userCreds=abcd";
alert(myQryStr);
secretForm.action=myQryStr;
//creating the text box in the form
var hiddenBox=document.createElement("input");
hiddenBox.type="text";
hiddenBox.name="secBox";
hiddenBox.value="abhinav";
//appending the box to the form
secretForm.appendChild(hiddenBox);
//appending the form to the div
bdy=document.getElementById("mydiv");
alert(bdy);
bdy.appendChild(secretForm);
//submitting the form
document.getElementById("goodForm").submit();
domain2.com consists of 2 versions of index.php, viz, index.php and index1.php
here are the details of the above php file: -
index.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_javascript.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
index1.php
<?php
$value = "domain 2 cookie";
// send a simple cookie
setcookie("Dom2Cookie",$value);
?>
<html>
<head>
<script type="text/javascript" src="http://domain1.com/javascript/dom1_normal.js">
</script>
</head>
<body>
<div id="mydiv">
<img src="http://domain1.com/images/dom1.bmp"/>
this is from doamin 2
</div>
</body>
</html>
I am using firefox as the browser to test these scritps.
First I goto domain1.com in the browser. This sets the domain1 cookie. Then I goto domain2.com/index.php
As expected, the script on domain2/index.php sets the domain2 cookie. Then the javascript from domain1 gets loaded which says
alert(document.cookie)
The execution of this script alerts the domain2 cookie value.
Assumption1: -
So my understanding here is that due to the same origin policy of the browser, even though the script was called from domain1, it did not alert the domain1 cookie, but instead alerted the domain2 cookie.
Please let me know if I am correct in the above assumption ?
Now I clear the browser cache and remove all the cookies from the browser. Run domain1.com again, which again sets domain1 cookie. And then, this time I goto domain2.com/index1.php which sets the cookie for domain2 and then accesses the script present in
domain1.com/javascript/dom1_normal.js
Now if my assumption1 was correct,( i.e. a javascript from domain1.com when imported in domain2.com will get executed with reference to domain2 only, and not its incoming domain, as per the same origin policy) then in this case also it should be the same with dom1_normal.js. So the javascript in dom1_normal.js should have access to all the HTML elements in domain2/index1.php It does not really so happen as confirmed by
bdy=document.getElementById("mydiv");
alert(bdy);
in domain1.com/javascript/dom1_normal.js which alerts null
please let me know where am i going wrong. And i have gone through more than a dozen discussions (on stack overflow and elsewhere including MDN, wiki, google etc.) and articles about same origin policy, but none of it has made the idea clear to me.
The Same-Origin policy doesn't have much to do with loading JavaScript. Regardless of where a script comes from, its actions take place under the aegis domain of the main page. Thus, if your main page comes from "domain1", then all scripts execute in the context of "domain1", whether they came from that domain or any other domain.
Note that it's not possible to access the source code of a script that loads from some other domain.
The reason your "dom1_normal" script reports "null" for that element reference is probably because you're importing the script before the <body>. The DOM is built incrementally, but scripts run synchronously when they're loaded, so if you call getElementById() for some element that's after the <script> tag, it won't be there.

how to check content of Iframe from external url

I wanna use Facebook's Like button on my web site.
It's so simple as everyone knows but I have a problem with the censorship in our country.
Facebook is censored in our country and if I use the simple iframe, the people who have no access to Facebook (can't pass the censorship) will see the block page which I don't want to.
So I wanna check if loaded address is Facebook show them the iframe else (they will be redirected to another web site) hide the iframe.
Is there any way for me to find this out? I mean anything like address or content or id etc.
Here is my code:
<html>
<head>
<title>facebook test</title>
<style>
.facebook{
display:none;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<script type="text/javascript">
$.ajax({
url: 'https://graph.facebook.com/btaylor?callback=?',
dataType: 'json',
success: function(data) {
$(".faceboock").show();
// alert('success - facebook works');
// alert('data = ' + JSON.stringify(data));
},
error: function() {
alert('error - facebook fails');
}
});
</script>
<div class="faceboock">
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fmypage%2F152215541478267&width=292&colorscheme=light&show_faces=true&stream=true&header=true&height=427" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"></iframe>
</div>
It works when client has access to facebook, I mean the "success: function" works but error function doesn't.
The problem is when facebook is not accessible that json never responds.
Is there any way to set a timeout for response or anything else in order to handle the error?
You can't check the content of an iframe that is not on the same domain as your code.
See Same Origin Policy
iframe.src can be checked without restrictions, but does not change when the redirect happens
iframe.contentWindow.location.href does change when the redirect happens, but can't be accessed in your case due to the security restrictions mentioned above
The only way I can think of to test this is:
Do a JSONP call to one of the Facebook APIs (JSONP has no domain restrictions)
Check the response
If these JSONP calls get redirected as well than it will most likely throw an exception instead of returning the expected values (due to the fact that it will try to parse as javascript a response which is most likely a fullhtml page)
Here is a working example using jQuery to do the JSONP call.
It works from my location, could you test it and see if you get the error alert?
You can also go in your browser to the url in the example. If facebook.com gets redirected, but this one doesn't than you'll have to find some other way to check it...

Categories