'HTML - Disable Password Manager

Our security team requires us to disable the password manager for protected fields on the HTML form. As an example, here's an over simplified HTML form below. When I click the submit button, firefox (version 51.0.1) pops up the password manager. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
    <form name="testform" action="disable-pwd-mgr.htm" method="post"
        autocomplete="off">

        <label for="protected-input">Protected Input</label> 
        <input type="password" size="16" maxlength="16" id="protected-input"  name="protected-input" accept="numbers" />
        <input type="password" id="disable-pwd-mgr-1" style="display: none;" value="stop-pwd-mgr-1"/>
        <input type="password" id="disable-pwd-mgr-2" style="display: none;" value="stop-pwd-mgr-2"/>

        <button name="next" id="next" type="submit" value="Next">
            NEXT
        </button>

    </form>
</body>
</html>

Note that all alternatives suggested here didn't work.

  1. autocomplete=off didn't work.
  2. Having another hidden input field of type password didn't work.

Using the two separate additional hidden password inputs, each with different dummy values seems to work for the case when the user actually inputs a value into the protected field and clicks submit. But if the field is left blank and the submit button is clicked, the password manager pops up again. Interestingly chrome (Version 55) doesn't pop up the password manager at all, which is good. Does anyone have a better solution to this problem?

html


Solution 1:[1]

Just wanted to add that including:

data-lpignore="true"

on your input element will disable Last Pass on that field. Not sure if other password managers have something similar.

Solution 2:[2]

Modern browsers respects autocomplete="new-password" on input password fields. But it is not supported in IE.

For browser support refer: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Solution 3:[3]

Some browsers may respect autocomplete="off" on the input fields themselves:

<form name="testform" action="disable-pwd-mgr.htm" method="post"
    autocomplete="off">

    <label for="protected-input">Protected Input</label> 
    <input type="password" size="16" maxlength="16" id="protected-input" accept="numbers" autocomplete="off" />
    <input type="password" id="disable-pwd-mgr-1" style="display: none;" value="stop-pwd-mgr-1"/>
    <input type="password" id="disable-pwd-mgr-2" style="display: none;" value="stop-pwd-mgr-2"/>

    <button name="next" id="next" type="submit" value="Next">
        NEXT
    </button>
</form>

However, in practice, the browser (and extensions) will often ignore this directive.

Solution 4:[4]

Simple hack (Feb 2022)

I tried many solutions nothing worked, simple hack is

  1. Use text-security-disc as font-family to display font of text field as disc
  2. Use webkit-text-security CSS property (for now it's only for Chrome, we can use that as fallback of text-security-disc font)

Example

<input type="text" name="password" class="password">

<style>
@font-face{
  font-family: text-security-disc;
  src: url("https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff");
}
.password{
  -webkit-text-security: disc;
  font-family: text-security-disc;
}
</style>

In above example -webkit-text-security: disc; is used as fallback of font-family: text-security-disc. So in case text-security-disc is unavailable then -webkit-text-security: disc; will work.

Good Luck ?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 caseybettridge
Solution 2 LAXIT KUMAR
Solution 3
Solution 4 Vikas Dwivedi

Related Questions