Wednesday, November 24, 2004

Banks: Protect Privacy: Disable Autocomplete with Valid HTML

Here's a little tip that might help out banks who wish to disable that pesky privacy-compromising "autocomplete" feature many browsers have on text input boxes, and may reveal people's sensitive informations on publicly used machines.

First-off, i'll point out that a public place should be the last place on earth anybody should ever do their online banking. But apparently, people do.

Kenn Christ rounds-up the controversy around using the autcomplete="off" attribute on <input ... /> elements: this attribute is not part of the HTML specification. Inserting this attribute in your HTML code makes your document an invalid HTML document.

I'm offering a fairly obvious unobtrusive JavaScript way of setting this attribute:
  1. to disable autocomplete on one or several text input boxes add the following CSS class attribute value to each one: class="disableAutoComplete" so such input tag might look like: <input type="text" class="disableAutoComplete" name="mySocialSecurityNumber" value="111-11-1111"/>
  2. add the following script block at the bottom of your document, say, right before the </body> tag, inline, or in a separate .js file:
    <script language="JavaScript" type="text/javascript">
    if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
    if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
    inputElements[i].setAttribute("autocomplete","off");
    }//if current input element has the disableAutoComplete class set.
    }//loop thru input elements
    }//basic DOM-happiness-check
    </script>
  3. ...
  4. let me know if it works ;]
This should ensure your HTML remains valid while still enabling the feature. Now ... if users have JavaScript disabled ... well, they shouldn't be using online banking anyway. Good online banking sites (such as Bank of America's) also use JavaScript to automatically log-out a user after a set period of inactivity on any given page.

38 comments:

Ernest Millan said...

Nice tip there, Chris. Ultimately people should not be doing their banking from public machines. This equates to standing in a crowded room while voicing your bank account information over your cell phone to your bank's customer service department. Unfortunately, it's just a matter of common sense. Still safe-guards are important for sake of the masses and I'm glad to see you coming to the rescue once again! :-)

Chris Holland said...

Ernest: w00t.

Paul said...

Isn't using Javascript to add a non-standard attribute to an element just as bad as including it in the HTML? All this JS does is save face when it comes to validating, basically hiding the non-standard attribute from the validator. If following the standards to the letter is so important, then you shouldn't use non-standard features whether you use them in the HTML or via Javascript.

Anonymous said...
This comment has been removed by a blog administrator.
Chris Holland said...

Paul, agreed, in the end it depends on how much of a purist each developer seeks to be. Setting the non-standard attribute in a script rather than inline HTML keeps your HTML code clean with less clutter for the browser to deal with during the parsing process. To each their own.

Anonymous said...

This seems like a great idea but it doesnt appear to work for a form entry that needs its own class style to define it. Is there another way this can be done. Possibly in the form tag for the entire form instead of on a per input basis.

Chris Holland said...

... can you gmail me at frenchy so we can look at the issue you're dealing with? maybe some sample HTML. So I can better understand the problem you're facing.

normally, you should be able to go class="someOtherClassName disableAutoComplete" ... and/or vice-versa without breaking my script. All decent browsers support multiple class names. I've seen issues with IE 5 for the Mac, where, if i recall correctly, the last class name was taken into account and the ones before it, ignored.

Fernando Rayas said...

This tip is excellent. I'm working in a online banking application and it was extremely neccessary to disable the anoying "autocomplete" in order to post new values each time a user visits the page.

lance said...

This is decent but do you have anything that will work for FireFox?

Anonymous said...

I realize this is a somewhat old article, but can't this be accomplished with no javascript at all? In fact, can't you just put the following attribute into the input tag: autocomplete="off". I've noticed that Google Suggest (http://www.google.com/webhp?complete=1&hl=en) and many bank login pages use this tag to prevent mozilla based browsers (and quite possibly any modern browser) from saving form information.

HiTech said...

Hey, guys, does this trick protect from filling the form from other frame using javascript?

Anonymous said...

this tip does not work !!!

partickle_mahn said...

I have tried this in both IE and Firefox and it does not work. I've heard of folks using onLoad to make this work.

partickle_mahn said...
This comment has been removed by a blog administrator.
Anonymous said...

Handy Tip. Thanks. Saved my bacon. Seeing as Apache Struts doesn't allow you to add non-standard attributes to input tags.

Anonymous said...

Thanks for the tip, just what I was looking for! Works fine!

Greetings from The Netherlands

Anonymous said...

