CODEWITHSUNDEEP
htmlfirefoxpasswords
johndodo
johndodo

Reputation: 18261

disable Firefox password manager for some password input fields

I have a registration form and a login form. On login form (my) Firefox by default supplies the username and password, which is ok. On registration form however it does the same - there is no point in this and it makes problems because password field is entered while "repeat password" field is not.

Is there a way I can change registration form's HTML so that Firefox and other browsers will not autocomplete a specific password field?

EDIT: I have found numerous questions (and answers) on this topic, but the proposed solution (setting autocomplete=off on password input field) does not work for me on Firefox (it still autocompletes the field). I have found this solution, but it seems a bit ugly (and doesn't work if user enters the username and hits Tab). Does anyone know of a better way?

Upvotes: 6

Views: 8791

Answers (3)

johndodo
johndodo

Reputation: 18261

Found a simple and elegant solution which should be cross-browser too. Can't believe I didn't think of that - you just add another password input right before your own and then hide it: 

<input style="display:none" type="password" name="foilautofill"/>
<input type="password" name="notautofilledpassword" />

Beautiful. :)

Upvotes: 8

Roland
Roland

Reputation: 5226

Just before getting to this question I solved the problem almost as elegant as mentioned by JohnDodo, and as secure as MissHilton. Introduce an invisible dummy user input field right before the password input field, and fill it with JS/JQuery code with a non-existing user name. Firefox will look up the password for this user, to show its password, but of course this will fail. I used this for our Change Password page, and consider the behaviour of Firefox a bug. The browser should only fill in the stored password on the URL where it was stored from, not on other pages.

Here is my jQuery/html code:

<script language="javascript" type="text/javascript">
    $("#dummyusername").ready(function () {
        $("#dummyusername").val("joe_x_dummy");
    });
</script>

<input style="display:none" type="text" name="dummyusername" id="dummyusername" />
<input type="password" name="oldpassword" ...

Upvotes: 1

MissHilton
MissHilton

Reputation: 66

In a situation where we have many users sharing the same computer with sensitive information, we needed to disable autocomplete on the password. At first I tried your "simple and elegant" hidden password solution, but a clever user showed me that anyone could use the browser's developer tools to display the autofilled password of the previous user in plain text in the hidden field.

I disabled the password autocomplete in a secure way as follows. This is working in Firefox 29 and IE8:

Create the password field dynamically, and append it to the form on page load. Give it a placeholder attribute.

function createPasswordInput() {
var dynpass = document.createElement("input");
dynpass.setAttribute("type", "password");
dynpass.setAttribute("size", 32);
dynpass.setAttribute("id",   "dynPwElem");

    // placeholder helps prevent password autocomplete
dynpass.setAttribute("placeholder", "Enter password");

// append the password element to the form, in my case an empty table cell
var td = document.getElementById("dynamicTd");
td.appendChild(dynpass);

var rpw = document.getElementById("dynPwElem");
rpw.setAttribute("name", "userPassword");

// Max length starts at only 1, helps prevent autocomplete. 
// Use property maxLength instead of setAttribute to work in IE
rpw.maxLength = "1"; // set the DOM property that has uppercase L

Set the password element maxLength property to only 1, and attach an onfocus event to expand the maxLength to what it should be (32 in my case).

function expandPwLength() {
var rpw = document.getElementById("dynPwElem");
// use property maxLength instead of setAttribute to work in IE
if (rpw.maxLength < 32) {
    rpw.maxLength = 32;
}
} 

// attach focus event to expand the password field length
if (rpw.addEventListener) {
    rpw.addEventListener("focus", expandPwLength, true);
} else {
    rpw.attachEvent("onfocus", expandPwLength); // IE <= 8
}

Prevent form submit if the user hits "Enter" in the user ID field, using a keystroke event listener. Instead, move caret to the password field.

function preventAutocomplete (charCode) {
if (charCode == 13) {
    // instead of autocompleting password, navigate to the password field.
        document.getElementById("dynPwElem").focus();
    }
    }
}

In the same keystroke event listener, truncate the autocomplete property of the password element.

if (charCode == 13 || charCode == 40) // the Enter key, or the Down-arrow key
    document.forms["loginSubmitForm"].userPassword.autocomplete = "";

Set the entire form property "autocomplete" to "off" using JavaScript on page load, not in the HTML tag.

document.forms["loginSubmitForm"].autocomplete="off";

Upvotes: 2

Related Questions