Contents
Data Validation and Sanitization
This lesson deals with user input validation and sanitation which is a very important issue in programming, and especially internet programming. Most experienced programmers will recommend that one never trust user input. It does not matter if the input comes from a known or unknown source. It should not be trusted to be valid or sanitized. This lesson is an effort to help students understand the importance of both valid user input and sanitized user input.
Objectives
- Students will demonstrate the usage of the Big6 Problem solving skills to solve problems.
Students will correctly validate and sanitize HTML form input using a combination of client side scripting (JavaScript) and server-side programming (PHP or Python) in a variety of potentially unknown scenarios.
Materials
- Computer for each student
- In each student's web browser, a bookmark to a central link repository will be placed so they can access relevant information throughout the course.
- Reference material (books, etc) should be available to the students in the classroom.
- Big6 Summary worksheet
- Skeleton HTML page (form.html) that will serve as the framework to work on. This page has a basic html form with several types of user input.
- Development Server account for each student to work with as they develop the form and server-side code.
Audience
Students in this course are 10-12 grade students in a high school web development course.
TimeFrame
- One to two class periods.
Previous Knowledge
- Students in the class have had extensive experience with building websites in HTML and should be comfortable designing the basic HTML framework needed for this course.
- It is expected that all student in the class should understand how to browse the internet, use email, etc.
- Students will have had previous experience, through this class, with the basic syntax and structures of both javascript and PHP, but this may be the first specific real-world scenario they are expected to work in.
Anticipatory Set
Show students a video of a website being hacked with some malicious user input on a website and what it did on the back-end. The specific input is not important, but the video will hopefully express the point that user input cannot be trusted.
Lesson Outline
For this lesson, students will be working in teams of two to solve the problem given in the video. The instructor might lead a brief discussion with the students to determine just what is happening in the video and what need to put in place to stop it. Through this discussion, the instructor should help the students understand that the data entered on the page needs to be (1) validated and (2) sanitized.
Using the Big6 skills student will work through the problem of (1) validating the user input on the client side then (2) validating and sanitizing it on the server side. Students will use JavaScript for the front-end validation and PHP for the back-end validation and sanitisation. Students will use the Big6 to discover what knowledge they need in order to solve the problem and come up with a solution.
When the student team has come up with a solution, or a hypothesis, using the Big6 summary sheet, they should work to modify the sample code they are given (form.html) to first validate the input with javascript. There are various methods the students can use and each group will likely do it differently. Once the input is being validated, the students will need to have it submit the data to a server-side script (PHP) that will repeat the validation and also sanitise the data. Student will have had experience running PHP files, so this should not be a problem.
The ongoing testing and re-testing of the code will serve as good assessment or evaluation of the group's original hypothesis of how to solve the problem.
The instructor's role is that of consultant and tutor. The students will need to learn new concepts, but only in a just in time manner.
Links
http://www.yourhtmlsource.com/javascript/formvalidation.html
http://www.webdevelopersjournal.com/articles/javascript_validate_form.html
http://stackoverflow.com/questions/129677/whats-the-best-method-for-sanitizing-user-input-with-php
Learning Theory Justification
This lesson works with Bruner's Discovery Learning model where the students are presented with a minimum of facts and are then asked to discover the solution to the problem with the coaching and assistance of the instructor and other students. In this lesson, students are asked to solve the problem of validating and sanitizing user input on an html form. The student will work with another student and and instructor to do this.
The Big6 problem solving skills fit quite well with this model, since the student naturally needs a framework for defining the problem, finding information, coming up with a potential solution, and evaluating the result. Evaluating the result, especially, will happen over and over as the code is tested and re-tested.