Sigh: that's just as invalid, it is just a trick to get a zero errors count from the validator. The same invalid markup gets inserted into the DOM.

vweng said...

How about adding the following to each input?

onfocus="this.autocomplete=false"

Chris Holland said...

vweng: yup, that should work too.

Anonymous said...

Actually, if you execute this code after the document loads, it will not take effect for the input element that is focused first. You must blur then refocus it.

Anonymous said...

works great on all tested browsers... good job

Anonymous said...

2 years late, i know, however, it would be best if you do this:

<input type="text" id="mytextbox">

and then do this in the javascript:


if(document.getElementById) {
var obj = document.getElementById('mytextbox');
if(obj.setAttribute) obj.setAttribute('autocomplete','off');
}


this way you don't have to set a class to your textbox at all. it is also more cross-browser compatible, and on occassions where this code isn't compatible with the browser, it doesn't trigger an error during javascript execution either.

Anonymous said...

Thanks Brow... works fine to me .

I was having with strus....

As someone say "Save my bacon"

Thanks allot!
From Brazil!
10/10/2006

Anonymous said...

Hey Chris, thanks for the tip. I've posted an alternate technique that could be merged with yours to force all fields to be clear, including password fields. - Jason

bank said...
This comment has been removed by a blog administrator.
Anonymous said...

Hi Chris,
This unfortunately for me, does not work in Firefox 2.0.
Do you have any other idea how to disable this feature? Someone said something about preventDefault, but I'm not sure how to use this for the autocomplete feature...I don't even know if it's possible...
Thanks.

Daily Manga said...

My trick (if you want to put W3 valid html banner):

if(!preg_match("/W3C_Validator/i", $_SERVER[
'HTTP_USER_AGENT'])) echo 'autocomplete="off"';

Anonymous said...

Works fine!

Thanks...

Anonymous said...

How to use this

if(!preg_match("/W3C_Validator/i", $_SERVER[
'HTTP_USER_AGENT'])) echo 'autocomplete="off"';

I tried just including in the script but doesn't work for firefox2.0.

Fernando Gabrieli said...

Chris

Thank you for this example

Following the same idea i created a function to enable/disable autocomplete given the name of an input object and the 0/1 enable disable option

Here it is:


// Disables/Enables autocomplete attribute to avoid/permit
// auto-completion for input fields in Firefox / IE

function set_autocomplete(name, option)
{
input = document.getElementById(name) ;

if (option == 0) // off
{
input.setAttribute("autocomplete", "off") ;
}
else if (option == 1) // on
{
input.setAttribute("autocomplete", "on") ;
}
}


Best regards,
Fernando Gabrieli

Kevin said...

Thanks Great work! Turning off auto complete is also important when you have a specialize auto complete already written in. For example in my real estate site, I have a javascript auto complete that will try to guess the city and state as the user types but I've been told the browser auto complete clashes with my custom one. Google finance also uses auto complete for stock symbols. I think they use some method like this as well.


Thanks
Kevin

Anonymous said...

Thanks for the tip, just what I was looking for! Works fine!

Greetings from a Frenxh in Lithuania.

Allain Lalonde said...

Doing this in jQuery looks like:

$("input.disableAutoComplete").attr("autocomplete", "off");

Anonymous said...

just for anybody who is scrolling this far:
autocomplete attribute will be in the html 5 standard.

Anonymous said...
This comment has been removed by a blog administrator.
Louis Vuitton said...

Isn't using Javascript to add a non-standard attribute to an element just as bad as including it in the HTML? All this JS does is save face when it comes to validating, basically hiding the non-standard attribute from the validator. If following the standards to the letter is so important, then you shouldn't use non-standard features whether you use them in the HTML or via Javascript.

Max Fabran said...

Fantastic, it works very well. Thanks!!!

Ryan Lelek said...

For what it's worth, you could also generate a dynamic hash that changes on every page load so "mysecurefield" becomes "mysecurefield_012345ABCD".

The data still exists there, but won't be as obvious to the user (like just pressing the down arrow).
This would just another way to secure the site and probably shouldn't be used all alone.

As far as XHTML validation, I would say the security is more important in this case. For example, I have a very old flashlight that wouldn't that doesn't look nice, but it does its job and lights my way (pretty XHTML vs function).

Besides, now that HTML5 has some buzz, saying "HTML5 Compliant" will not only let you sound cooler, but more importantly will help the web move forward. We wouldn't have been able to dump IE6 if everyone kept supporting it. Ah, IE6...the memories :)

- Ryan Lelek