Presentation on HTML5 Data Validation Techniques (Input Types, Constraints) for the UC Davis 2011 IT Security Symposium. Accompanying demo code at https://github.com/srkirkland/ITSecuritySymposium

1. Data Validation in Web Applications Welcome to:

2. Hi! I’m Scott Kirkland Slinging code @ UCDavis for 8 years Currently Sr. Application Architect for the College Of Agricultural and Environmental Sciences Dean’s Office Open source coder https://github.com/srkirkland MvcHtml5, Data Annotations Extensions, ITSecuritySymposium https://github.com/ucdavis UCDArch, Web Applications Co-founded the local .NET User Group

3. Data Validation in Web Applications Welcome to:

4. The most common web application security weakness is the failure to properly validate input from the client or environment. - OWASP[1]

6. Aka: Trust No One Data

7. Input Validation

8. Topics:

9. Input Validation in Web Forms Ensure user supplied data is Strongly typed Correct syntax Within length boundaries Contains only permitted characters Or that numbers are correctly signed and within range boundaries Is “business rule correct”

10. Client Side Validation Validate data on the client first Provides better feedback to the end user Makes your site feel more responsive Always validate on server-side as well!

11. JavaScript Validation “Current” solution, useful & widely supported (Probably about 95%) Any JavaScript errors and validation disappears Fairly difficult to implement, though libraries help[3]

12. JavaScript Validation: Email Is this a good email regex? [A-Z0-9._%+-]+@[A-Z0-9.-]+[A-Z]{2,4} Yes, except when it isn’t Non-english, some TLDs not covered, no special chars How about this (RFC 2822)? (?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[01-080b0c0e-1f2123-5b5d-7f]|[01-090b0c0e-7f])*")@(?:(?:[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]:(?:[01-080b0c0e-1f21-5a53-7f]|[01-090b0c0e-7f])+)) Allows some crazy stuff, like scott=k@domain.com

13. Input Validation w/ HTML5

14. HTML5 Input Validation Two major form validation innovations New Input Types Constraint Validation

15. HTML5 Input Types New input types were added to augment <input type=“text” />

16. HTML5 Input Types search tel url email number range color datetime date month week time datetime-local

17. HTML5 Input Types Gives semantic meaning to your forms Enable behaviors based on input type

18. DEMO: Html5 Input Types

19. HTML5 Input Types So, that was pretty cool Simply changing input types can add basic validation Benefits go beyond validation Additive only – no drawbacks

20. HTML5 Input Types <input type=“email” /> <input type=“url” />

21. HTML5 Input Types <input type=“tel” /> <input type=“number” />

22. HTML5 Constraint Validation Required Pattern MaxLength Min/Max

23. HTML5 Constraint Validation Required <input type=“text” required /> MaxLength <input type=“text” maxlength=“10” /> Pattern <input type=“text” pattern=“[0-9]{5}” />

24. DEMO: Html5 Constraints

25. Of course, this only works in HTML5 capable browsers Older browsers will ignore these new attributes With JavaScript you can “Polyfill” for “regressive” enhancement

26. One More Thing…

27. Polyfill 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 Generally, you test the browser for a feature. If it is not present natively, use JavaScript to add the feature

28. Develop for tomorrow… today! Great library called Modernizr http://www.modernizr.com/ Helps with feature detection & media queries Allows older browsers to work with Html5 elements Much more

29. DEMO: Polyfills

30. HTML5 Data Validation:Pragmatic Advice

31. Use the new input types They may do data validation for you Make your users happy (iOS & more) They will keep getting better Native experience

32. Constraint Validation Useful for “first line of defense” or backup You should continue to use JavaScript for client validation

33. Recap: Validating Web Forms Makes the experience better for your users Results in better, more reliable data First line of defense against a plethora of vulnerabilities

35. Thanks for listening I’m Scott Kirkland Email: srkirkland@ucdavis.edu Web: http://weblogs.asp.net/srkirkland/ GitHub: Personal: https://github.com/srkirkland/ UCDavis: https://github.com/ucdavis/ Slides and demo: https://github.com/srkirkland/ITSecuritySymposium