Putting choices in an HTML Select does not mean you can’t get hacked

This afternoon I was on the phone with a customer of ours talking about various ways of testing applications. One interesting thing they said was that they didn’t have to worry as much about incorrect input coming from the web portion, since all of the results are in select drop downs, and so can’t be changed.

Ladies and gentleman, this can’t be further from the truth. Not only is it possible, it is dead easy. How so? Let’s start with a simple HTML form that has a select drop down:



 




 
  Florida
  North Carolina
  Washington
 

This spits out a page that looks like:

Ignoring the fact that someone could just send a post request with incorrect values, there is a very easy way to make this list have values you aren’t expecting. You can actually execute Javascript right from the browser address bar, and it will run in the context of the current page. I used that knowledge to build a handy element explorer many moons ago. But in this case, you don’t need anything that fancy. First, bring this page up and type the following in the address bar:

javascript:alert(document.forms[0].validStates[0].value)

On IE this will bring up:

And on Firefox:

Values you can discover can also be set. So now modify the Javascript to be:

javascript:alert(document.forms[0].validStates[0].value='GA')

What you’ll see is this:

What we’ve done is set the value of the first option of our select list – what will be sent to the server – to “GA”. Now, clicking view source won’t make this obvious, as we are changing the in-memory representation. But to make it more obvious, enter the following:

javascript:alert(document.forms[0].validStates[0].text='Georgia')

What does your page look like now?

This is why you should never, ever, ever rely on client-side script to do anything to help you out. You can use Javascript in this way to modify HTML elements, field values, cookies, etc.  Always, always, always validate your inputs on the server side.