I am making a single page application using injection function :
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
function injector(url) {
window.parent.document.getElementById("iframe").src = url;
}
</script>
There are 2 urls in this simple example. I can save the one that has been clicked on local storage. But:
how do I explain in JavaScript (When the page is refreshed, use the last used url automatically)
How to deal with going back to a previous page (a previous url). Is there a better way to deal with navigation in single page application using JS?
here, whenever you click on link it will load url in iframe and when you do fresh it will load from localstorage itself.
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
var iframe = document.querySelector('iframe#iframe');
iframe.src=localStorage.getItem('url');
function injector(url) {
iframe.src = url;
localStorage.setItem('url',url);
}
</script>
Related
I'm buildin a webserver for an embedded system.
The main page must embed another html file, whose address in created with javascript.
the javascript is the following
<body class="mainPage" onload="getTerminalUrl()"> <br>
<script>
function getTerminalUrl() {
var terminalUrl = "embedded.html"
document.getElementById("embeddedTerm").setAttribute("src", terminalUrl);
document.getElementById("linkedTerm").setAttribute("action", terminalUrl);
}
</script>
and it creates a link to embedded.html (just for this example), in two spots
a button:
<form id="linkedTerm" action="">
and an embedded form
<embed id="embeddedTerm" src="" style="width: 100%;">
The embedded page is like this
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>Heading</h1>
<p>paragraph</p>
</body>
</html>
What happens is that, by using Firefox, i get the expected result
With Chrome i get the embedded page only when i open the inspector or resize the window
Do i Have to force a redraw or something to have the embedded page displayed consistently?
If instead of the Javascript i hardcode the URL everything works.
Thanks,
Marco
#CBroe posted the correct answer.
using iframe
<iframe id="embeddedTerm" src="" style="width: 100%;">
as well as forcing a refresh with
var element = document.getElementById("embeddedTerm");
element.style.display = 'none';
element.style.display = 'block';
Thanks a lot
This may be a bit of an x y problem, so I'll give a small bit of background to start with. I am attempting to make a simple dashboard which loads a number of different sites and which cycles between them. To do this I have set up a simple local server along with a html page which gets populated with the different sites in distict frames and then cycles between them by hiding/showing each one in turn. In simple terms, the page looks like this:
<html>
<head></head>
<body>
<iframe id="frame1" src="www.example1.com"> </iframe>
<iframe id="frame2" src="www.example2.com"> </iframe>
<iframe id="frame3" src="www.example2.com"> </iframe>
</body>
</html>
Now, what I would like to do is be able to force a reload of each frame so that the data is up to date. For most sites I can do this with:
document.getElementById['iframe.src'] = document.getElementById['iframe.src']
However, for sites where content changes aren't reflected in the URL, this won't work and will instead 'refresh' the page back to the home page. What I want to do is esentially submit an F5 sort of refresh direct to the frame or use:
document.getElementById("iframe_id").contentWindow.location.href
or
document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
But, due to CORS, I can't do this. Considering the sites are external sites that I am viewing and have no control over I'm struggling to come up with a way to get around this issue. Is there something pretty obvious that I am missing?
You're not missing anything, that's how the web works. You have no control over a page from another domain, except if you use postMessage() but thas implies the target page acknowledges your messages and reacts accordingly.
In other terms, you won't achieve this unless you have control over the pages you are embedding.
Rather than try and tell the page in the iframe to reload, which you will be blocked from doing. You could instead update the URL in the iframe tag, by adding some random crap to the end of the URL
So for example news.bbc.co.uk would become news.bbc.co.uk?qaz=1, then change this each time you want it to refresh.
You can achieve something like time by removing iframe element & creating again at same place,
this will seems like same page is being refreshed.
working example : this will refresh the frame every 5 second.
<html>
<head></head>
<body>
<div id="frameContainer1">
<iframe id="frame1" width="500" height="500" src="http://www.example.com"> </iframe>
</div>
<script type="text/javascript">
window.onload = function() {
setInterval(function(){
let elem = document.getElementById('frameContainer1');
var elemFrame = document.getElementById('frame1');
elem.removeChild(elemFrame);
var newFrame = document.createElement('iframe');
newFrame.id = 'frame1';
newFrame.setAttribute('src', 'http://www.example.com');
newFrame.width = 500;
newFrame.height = 500;
elem.appendChild(newFrame);
},5000)
}
</script>
</body>
</html>
I am able to capture the user navigations from an external website opened in an IFrame into a variable and i am able to display the location in console. But i want to store the locations using an array. Is that something which i can achieve using postmessage()? Because without postmessage if i am trying to store the navigations in array then i am running into a cross domain issue. Below is my code
<html>
<head>
<title>test page</title>
</head>
<body>
<li><a href="http://mysmallwebpage.com/" target="iframe_a">Small Page</li>
<iframe id = "frame" src="" name="iframe_a" onload ="loadImage()" width = 100% height = 100% style="border:none;"></iframe>
</body>
<script>
function loadImage()
{
test = document.getElementById("frame").contentWindow.location;
console.log(test);
}
</script>
</html>
The variable "TEST" in the script is holding the navigation link. I just want to capture all the navigations in some array or file and i need postmessage() to do that. Please test the code using console understand my request.
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
The problem I am having is preventing a link from launching a new page and loading its href value in an iframe. The client site is using healcode a service that provides widgets to schedule fitness classes etc.Check this page When you click the signup button after the widget loads it opens a new page. What the client wants is to open that link on the same page or in a popup window. I have tried everything I can think of. I have used jQuery,fancybox, etc.
HERE IS THE CODE IM USING
screenshot.
What I think the problem is, is that my inline scripts loads before the widget scripts finish renders the the schedule html.
I know it is possible because this site uses the same widget and their signup opens the link in a overlay frame on the same page.
Please shed some light on this.
UPDATE:
<html>
<head>
<title>Test</title>
</head>
<body>
<iframe id="openViewHere" width="500px" height="500px" src="" ></iframe>
<script type="text/javascript">
healcode_widget_id = "7696499e81";
healcode_widget_name = "schedules";
healcode_widget_type = "mb";
document.write(unescape("%3Cscript src='https://www.healcode.com/javascripts/hc_widget.js' type='text/javascript'%3E%3C/script%3E"));
// Healcode Schedule Widget for Iyengar Yoga Association of Greater New York : Brooklyn Daily Class Schedule
</script>
<noscript>Please enable Javascript in order to get HealCode functionality</noscript>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".signup_now").click(function(){
var url = $(this).attr("href");
$("#openViewHere").attr("href",url);
return false;
});
</script>
</body>
</html>
Just use this code :
$( document ).ready(function(){
$("body").on('click',".signup_now",function(e){
$(this).attr("target","_self")
})
})
be aware that windows.ready() might fire , while the widget script is still adding elements dynamicaly that is why the listeners dont work , you have to access the element through already loaded parent ( e.g "body" ).