5a.4. Protecting against SQL injection  in your JavaScript If you look in the online examples, you'll find a folder called chapter05-interlude/breakneck. This has all the Break Neck files, as well as a new utility file, validation-utils.js. Here's how you can add validation to your local version of Break Neck Pizza: Make sure you have validation-utils.js return (isInteger(s) && s.length >= minDigitsInIPhoneNumber); } Here's just part of the validation-utils.js file. This file is in the examples, in the chapter05-interlude/breakneck/ folder. validatePhone() is the function you'll use to check the phone numbers entered in the Break Neck web form. function validatePhone(phoneNumber) { if ((phoneNumber == null) || (phoneNumber == alert("Please enter your phone number."); return false; validation-utils.js
Add a reference to validation-utils.js in the Break Neck web form. <html> <head> Here's the top part of pizza.html. You can use your version from Chapter 5, or get the latest version from the book's examples. <title>The New and Improved Break Neck Pizza</title> <link rel="stylesheet" type="text/css" href="breakneck.css" media="screen" /> <script type="text/javascript" src="/books/2/850/1/html/2/ajax.js"> </script> <script type="text/javascript" src="/books/2/850/1/html/2/pizza.js"> </script> This line makes the functions in validationutils. js available to the rest of your JavaScript. <script type="text/javascript" src="/books/2/850/1/html/2/validation-utils.js"> </script> </head> pizza.html
Validate the phone number before sending it to the Break Neck web server. function getCustomerInfo() { You should have getCustomerInfo() at the top of your pizza.js file. var phone = document.getElementById("phone").value; validatePhone(phone) checks to make sure the value of the phone field is a phone number. if (validatePhone(phone) == false) { return; If there's a problem, validatePhone() will print an error out, and return "false". } If the phone number isn't valid, you shouldn't send a request to the Break Neck server... just return to the web form. var url = "lookupCustomer.php?phone=" + phone; request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { pizza.js Remember, all the Break Neck-specific JavaScript is in pizza.js now.
Test out your validation changes. Load up pizza.html in your browser. Here's that same weird set of characters that you entered into the Break Neck online form a few pages back... This time, your validation detects and problem, and never sends the "fake" phone number to the Break Neck web server. PROJECT: CHAOS isn't get anybody's customer list with this improved version of the Break Neck order form.
So we're done, right? Now that we're validating the phone number, nobody will be able to enter those weird strings, and get our customer lists. You still need to secure the PHP script Even though you added validation to the Break Neck order form, you should still escape strings and tighten up the PHP script running on Break Neck's web server. Even though you've added a nice layer of security to your web page, clever hackers can work around your page, and attack the lookupCustomer.php script directly. In other words, your validation helps protect your app from someone attaching you from a web front end, but doesn't do anything to stop someone from going after your script directly. Besides, putting a little extra work into securing your PHP script is a good idea. You can never have too much security... you never know when some clever twelve year old will come up with a new way to get at your data, and create problems for your customers. You can never have too much security. |
