Assignment 10
In this assignment, you will learn how to secure forms against hijacking and spam by adding a CAPTCHA code.
Required Knowledge & Skills
- Forms development with HTML and tools
- JavaScript
Case Study Background
The contact form on the BoatVentures website has been hijacked. Each day, Chris Kelly gets numerous e-mails that are clearly spam. Here's a sample of what he got just this morning:
email = [email protected]
company = cheap timberland boots for men
subject = cheap timberland boots for men
comments = [b][url=http://www.outlettimberlandstore.com/]timberland outlet[/url][/b]
[b][url=http://www.outlettimberlandstore.com/]timberland shoes[/url][/b]
[b][url=http://www.outlettimberlandstore.com/]timberland boots[/url][/b]
[b][url=http://www.outlettimberlandstore.com/]timberland boot sale[/url][/b]
[b][url=http://www.outlettimberlandstore.com/]timberland boot outlet[/url][/b]
Problem & Tasks
Update your "Charter Cost Calculator" HTML form you built in Assignment 9 to be "hijack proof". Essentially, you need to build your own Captcha mechanism. This is ADDED to the Assignment 9 form -- you should NOT build a new form.
Here's the strategy: Add a Captcha image to your form and also add a new text input field to your form that asks your users to enter the Captcha text. Then add JavaScript code that checks if the Captcha text was correctly and then either allow or reject the input. Here's the Captcha image URL for use in this part of the assignment. The JavaScript code is a simple "if" statement that checks if the Captcha text entered into the input field is correct. If it is not correct, then display an error message next to the input field and don't process the form, i.e., use a "return" to exit the function. Of course, the Captcha check must be the first thing you do in your JavaScript function -- it goes before any other code! From a usability perspective, an alert box is not appropriate to use to indicate an incorrect Captcha . The Captcha input must not be case sensitive, i.e., if the Captcha code is "qhasgh" then a code of "QHAsgH" should also be accepted (check the toUpperCase() function -- it will help implement this).
Here's a fragment of code you can use to check the CAPTCHA (of course, your variable names and field IDs will be different, so adapt the code):
Here's the strategy: Add a Captcha image to your form and also add a new text input field to your form that asks your users to enter the Captcha text. Then add JavaScript code that checks if the Captcha text was correctly and then either allow or reject the input. Here's the Captcha image URL for use in this part of the assignment. The JavaScript code is a simple "if" statement that checks if the Captcha text entered into the input field is correct. If it is not correct, then display an error message next to the input field and don't process the form, i.e., use a "return" to exit the function. Of course, the Captcha check must be the first thing you do in your JavaScript function -- it goes before any other code! From a usability perspective, an alert box is not appropriate to use to indicate an incorrect Captcha . The Captcha input must not be case sensitive, i.e., if the Captcha code is "qhasgh" then a code of "QHAsgH" should also be accepted (check the toUpperCase() function -- it will help implement this).
Here's a fragment of code you can use to check the CAPTCHA (of course, your variable names and field IDs will be different, so adapt the code):
var captcha = document.getElementById("captchaField").value;
// check to see if the captcha field is empty or if it is not correct
// if so, then display error and return from function
if (captcha == "" || captcha != "jdjjdjf")
{
// display error
return;
}
Grading Rubric
- Your form needs to prohibit hijacking with a reasonable degree of certainty.
- Image is displayed with a Captcha
- Input field allows text input and checks for empty value
- Form is not processed when incorrect Captcha is added or the Captcha is left blank
- An error message is displayed next to Captcha input box when incorrect or empty Captcha is entered
- Input is not case sensitive
What to Submit
You must submit your URL to the page containing your calculator of your website through Blackboard.
Resources Required & Notes
Total Number of Earnable Points: 100 Points
Approximate Time to Complete: 1 Hour
Due Date: see Syllabus or Blackboard
Approximate Time to Complete: 1 Hour
Due Date: see Syllabus or Blackboard