Data validation in web applications


Published on

Presentation on HTML5 Data Validation Techniques (Input Types, Constraints) for the UC Davis 2011 IT Security Symposium. Accompanying demo code at

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Scott Kirkland has been writing web applications at UC Davis for eight years, currently in his capacity as Senior Application Architect for the College of Agricultural and Environmental Sciences Dean's Office.  Scott has also created and released several open-source projects including the architectural framework UCDArch ( for developing secure ASP.NET MVC applications at UC Davis, as well as DataAnnotationsExtensions ( for extending client and server validation in .NET applications.  Scott enjoys educating other developers and co-founded the UC Davis .NET User Group and recently led a three day workshop about ASP.NET MVC for several dozen UC Davis developers.
  • The most common web application security weakness is the failure to properly validate input from the client or environment. This weakness leads to almost all of the major vulnerabilities in applications, such as Interpreter Injection, locale/Unicode attacks, file system attacks and buffer overflows. Data from the client should never be trusted for the client has every possibility to tamper with the data.
  • Possibly include Sql Injection, Xss,etc
  • Possibly include Xss, depending on time
  • Might decrease bandwidth
  • “Current” because it isn’t really going to go anywhere, but it is “all we have”Most frameworks don’t come with much in the way of help, and when they do its complex and they contain lots of messy JavaScript.
  • May not want to use this slide…
  • Html5 to the rescue?
  • Type=“text” but what kind of text? HTML5 goes further
  • Search – assistive technologies like screen reader
  • Type=“text” but what kind of text? HTML5 goes further
  • <input type='text' /> Show output, looks like regular text box<input type='email' /> Show output, looks the same, but show how iphone and opera treat it differently. Also, type='email' validates email!Same thing with url <input type='url' />Same with number <input type='number' /> Even can do min/max with number
  • You could style them independently, different sizes for email, etc
  • Also tel you get the keypad, number you get a special input tooScreenshots from
  • Also tel you get the keypad, number you get a special input tooScreenshots from
  • in FF, Chrome, Explorer (nothing breaks with explorer, completely additive)
  • Html5 validation constraints
  • Widely used: Google, Twitter, Microsoft (ships with MVC)
  • in FF, Chrome, Explorer (nothing breaks with explorer, completely additive)
  • Really, no downside
  • Really,no downside
  • Data validation in web applications

    1. 1. Data Validation in Web Applications<br />Welcome to:<br />
    2. 2. Hi! I’m Scott Kirkland<br />Slinging code @ UCDavis for 8 years<br />Currently Sr. Application Architect <br />for the College Of Agricultural and Environmental Sciences Dean’s Office<br />Open source coder<br /><br />MvcHtml5, Data Annotations Extensions, ITSecuritySymposium<br /><br />UCDArch, Web Applications<br />Co-founded the local .NET User Group<br />
    3. 3. Data Validation in Web Applications<br />Welcome to:<br />
    4. 4. The most common web application security weakness is the failure to properly validate input from the client or environment. <br />- OWASP[1]<br />
    5. 5.
    6. 6. Aka: Trust No One Data<br />
    7. 7. Input Validation<br />
    8. 8. Topics:<br />
    9. 9. Input Validation in Web Forms<br />Ensure user supplied data is <br />Strongly typed<br />Correct syntax<br />Within length boundaries<br />Contains only permitted characters<br />Or that numbers are correctly signed and within range boundaries<br />Is “business rule correct”<br />
    10. 10. Client Side Validation<br />Validate data on the client first<br />Provides better feedback to the end user<br />Makes your site feel more responsive<br />Always validate on server-side as well!<br />
    11. 11. JavaScript Validation<br />“Current” solution, useful & widely supported (Probably about 95%)<br />Any JavaScript errors and validation disappears<br />Fairly difficult to implement, though libraries help[3]<br />
    12. 12. JavaScript Validation: Email<br />Is this a good email regex?<br />b[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}b<br />Yes, except when it isn’t<br />Non-english, some TLDs not covered, no special chars<br />How about this (RFC 2822)?<br />(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f]|[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f]|[x01-x09x0bx0cx0e-x7f])+)])<br />Allows some crazy stuff, like<br />
    13. 13. Input Validation w/ HTML5<br />
    14. 14. HTML5 Input Validation<br />Two major form validation innovations<br />New Input Types<br />Constraint Validation<br />
    15. 15. HTML5 Input Types<br />New input types were added to augment<br /><input type=“text” /><br />
    16. 16. HTML5 Input Types<br />search<br />tel<br />url<br />email<br />number<br />range<br />color<br />datetime<br />date<br />month<br />week<br />time<br />datetime-local<br />
    17. 17. HTML5 Input Types<br />Gives semantic meaning to your forms<br />Enable behaviors based on input type<br />
    18. 18. DEMO: Html5 Input Types<br />
    19. 19. HTML5 Input Types<br />So, that was pretty cool<br />Simply changing input types can add basic validation<br />Benefits go beyond validation<br />Additive only – no drawbacks<br />
    20. 20. HTML5 Input Types<br /><input type=“email” /><br /><input type=“url” /><br />
    21. 21. HTML5 Input Types<br /><input type=“tel” /><br /><input type=“number” /><br />
    22. 22. HTML5 Constraint Validation<br />Required<br />Pattern<br />MaxLength<br />Min/Max<br />
    23. 23. HTML5 Constraint Validation<br />Required<br /><input type=“text” required /><br />MaxLength<br /><input type=“text” maxlength=“10” /><br />Pattern<br /><input type=“text” pattern=“[0-9]{5}” /><br />
    24. 24. DEMO: Html5 Constraints<br />
    25. 25. Of course, this only works in HTML5 capable browsers<br />Older browsers will ignore these new attributes<br />With JavaScript you can “Polyfill” for “regressive” enhancement<br />
    26. 26. One More Thing…<br />
    27. 27. Polyfill<br />A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively<br />Generally, you test the browser for a feature. If it is not present natively, use JavaScript to add the feature<br />
    28. 28. Develop for tomorrow… today!<br />Great library called Modernizr<br /><br />Helps with feature detection & media queries<br />Allows older browsers to work with Html5 elements<br />Much more<br />
    29. 29. DEMO: Polyfills<br />
    30. 30. HTML5 Data Validation:Pragmatic Advice<br />
    31. 31. Use the new input types <br />They may do data validation for you<br />Make your users happy (iOS & more)<br />They will keep getting better<br />Native experience<br />
    32. 32. Constraint Validation<br />Useful for “first line of defense” or backup<br />You should continue to use JavaScript for client validation<br />
    33. 33. Recap: Validating Web Forms<br />Makes the experience better for your users<br />Results in better, more reliable data<br />First line of defense against a plethora of vulnerabilities<br />
    34. 34.
    35. 35. Thanks for listening<br />I’m Scott Kirkland<br />Email:<br />Web:<br />GitHub:<br />Personal:<br />UCDavis:<br />Slides and demo:<br /><br />