- Impact
- 1
Protect your site from BACK BUTTON TRAPS
I have noticed that too many young web designers have been pulled into the dreaded JavaScript BACK BUTTON TRAP.
Picture this - An honest, happy and joyfull user comes to your website. A welcome picture, and a button that says CLICK HERE TO ENTER.
This nice user clicks the button, all of the sudden, a red screen comes up and says "YOU NEED TO UPDATE YOUR BROWSER TO VIEW THIS WEBPAGE!".
The user says "Well, ok. I better go update my browser then". The user clicks the back button. But wait, what has happened? Nothing - That's what happened! Every time this user clicks the back button, the big red screen sucks him back in - pulling him deeper and deeper into the hole of darkness, slowly sucking out his poor innocent -
Well, you get the picture.
So why did this happen? This scenario is all to often appearing across the JavaScript community. Here is a visual example of the website described above:
[Index.htm] --- [Validate.htm] <¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ [error.htm]
  ____ [homepage.htm]
Index.htm displays a simple welcome image and a hyperlink to Validate.htm, which uses JavaScript to validate the User's browser, and then either send them to error.htm or homepage.htm
Our poor user has IE 3.0, so he is redirected to error.htm, but before we go there, let's look at the code in Validate.htm
---------- Validate.htm ----------
<HTML>
<HEAD>
<TITLE>Please Wait...</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Do validating code here
// And put the output into
// a variable named "output"
// After validation is done:
if (output == "yes")
{
window.location = "homepage.htm"
} else {
window.location = "error.htm"
}
</SCRIPT>
</BODY>
</HTML>
---------- End of Code ----------
So as you can see, our user was redirected to error.htm with the "window.location =" method.
So what? What does this have to do with anything? Well, when the user hits the back button from error.htm, the script is executed again and the user is pushed back to error.htm!
So you may be thinking "So? Why doesn't the user use the Back Button's drop down arrow, or click the back button twice really fast?".
The answer is simple. They don't know how.
A test was performed on over 100 users, almost all of them, when faced with this situation, closed the browser window and re-opened it, never returning to the site again.
You may be thinking "So, they know nothing...", your right. But hey, after being a web design for so long, perhaps you may have forgotten that not all people know as much about the internet as you do.
So how do we fix this mess?
It is actually quite simple. Instead of using the "window.location =" method, use the built-in JavaScript function "window.location.replace()".
For the example above, you would do:
window.location.replace("error.htm")
This sends the user to error.htm, and removes validate.htm from the back button's history, and from the history page altogether, the user will never know that validate.htm existed!
This can also be used to solve many security issues as well.
Happy Programming!
I have noticed that too many young web designers have been pulled into the dreaded JavaScript BACK BUTTON TRAP.
Picture this - An honest, happy and joyfull user comes to your website. A welcome picture, and a button that says CLICK HERE TO ENTER.
This nice user clicks the button, all of the sudden, a red screen comes up and says "YOU NEED TO UPDATE YOUR BROWSER TO VIEW THIS WEBPAGE!".
The user says "Well, ok. I better go update my browser then". The user clicks the back button. But wait, what has happened? Nothing - That's what happened! Every time this user clicks the back button, the big red screen sucks him back in - pulling him deeper and deeper into the hole of darkness, slowly sucking out his poor innocent -
Well, you get the picture.
So why did this happen? This scenario is all to often appearing across the JavaScript community. Here is a visual example of the website described above:
[Index.htm] --- [Validate.htm] <¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ [error.htm]
  ____ [homepage.htm]
Index.htm displays a simple welcome image and a hyperlink to Validate.htm, which uses JavaScript to validate the User's browser, and then either send them to error.htm or homepage.htm
Our poor user has IE 3.0, so he is redirected to error.htm, but before we go there, let's look at the code in Validate.htm
---------- Validate.htm ----------
<HTML>
<HEAD>
<TITLE>Please Wait...</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Do validating code here
// And put the output into
// a variable named "output"
// After validation is done:
if (output == "yes")
{
window.location = "homepage.htm"
} else {
window.location = "error.htm"
}
</SCRIPT>
</BODY>
</HTML>
---------- End of Code ----------
So as you can see, our user was redirected to error.htm with the "window.location =" method.
So what? What does this have to do with anything? Well, when the user hits the back button from error.htm, the script is executed again and the user is pushed back to error.htm!
So you may be thinking "So? Why doesn't the user use the Back Button's drop down arrow, or click the back button twice really fast?".
The answer is simple. They don't know how.
A test was performed on over 100 users, almost all of them, when faced with this situation, closed the browser window and re-opened it, never returning to the site again.
You may be thinking "So, they know nothing...", your right. But hey, after being a web design for so long, perhaps you may have forgotten that not all people know as much about the internet as you do.
So how do we fix this mess?
It is actually quite simple. Instead of using the "window.location =" method, use the built-in JavaScript function "window.location.replace()".
For the example above, you would do:
window.location.replace("error.htm")
This sends the user to error.htm, and removes validate.htm from the back button's history, and from the history page altogether, the user will never know that validate.htm existed!
This can also be used to solve many security issues as well.
Happy Programming!
