Form Security with Autocomplete
I was looking through my blog this morning because I could have sworn I already wrote this post. I know I’ve had this conversation with Phil Nash of Unintentionally Blank. But I guess I never wrote it down? Oh well…
One of my pet peeves when filling out a form is when I click in the payment field and my credit crard / bank account number drops down because it was saved in the browser from last time I made a payment on that site. How is it that developers on these sites overlook that huge security issue?
There’s a very simple fix for it, and it’s called “autocomplete off”:
The XHTML
<input id="pmt" name="payment" type="text" autocomplete="off"/>The autocomplete="off" makes sure the text field doesn’t expose any saved data. Of course, it would be too easy if this was valid XHTML so it’s not. If you’re concerned with writing 100% valid XHTML, there are valid ways to do this.
Writing valid code
To make this valid, we need to do it with JavaScript. Since I’m pretty sure most people who read this are jQuery freaks (like me), I’ll show the jQuery version of this:
The XHTML
<input id="pmt" name="payment" type="text" />The jQuery
$(function() {
$("input#pmt").attr("autocomplete","off");
});The problem with added security with JavaScript
I don’t really recommend using javaScript for this, only because it’s easily disabled. And then you’re back at square one with the payment info dropping down in the text field
Ideally, I’d like to use PHP to do this, but I can’t find it anywhere so I’m using <noscript>:
The jQuery
$(function() {
$("form#paymentform").html("<input id="pmt" name="payment" type="text" autocomplete="off"/>);
});The XHTML (placed inside the form)
<label for="pmt">Credit Card Number</label> <noscript><input id="pmt" name="payment" type="text" autocomplete="off"/></noscript>
That way, if javascript is enabled you’ll use the jQuery to write the textfield, and if it’s not, you’ll just write it out normally, which will be invalid, but more secure.
Let me know if anyone knows the PHP way to check for JS.
You can leave a response, or trackback from your own site.
« Analyzing Home | Usable Accessibility »
|
Comments (8)
|
Leave a Reply
php can’t check for javascript as it’s server not clientside. Noscript is the way to do this.
Innovative solution. I still feel that adding security features using JS is dumb. You still have to use the noscript tag and in that you still have invalid XHTML, so why bother in the first place?
Some folks are required to have valid code, for whatever reason. For those people I’d recommend the JS solution, for everyone else, just code it right in the field. I agree, it’s not worth using JS in this situation but it’s nice to be aware of the option.
A similar technique is used for adding in ARIA code for accessibility (using JS to keep the xhtml valid).
I don’t understand the point of this. Autocomplete is handled by the browser. The data is kept client-side. The user agent is able to do 2 things that make this technique moot. 1) You could omit @autocomplete=off and the browser (or extensions) could ignore that command and not remember the data. 2) You could utilize @autocomplete=off and the user agent agent could ignore that command and remember the data anyway. No matter whether you use @autocomplete or not the user agent (or extensions thereof) can ignore your request and do its own thing. Further the user agent behavior is configurable by the end user with their browser/extension settings. As an end user, if I’m worried about my browser remembering my data, then I won’t leave it up to the site owner and hope they use @autocomplete=off. I’ll configure my browser to not remember the data!
yea, that’s true that you might do it that way, but most people aren’t aware of that and let this data get saved and easily accessed. Most people aren’t even aware they have options in the browser.
Being responsible developers, we should look out for our users and take the extra 10 seconds to add something like this in.
Nice. Thanks for the code.
Nice trick, I like the solution with noscript.
Sweet!