How to make autocomplete=off work in login/password field in Firefox

Question

I want to prevent browsers from storing and showing input values. This is how I do this:

<form autocomplete="off">
<input type="text" autocomplete="off" name="login" />
<input type="password" autocomplete="off" name="pswd" />
...
</form>

But for some insane reasons browsers keep storing and showing values, even if I completely clear browser history. So, I wonder why autocomplete="off" is not working. Probably, there is another, more proper way to do this. PS. I'm not sure whether it is important or not, but I'm using jquery to build my form.

EDIT

And by the way, contrary to official W3C documentation, in HTML5 autocomplete="off" is not respected (at least in FF).

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields:

[...] many modern browsers do not support autocomplete="off" for login fields.

• if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
• if a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.

While the reasoning behind this is debatable, it's intended behavior.

Answer 2

Modern browsers with a builtin password manager ignore autocomplete="off" in login forms (usually specifically forms with a <input type="password">). When the enduser logs in for the first time via such a form, the browser will ask the enduser whether to remember the login for this site or not. If the enduser chooses No, then default behavior will continue (so autocomplete attribute will be respected, regardless of its value). However, if enduser chooses Yes, then default behavior will be overriden and it will behave as if autocomplete is always turned on. This is a browser configuration setting which is by default on. This is also mentioned in MDN.

You can work around this by simply using Ajax to submit the form. In other words, instead of using a "plain vanilla" synchronous HTML POST form, make use of XMLHttpRequest (if necessary indirectly via e.g. jQuery or equivalent). The current browsers don't recognize a login via Ajax and therefore won't ask the enduser to remember the login.

In case your web framework doesn't offer builtin Ajax facilities, then consider throwing in jQuery. It's then a matter of below lines to unobtrusively enhance an existing form. The below basic kickoff example assumes that you've reworked the server side to return plain text true or false as response, depending on whether the login was successful or not. You could if necessary conditionally respond depending on the value of X-Requested-With header:

$(document).on("submit", "#loginFormId", function() {
    var $form = $(this);

    $.post($form.attr("action"), $form.serialize(), function(response) {
        if (response) {
            window.location = "home.html"; // Redirect to homepage.
        } else {
            $("#errorMessageId").text("Unknown login, please retry");
            $form[0].reset();
        }
    });
});