Question

I have a form with a read only field for display/submit to the next page purposes.

However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know – the next page acted on it as if it was the original value.

Now, there shouldn’t be any problem with the people using the site I’m building, but it seems like a huge security flaw to me. Isn’t the point of read-only to remain constant? If a savvy user to change it around, doesn’t that pose a big problem? In fact, I didn’t even think you could add and change attributes in chrome.

Please post your thoughts below, and let me know if there’s a solution (“disabled” textfield, but setting the disabled property doesn’t send the data to the next page).

Answer 1

NEVER trust input from a web form.

The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don’t edit a value expecting it to change, when your server actually won’t let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).

To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they’re doing from adding new or changing/removing existing values.