Friday, October 3, 2014

Input validation for web-applications, how to process input safely and securely - Part 2 of 3

This is part 2 of 3 of the blog series about input validation for web-applications. In the first part the entire process was explained. In this post we are going to do some coding on the client-side, in this case Javascript. But keep in mind that the same principles apply to all programming languages.

Input validation is not only about security. It is also about building user-friendly applications (a message when the data-entry does not comply) and keeping data consistency (all data is stored in the same format). In example, you can choose to store all dates in yyyy-mm-dd format in your database. When you make sure you do that, you can easily analyze and generate statistics of the data in your database. When a user of the system enters data in a wrong format, you can either automatically change it (sanitization), or send a message to the user to enter it in the correct format.

Part 1 - Input validation process
Part 2 - Input validation coding client-side
Part 3 - Input validation coding server-side

The input form for registration

Let's assume we will make a small register form with the most basic input values. The following input is requested from the user, including all the requirements of the input data.
  • Name (name and surname)
    • Required
    • Maximum length is 50 characters
  • E-mail address
    • Required field
    • Needs to validate as email address
  • Password
    • Required field
    • Requires at least one lower and one uppercase letter, one digit, no spaces and a length of 8-16 length
    • Must be same as repeat password
  • Repeat password
    • Required field
    • Requires at least one lower and one uppercase letter, one digit, no spaces and a length of 8-16 length
    • Must be same as password
  • Birthdate
    • Optional
    • Needs to validate as a proper date (mm/dd/yyyy)
  • Personal website
    • Optional
    • Must validate as a proper url
    • Only http and https is allowed
Very basic values of course, but good enough for the example throughout the client-side and server-side input validation coding. It is very important to first sit down with your co-workers about the requirements of the data, before actually start coding.

Input validation Steps

For every step in the process we will look at what it might mean for Javascript. Some steps will not be required at all, some optional and some definitely required.
  1. Check if the input is actually sent and received
  2. Store input in memory, separate it from the source
  3. Check variable for, and remove all scripting
  4. Trim the variable
  5. Truncate the variable to the maximum size of expected value
  6. Check if it is the correct variable type and / or format
  7. Check if it is expected content (also called white listing)
  8. When relevant, check existence of local resources
  9. And now is it input for the process
All steps will be explained in the code examples.

If you want to go right away to a full example file, click here.

HTML first

On the client-side this step is not needed, but it might come in handy when you are building user-friendly (intuitive) applications. So lets start with the forms itself.

With the coming of HTML5 new field types are introduced, in addition to those already available with HTML4. Make use of those new field types. You will also notice the use of the pattern attribute in the input type element. Pattern makes use of regular expressions to validate the data that is entered in the form.

You don't need to worry about older browsers, as they gracefully degrade to normal text fields. Down-side of this is that some or all controls might not work anymore. So there will be still a need for JavaScript.

Then JavaScript

Before submitting the data from the form to the webserver it is key to validate it on the client-side first. This due to the various layers of defence. There is the form validation, there is the JavaScript validation and there will be the PHP (server sided) validation. You may not skip JavaScript if you think a browser will support the new form elements. Always include this step.


Disclaimer concerning the code

Please be aware that the code above is merely an example to show what can be done to do input validation and it is not ready for production environments. Chances are that the regular expressions can be improved and other code might as well.

Always make sure that you follow the requirements of your applications and incorporate the security in its design. From there you can implement all the input validation you need for the best security of your application.

Sources

Here are a couple of informative and useful sources you might want to check out.

To be continued...

That's about it for the input validation on the client-side. In part 3 and 3 of this series I will go more into the server-side (PHP) coding of input validation.

Thank you for reading my blog!

Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Share:  

0 comments:

Post a Comment