Input type=password, don't let browser remember the password

Coping with browser idiosyncrasies

Even with our best intentions, some browsers might disregard or interpret the autocomplete attribute in their own way. ‘autocomplete="new-password"‘ is recommended but isn't foolproof. For instance, Google Chrome once disregarded ‘autocomplete="off"’, citing clashes with its password manager functionality.

Where ‘autocomplete="new-password"’ isn't effective, a JavaScript-based solution can be used. With event binding, we can modify the input’s type or attributes, bamboozling the browser's memory function:

document.getElementById('passwordField').addEventListener('focus', function() {
    this.setAttribute('type', 'text');
    // What? Me? A password field? Nah, just a plain text field here, move along...
});

document.getElementById('passwordField').addEventListener('blur', function() {
    this.setAttribute('type', 'password');
    // Phew, that was close. Back to being a mysterious password field!
});


This clever little trick changes the type of the input when it's in focus, making it less recognizable to the browser, and switching it back on blur. Be bear in mind, this hack could impact user experience.

Ethics and user experience

Before enforcing non-remembrance of passwords, consider the user's choice. Some folks depend heavily on their browsers to manage passwords securely. Therefore, opt for a balanced approach — educate the users on the correct browser settings — especially when passwords definitely shouldn't be remembered, like on public or shared machines.

Smart use of the autocomplete feature can refrain from saving passwords and still deliver a satisfactory user experience. Guide users to the right choices, but allow them the freedom to use their browser as they wish.

Vital for public computer settings

On instances like public kiosk scenarios where password non-saving must be enforced, the following JavaScript method using a time delay function could save the day:

window.onload = function() {
    setTimeout(function() {
        document.getElementById('passwordField').setAttribute('autocomplete', 'new-password');
        // Surprise! I'm new-password not just a password, gotcha autofill!
    }, 1000);
};


This time-delay approach could outsmart the browser's initial autofill attempt. Alongside a proper system configuration that clears session data, this can greatly guard privacy in public systems.

Empowering users with browser settings knowledge

By informing users on sensible choices, we ensure security and user satisfaction. Include informative popups or helpers in your app offering guidance on privacy settings for various browsers. Emphasize not saving passwords on public/shared systems and guide them on how to erase Most Recently Used (MRU) lists.

Advanced security layers

Should the need arise for beefier measures, consider creating the password field dynamically with JavaScript after page load. Or perhaps, use hidden iframes with dummy forms to divert the autofill. These methods are complex but might just do the trick. Always measure the intricacy over the actual security benefits.

Quick Recap:

Each login session could be envisioned as opening a new door with a key 🔒. And after gaining the access, the key 🔑 (just like real life) is meant to be forgotten, not copied or saved for later.