Secure Form Validation For MySQL Database Entry
One of the reasons that I started this blog was to have a place where I could store all of my test applications, useful techniques and code snippets, and most importantly, components that could be re-used with any new websites I might build. I have always wanted to develop the “perfect†form with very secure validation to ensure that only clean data was injected into a MySQL database.
It is worth mentioning that it is widely agreed that client side validation (either with JavaScript or using new HTML5 validation of inputs) should only be considered a convenience to the users of a website, rather than being solely relied upon for data validation and verification. This is because JavaScript can be switched off, and all sorts of malicious html injection and hacking can occur. For this reason it is accepted practice to back up client side validation with some robust server side checking, in this case using PHP.
The requirements for my “perfect†form validation were as follows:
1) It had to be light weight, easy to maintain, and not rely on any third party frameworks, such as Modernizr or JQuery, in order to work. These frameworks are awesome, but with mobile development in mind, I only want to include this type of overhead if strictly necessary. It is entirely possible to be in a situation where these libraries are included in the <head> section of a web page merely for use with one form, which seems over kill to me.
2) The form should work in Opera, Safari, Firefox, Chrome, IE8, 9 and 10.
3) It had to be easily extensible to cover any type of form input control that might be required, especially the new ones supplied by HTML5 functionality, such as colour picker and date.
4) The form must first try to leverage the built in functionality of HTML5 compliant browsers, allowing the browser to take the strain if possible. If a non-HTML5 browser was displaying the form, it should use pure vanilla JavaScript to carry out the validation. Then as a final check, PHP code should run, before finally allowing the user inputs to be inserted in a MySQL database.
While I do not think, by a long way, I have created the “perfect†form, I think I have (with the help of several books and on line tutorials) come up with a very secure design pattern, that will prove useful to my future projects for some time.
Here are the basics of how it works:
1) The index.php displays a simple registration form, which is a PHP include file as we may need to re-display this form (if there are input errors by the user) on the second page in this application, addUser.php.
2) By using the HTML5 input attribute required="required" we invoke the browsers in build input validation, if supported. The form also uses the pattern attribute, with a supplied JavaScript regex, for enforcing certain characters in the password and username fields. Please see my post about HTML5 new input types and attributes, HTML5 Forms Polyfill For Old Browsers, for a more in depth discussion on these elements.
3) The form posts to AddUser.php, but because of onSubmit="return validate(this)" in the form tag, this JavaScript function found in validate.js) is also called. It carries out very similar validation to the HTML5 browser validation, but only if the function detects that this is not available. If this function detects any errors the form displays red error text messages (dynamically added to the DOM), below any invalid input controls.
4) If there are no errors the input form data is finally posted to addUser.php, where it is validated by PHP code. If any errors are detected, the form is re-displayed with red error text messages, as appropriate. A good way to test this is to simply not include the validate.js file at the top of each page. Note that all posted data is ran through the sanitizeString() function to strip out any un wanted/dangerous characters.
And that’s it. My next step to improve the form will possibly include using AJAX to validate and display PHP detected errors, and maybe query the database to see if an entered username or password is already taken.
Published on 3 May 2014 in PHP Scripts