Javascript Tutorial -- Dialog Boxes
Once upon a time, I followed a deep link to a web site and attempted to work my way back up the directory hierarchy to find the information I was looking for. Apparently, the webmaster of that particular site had had problems with people walking through the directories on his server, and didn't appreciate people poking around areas that weren't intended to be public. I found his solution to the problem novel, insightful and highly entertaining. In fact, I wish I had bookmarked the URL I searched to share with you, as the webmaster obviously had a great sense of humor.
In a nutshell, here is the problem that webmaster was trying to solve. Suppose you have a directory that contains media of some type -- MP3 files, images, ISOs, whatever. However, while the files in this directory are intended to be served within the context of a web page, they are not intended to be rifled through by the on-line public. If you do not have an index.html file in a particular directory, by default Apache, and as far as I know, IIS, will create a listing of all the files in this directory unless you have an index.html file inside this directory. You could simply create an index.html file that essentially says "Forbidden -- go away" but that's hardly imaginative. It's boring. It has no pizzazz, no flash. And it's waaaaay too nice. I mean, think about it -- some miscreant is rifling through a part of your web server that you didn't intend to be searched. What would you do if you walked in your house and found someone going through your closet, searching through your skivvies? Would you say, "Pardon me, sir, but I believe that is private..." or would you shout out an indignant "WTF do you think you're doing?!?!?" Yeah, that's what I thought. So let's have a little fun with the dirtly little snoop who is pilfering through the pr0n^H^H^H^Hwork files on your web server >:]
We will create an index.html file on the server, but instead of putting a boring "Forbidden" message, we will use the Javascript "alert" box. The cool thing about the alert box is that it effectively locks up the user interface on your web browser until you click the "ok" button. OK, no big deal -- an alert box pops up and you can't close your web browser or go to another web page until you click "ok" on the alert box. So you click "ok" and everything's copacetic, right? Wrong. What if there were ten alert boxes, a new one opening as soon as you dismissed the previous one? What if there were a hundred? What if you created an infinite loop that cycled endlessly through an array of canned messages? The only way to escape from this would be to use the "End Task" function in Task Manager (in Windows) or open up a terminal console and kill the process (in a *nix machine, including OS X) to terminate the web browser. Now that's suitably evil! Here's how you do it:
<html>
<head>
<title>
Forbidden!
</title>
<script type="text/javascript">
<!--
var Message = new Array()
var i = Math.floor(Math.random() * 10)
Message[0] = "Forbidden: this is not a public directory. Go away!"
Message[1] = "No tresspassing!"
Message[2] = "Another visitor. Stay a while...stay FOREVER! /laughs evilly/"
Message[3] = "EXCUSE ME...may I HELP you?!?!"
Message[4] = "Well aren't WE clever? Found your way to the treasure chest, eh? NOW what are you going to do? Hmmm?"
Message[5] = "I'm sorry but this directory is not intended for public access. Please go away. NOW."
Message[6] = "Pardon me, but would you happen to have any Grey Poupon?"
Message[7] = "Don't you hate Javascript alerts? Especially when they repeat endlessly? It's almost as annoying as people who snoop about other peoples' web servers."
Message[8] = "/sings/Bad boys, bad boys, whacha gonna do? Whacha gonna do when they come for you?"
Message[9] = "Warning! There are no links to this page. The only way you could possibly have found this page is by snooping around where you don't belong. Your IP address has been logged and I'm going to tell your mommy!"
while (1)
{
alert(Message[i])
i = Math.floor(Math.random() * 10)
}
//-->
</script>
</head>
<body>
<noscript>
<h3>
Forbidden!
</h3>
<br>
This is not a public area on this web server. GO AWAY!
</noscript>
</body>
</html>
Now, when anyone navigates to the directory that contains this index.html file, if they have Javascript enabled, they will get an endless cycle of ten randomly selected error messages displayed in a Javascript alert box. If they don't have Javascript enabled, they will get a standard HTML page with a "Forbidden" message.
Of course, the alert function isn't only used to annoy trespassers on your web server. As its name implies, it was intended to be a way to send an urgent message to the user which they must acknowledge before the script continues processing. It is not surprising then that the alert is often used to handle errors in your code. Suppose you had written some code that would accept user input and would then construct (for example) an SQL query based upon the user's response. You probably want to do some sanity checking on the data before inserting it into an SQL query, otherwise you could find yourself susceptible to SQL injection. Or maybe you just want to make sure that the data returned makes sense -- like a phone number must contain all digits. The alert box is a great way to tell the user that there is something wrong with the information they sent back to you. For this purpose, you might use some code like this...:
...
if (ContainsInvalidData(UserData) == 1)
{
alert('Error -- Invalid data found...please try again')
}
...
If you are paying attention, you will notice that the alert keyword looks a lot like a function. In truth, "alert" is actually a method of the window object, but it isn't necessary to specify "window.alert" because "window" is the default (yes, even on *nix boxes <grin>).
Hmmm...functions and methods can return data...wouldn't it be cool if the alert method could allow the user to accept or deny some choice, and then return the choice to your script? Well, the alert method can't do this, but the "confirm" method can. Here's how it can be used:
<script type="text/javascript">
<!--
document.write("searching file system...please stand by<br><br>")
if (confirm("illegal mp3s found...alert RIAA?"))
{
document.write("just kidding...I wouldn't do that to you!")
}
else
{
document.write("hee hee...scared you, didn't I?")
}
//-->
</script>
Here is the above script inside an HTML document.
