I want to use the site thinfi for password-protecting a link to a calendar at teamup.com.
I assumed I could use an iframe to load a local webpage to handle the initial login and this works fine and loads the teamup calendar within the iframe, if the correct password is entered.
The problem I have is that when an incorrect password is entered, the iframe loads the thinfi page and therefore navigates away from the local domain. Not sure if an iframe is the way to go, but I just want the initial local page to load again if the wrong password is entered,
I am unable to check if the iframe has navigated to thinfi (because of the Same Origin Policy) and keep the user on the same local login page.
There’s no JS solution to this, the answer lies with thinfi’s treatment of incorrect login attempts.
When you send the password form to their server, you must also be specifying the URL to load if the password is successful (the URL of your teamup calendar), right?
So does the thinfi service give you the ability to specify a separate failure URL?
Instead of the user going to the thinfi site in the first instance, I have adapted their page si it sits within my own site within an iframe. The user enters a password and the page sends this to the thinfi site and either follows the link to the teamup site if correct (no problem their), or it loads the login page from its own site.
If it (the iframe) loads the thinfi site after an incorrect login, i just want to check this and redirect it back to my initial local page which has my branding on it, so the user doesn’t get confused when the branding changes to thinfi’s after an incorrect logon.
I was hoping to be able to check the source URL of the iframe and redirect the iframe back to my local page, but all I get is the source URL of the iframe, even when the iframe moves to the thinfi site after a failed login - because of the Same Origin Policy.
So I just need to redirect the iframe back to the local page when the iframe goes to the thinfi site. It’s just that i cannot tell when the iframe has navigated to the thinfi site. The iframe source always points to the local site when checking the its source form the parent page.
<!DOCTYPE html>
<!-- index.html - NOTE: local testing using XAMPP -->
<html>
<head>
<script>
function checkHost() {
var strCurrentURL;
strCurrentURL = document.getElementById("iframe1").src;
if (strCurrentURL.indexOf("thinfi") > 0) {
//come back to local page if thinfi.com is loaded after wrong password inputted
document.getElementById("iframe1").src = "http://localhost\CalLogin.html";
}
}
</script>
</head>
<body>
<!-- Use a link to show the current source URL of the iframe -->
<a href="javascript:window.console.log(document.getElementById('iframe1').src);">Report iframe source to Console Window</a>
<iframe src="CalLogin.html" width="100%" height="1200" id="iframe1" onload="checkHost();">
<p>Error: Your browser does not support iframes.</p>
</iframe>
</body>
</html>
And
<!DOCTYPE html>
<!-- CalLogin.html - This is the stripped down version of the thinfi.com wab page for the (local) iframe -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="http://thinfi.com/css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Creative Support</h1>
<b />
<h2>Kendal Calendar - Cumbria</h2>
<div id="addInfo">
<form action="http://thinfi.com/j32" method="post">
<p><input size="60" name="password" id="password" value="" type="password" /></p>
<div class="hideSubmit">
<input name="submit" value="submit" type="submit" class="submit2" />
</div>
<p>Enter password and <strong>hit the 'Enter' key</strong>.</p>
</form>
</div>
</div>
</div>
</body>
</html>
I still believe it’s the Sam Origin Policy that’s preventing me from gleaning the source URL when the iframe moves to another domain. What do you think?
When the document within an iframe navigates to a new location, the iframe SRC doesn’t change. You’d get the same behaviour even if the form posted to another page on your site – the SRC still wouldn’t update to reflect the new location.
This behaviour is defined in the HTML5 specification.
If it was on your own site, then you could use contentDocument.location.href to get the new URL, however the same-origin policy won’t allow that for an external domain.
So there’s no JS solution to this as its stands.
If you can’t configure how thinfi handles password failure, then either you’ll just have to accept this, or use a different approach to password protection.
I thought that may be the case. It seemed fairly straight forward at first. I am new to js (and this forum - my 1st post) as you have probable gathered.
Many thanks again for all your input brothercake!
P.S. Do I need to close this thread? I’m not sure how.
I think you can just leave the thread, it will close automatically after a period of inactivity.
Some people like to edit the title to add “[SOLVED]” or something, as an indication to others that you’ve got an answer you’re satisfied with. Up to you.
