Preventing Password Manager Programmatically

As a frequent web user, I've come to appreciate the importance of password managers in ensuring secure online experiences.Allowing users to store passwords in secure password managers (as provided today by current browsers) is not a security risk. In fact, it helps security by allowing users to use secure and individual passwords for different websites.In most sites, our password managers are allowed, but in few we have to manually type.

How are they doing it? How to prevent password managers to stop suggestion ? Lets dive in.

What are Password Managers?

Password managers are encrypted digital vaults that store login information and sensitive data, protecting them from unauthorized access.

Ex : Dashlane, 1password, lastpass, bitwarden etc.Even google, iCloud, samsung etc offer their own password managers.

Uses :

• Generating Strong Passwords
• Storing Login credentials
• Check existing Passwords and suggestion of score
• Auto filling forms ( Credit Cards etc )

Downsides :

• Single Point of failure
• Switching from password managers is pain.

Why to prevent password managers?

Password managers some times suggest password of some other domains to different, so somehow password got entered and it got stored/shared by mistake to another one.

or else, what if credit cards etc got suggested for some other input field ( may be like username) , and they get compromised.

and also personally, the generated password is gibberish , it might be strongest but it cannot be remembered by us. We cannot access them if in case password managers are down.

To avoid these things, some times as developers we have to force users not to use password managers on certain fields.

How to prevent password managers to mess with input field?

Initally the solution is to add autocomplete=off attribute to form and input to stop password managers. But these are getting ignored, as lot of websites want to disable auto-complete for login forms based on a false understanding of security.

So, Most of password managers rely on custom attributes of input, and most of them mention in their official docs. Also these attributes not only prevent passwords, but also suggestions to credit cards etc

Basically your input will be like

<input type="password" autocomplete="off" data-1p-ignore data-bwignore data-lpignore="true" data-form-type="other">        

But what if docs are not written, or and the developer who wrote rely only on type="password" , may be like the code below

document.querySelector(‘input[type=“password”]’)        

In that case, we can confuse the query by creating multiple password inputs and hide them from user using css

<input name="disable-pwd-mgr-1" type="password" id="disable-pwd-mgr-1" style="display: none;" value="disable-pwd-mgr-1" />

<input name="disable-pwd-mgr-2" type="password" id="disable-pwd-mgr-2" style="display: none;" value="disable-pwd-mgr-2" />

<input name="disable-pwd-mgr-3" type="password" id="disable-pwd-mgr-3" style="display: none;" value="disable-pwd-mgr-3" />

<----- original ---->
<input type="password" autocomplete="off" data-1p-ignore data-bwignore data-lpignore="true" data-form-type="other">        

Thanks to stack over flow : https://stackoverflow.com/questions/41945535/html-disable-password-manager