I have a page with an iframe in it. I put on a code where the page will redirect to the home page if user is inactive for x number of seconds(absence of keydown and mousemove). My problem is the code only works in the mother page but does not detect the mousemove and keydown in the iframe, thus making it redirect everytime inside the iframe despite activity. I tried calling a function in the onload event of the iframe but this doesn't ssem to work. Here is the code for the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SAMPLE</title>
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
<script language="javascript">
function redirect()
{
var timer;
window.onload= document.onmousemove= document.onkeypress= function(){
clearTimeout(timer);
timer=setTimeout(function(){location= 'index.html'},3000);
}
}
</script>
</head>
<body bgcolor="blue" onLoad="redirect();">
<iframe src="http://tplink.teleperformanceusa.com" frameBorder="0" width="100%" height="800px" onLoad="redirect();"></iframe>
...
</body>
</html>
any help would be appreciated. Thank you!
You have your iframe set to 100% width and 800px height. That is almost all of your webpage.
Iframes were designed to insert responsive sections of other webpages into a page. In your code it looks like the whole of the page is the iframe. So you have to ask yourself, why do you need the iframe if it is almost all the page? Why not just link to the page?
Basically the 'motherpage' will not detect movement and activity in the iframe becuase it is outside of its control, and therefore will action the script you have written. The only activity taking place is on the webpage you are linking to in the iframe.
Try to avoid iframes.
Related
Here is the test page. I have a page with an iFrame that contains another HTML page on my site.
<html>
<head>
<title>Clickjack test page</title>
</head>
<body>
<p>Website is not vulnerable to clickjacking.</p>
<iframe src="../page1" width="500" height="500" id="iframe"></iframe>
</body>
</html>
Here is the script I have on page1.html
<script type="text/javascript">
console.log(window.location != window.parent.location);
if(window.location != window.parent.location){
console.log("iFrame Detected");
window.location.replace("redirectMessage.html");
window.location.href = "redirectMessage.html";
console.log("after redirect");
}
else {
// no iframe
}
</script>
Goal: when I go to ClickJack Test Page, detect an iframe and redirect the page within the iFrame to redirectMessage.html
I am getting iFrame Detected and after redirect in the console
So I know my IF statement is being reached.
But the page within the iFrame is not redirected.
You should not try to figure out whether your page is being loaded inside an iframe since the attacker could simply use the sandbox attribute on the iframe and that would stop your script making your (login) page vulnerable to clickjacking.
Instead the backend of your website should return a X-FRAME-OPTIONS set to DENY in order to block browsers to render your website in iframes.
See here for more details: https://steemit.com/security/#gaottantacinque/steemit-security-check-iframe-tricks
Well, I have my radio elements that update an iFrame with js code; and that works fine.
Then I have my button below that creates an iFrame in a HTML Division that contains a bunch o' buttons in a list, my aim is to click one of these buttons in the iFrame then have that button to update the above iFrame (the one controlled by the radio's).
How is this possible, can anyone help me? Thanks in advance.
Note: I've tried using <link rel="import" href="parentpage.html"> to import its ID's (if it does that?) then tried using JS to update it that way, to no avail.
What it looks like (layout wise)!
A simple way to do so is to get the button inside the iframe and set the event onclick like this
$(document.getElementById('iFrame2').contentWindow.document.getElementById("iFrame2Button")).click
(function ()
{
$("#iFrame1").attr('src','tests.php');
})
Assuming all the frames are in the same domain, this can be done like this:
<html>
<head>
<title>Main Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe1_src = function(new_src) {
$("#iframe1").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame for which we will change src attribute -->
<iframe id="iframe1" src="" width="400" height="200" border="1"></iframe>
<!-- frame which includes your iframe2 with the buttons-->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
</body>
</html>
Now in the iframe2 file attach a click handler for your buttons that should change the src attribute of the iframe1 by calling a function defined in the main page.
Example:
<html>
<head>
<title>iFrame 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function(e) {
e.preventDefault();
// call function in a parent frame - IMPORTANT LINE BELOW :)
parent.window.change_iframe1_src(this.rel);
})
})
</script>
</head>
<body>
<button rel="iframe3.html">Change iframe src to iframe3.html</button>
<button rel="iframe4.html">Change iframe src to iframe4.html</button>
</body>
The links in the iframe 2 page call the function which is defined in the parent window (the main page / the window which embeded the iframe2 page itself). That function (change_iframe1_src in this example) takes one argument which is a new url.
The src attribute of the frame #iframe1 (your first frame) will be changed to this url.
Again, this works as long as all the frames are in the same domain.
Hope it helped :) Source
I have these codes:
<html>
<head>
<title>Iframe</title>
</head>
<body>
SomePage<br/>
AnotherPage<br/>
<iframe src="" name="content" height="40%" width="100%"></iframe>
</body>
</html>
as you can see I have two links and one iframe,What i need is when I click SomePage.html link, I want the parent window reloads and then the SomePage.html will be loaded in the iframe, is this possible?, Thanks!
EDITED:
I have an Auto-Resizing iframe that only grows on heights and cannot shrink to smaller heights (well that's my problem here, All I want to achieve is the MasterPage like behavior in asp.net.
This is possible, you can use localStorage it's not cross fully browser. Quick Example.
$(document).ready(function(){
if(localStorage.frameURL) {
$("iframe[name=content]").attr('src', localStorage.frameURL);
}
$("[target=content]").click(function() {
localStorage.frameURL = $(this).attr('href');
window.location.reload();
});
});
In Javascript, I want to open my window.html file in a popup window. But it doesn't display any text. Just a blank page.
This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript">
var newwindow;
function popit(url){
newwindow = window.open(
url, '', "status=yes, height=500; width=500; resizeable=0");
}
</script>
</head>
<body>
CLICK ME!
</body>
</html>
window.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>SAMPLE TEXT</p>
</body>
</html>
Why doesn't it display any text?
javascript:popit(window.html);
Replace with:
javascript:popit('window.html');
Your click handler code is syntactically incorrect:
CLICK ME!
Always, always have your developer console open to check for JavaScript errors! (edit — actually in this case there wouldn't have been an error; window.html would resolve to undefined probably! Still, keep the console open :-)
Also note that I used an "onclick" attribute instead of "href".
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.