In modern browsers the standard of autofill and autocomplete is to completely ignore autocomplete="off" for password fields that are placed in a form. And insert saved passwords, even if it's in a user management page. Although the reason is in the right place, it makes creating a user management page a huge pain.
My team's web application runs with angular 7 and currently only supports chrome. But there's a big possibility that we will need support other browsers like internet explorer, edge, firefox, etc.
I know this is a largely touched subject, and that I can find many questions with answers similar to this question (like this, or this). But every solution I've found so far has at least one big flaw.
What I've tried so far on chrome:
1) Use autocomplete="new-password"
It seems that chrome/chromium developers ignores even this for type="password".
2) Use type="text" autocomplete="new-password" with asterisk font family
This disables chrome from auto-filling the input field and hides the letters. But the big flaw is that the value is still there and can be copy-pasted in a different font family. The input field also loses the security of type="password" and any hacker can easily get the value.
3) Use -webkit-text-security
This is pretty much the same solution as the one before but this isn't even css standard and few browsers support it.
4) Replace value with *
This is the trickiest solution I've tried so far. When input value is changed I call a function in typescript that: Adds the new character to a local string, Change DOM value to * equal to the amount of characters, Return the locally saved value on (blur).
This leaves me with a large amount of problems to deal with including: Erasing any character in the string removes the last character always, In addition to the last problem the first character will always stay the same even if the value is completely erased, Having to know where in the string to remove characters.
This solution is less than ideal.
5) Disable password management for domain in browser settings
This really isn't a solution to the problem as it means that I expect the users to turn off password management for domain. It would also result in not saving the password on the login page as many users may need.
6) Randomise [name] and [autocomplete] values
By one way binding said values to a randomised string based on current time, I can ensure that the password field doesn't match any fields saved by the browser. Although many has reported that this works between all browsers, this doesn't seem to work for me at all when using chrome. For me chrome shows recommended password as long as the input is of type="password".
Solutions I've seen so far:
1) Use two input fields
This seems to me to work the same as my own solution 4). And will probably be just as troublesome to work with.
2) Use jQuery Disable Auto Fill Plugin
This seem to be very close to what I'm looking for but the problem is that it uses jQuery. All I can say is that I've been told that we're not using jQuery and that I probably won't be able to use the plugin directly.
I'm currently looking for a way to implement this using angular and would love any help or directions on this.
If you know of any solution that I haven't mentioned above, please post an answer or drop me a link in comments.