Website Design Blog - BlueBolt.net
October 23, 2010 – 4:12 pm
Disable (X)HTML Form Input Autocomplete
The autocomplete feature common to all of today’s major browsers is often a useful time-saving device. However, it does come with some security risks.
There is actually a significant flaw with autocomplete that can allow scripts to steal your private data, without you even being aware of it or interacting with the malicious page. I will try and go in to more detail on this in a future post.
Nevertheless, autocomplete is a popular feature which looks appears to be here to stay, and so is still important to lessen the risks you can have any control over, as much as possible.
For instance; should you need to collect credit card information for a payment form, it is an important user consideration to ensure that this kind of data is not stored by the browser and provided as input suggestions on other forms. This is especially important for users accessing your site with a public computer.
All that is required to disable autocomplete for input fields in HTML forms is the addition of the autocomplete attribute to the input tag, set with a value of 'off'.
Example:
<input type="text" id="cc_num" name="cc_num" autocomplete="off" />
Typically, this isn’t quite the end of the story, though.
As you may find when using this code, it will not validate to W3C (X)HTML4 standards, and will be rejected with the following error:
there is no attribute “autocomplete”.
And for good reason – the autocomplete attribute is not part of the HTML4 specification (it is however part of the HTML5 specification).
Unfortunately, there is no full solution to this issue, but it is widely accepted that the importance of its functionality outweighs the importance of strict validation. Therefore, it is still recommended to use it in spite of the validation problems.
Until the web moves forwards and embraces new standards and protocols, there are currently only a couple of realistic practical solutions to the validation issue. Firstly, using a custom DTD (Document Type Definition, or Doctype) can potentially solve the problem very effectively – more about this can be read on this informative article.
The article also describes another approach which is good for XHTML developers. It involves modifying the doctype declaration to manually add support for the ‘new’ attribute. It’s done like this:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" [
<!ATTLIST form autocomplete CDATA #IMPLIED>
]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
This should allow pages using the autocomplete attribute to validate properly as XHTML. It does come with one caveat though. This requries that pages are served with the mimetype: application/xhtml+xml – but as mentioned in the article, this header should be sent anyway if using XHTML.
Alternatively, perhaps the most pratical – though somewhat partial – solution is to use JavaScript to set the autocomplete attribute, which will allow your pages to still validate; but it’s more of a deceptive than curative method.
Here’s an example script demonstrating how this can be achieved:
document.getElementById("cc_num").setAttribute("autocomplete","off");
Finally, it seems worth mentioning one other method which should be considered. If you name form elements using some kind of random id generation system which can then be identified by the server-side script which handles the submission, the autocomplete data is unlikely to be picked up by other forms in the future.
Posted in: (X)HTML, JavaScript, Web Development, Web Standards
Tags: autocomplete, html, javascript, security, standards, tips, validation, xhtml
One Response to “Disable (X)HTML Form Input Autocomplete”
Leave a Reply
Latest Articles
11/11/10
Toggle Element Visibility with JavaScript
Showing and hiding elements on a web page is a popular technique, and is...
23/10/10
Disable (X)HTML Form Input Autocomplete
The autocomplete feature common to all of today’s major browsers is...
13/10/10
Essential JavaScript Functions and Tips
There have been countless occasions I have expected a JavaScript function...
Pages
Archive
Categories
Tags
Bookmarks
W3C Web Standards
Calendar
| M | T | W | T | F | S | S |
|---|---|---|---|---|---|---|
| « Nov | ||||||
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
Thanks for this – all makes a bit more sense now!