Okay, that didn’t really happen to me, but it is a legitimate security concern for a web developer. Nobody wants to get a call asking why someone was able to purchase a t-shirt from their form and not only get the t-shirt but also receive a $100 credit.

This really comes down to secure development and making sure that any user input is properly sanitized to and validated to ensure that the values that were submitted aren’t malicious attempts at ruining your month. It is easy to see why one would need to sanitize user data coming from a text field on a form, but let’s explore what may be a less obvious situation and why one would want to sanitize data from a drop down select.

First, lets set the scene for the above hypothetical. Lets assume that you have a webform on your site that allows a listener to purchase a limited edition t-shirt. Because of an overstock issue (I guess it isn’t that limited) there is a special deal that if you purchase 3 shirts, you get a discount. As a result the user interface provides a quantity drop down along with the price of the selection.

<select>
<option value=”1:15.00″>1 Shirt ($15.00)</option>
<option value=”2:30.00″>2 Shirts ($30.00)</option>
<option value=”3:40.00″>3 Shirts ($40.00)</option>
</select>

In the above HTML snippit, we see that the actual price of the product is being placed in the value attribute of the option tags. This seems pretty innocent, the user can choose which bundle they want, and the value can be charged to the card.

The question then, is how did I order a t-shirt and get $100 credited to my card?

The answer is quite sneaky, and admittedly the average user would not even think to do this, but remember, we aren’t worried about the average user. Many of you may already be aware of Firebug, the web development FireFox extension. It is a wonderful (and arguably essential) tool for theme development and JavaScript debugging. It allows you to inspect the HTML of any page and does so in a very manageable way. The other thing that Firebug allows you to do, is actually edit the HTML and CSS of a site while it is on your computer.

<option value=”1:-100.00”>1 Shirt ($15.00)</option>

At this point, it becomes quite clear that with the help of Firebug a user could view the t-shirt webform page and actually edit the HTML of the option tag with say something like:

If the web developer has not done any sanitation, and is simply taking the value and placing it directly in the credit card code, it is possible for the card to actually be charged a negative balance and the end user was paid very well to purchase that shirt.

Okay, they got in, how do we prevent it? This particular situation is pretty easy to guard against. The first thing that should be done is to insure that the value received is one that was expected. If you were expecting a positive integer, then make sure that it is a positive integer. Better yet, when dealing with something as important as money, never allow the end user the opportunity to play with any variables that might directly influence the code that actually charges the card. If the web developer in this case simply created a table with three rows, then put the id of the row in the value attribute, the end user could place a different row value into the form, but they would still be charged the correct amount since the price to shirt relationship is stored in the database.

This particular situation would require a lot of unfortunate events to take place, but it should provide as food for thought about other forms of injection attacks and how they might cause problems in development.

Please comment let me know if you found this topic interesting or beneficial or if you have other web development topics that you think might be useful to discuss.