Prevent Browsers not to remember password

Question

We have an application with a login screen which has input field text and password. What I am trying to achive here is;

1. Prevent browsers to ask if, user wants it to be memorized by browser.
2. Prevent all browsers not to memorize that field at any situation. Even if you said "yes", I want all the browsers ignore that field entirely.

The things I tried;

1. I tried to use autocomplete="off" on both form and inputs but with the new Firefox version, it doesn't seem to work.
2. I inserted an non-displayed input password field to trick the browser. But it is bad for accessibility. It also lowers the usability score.
3. I tried to make autocomplete="new-password" but internet explorer completely ignores it.. (like I am surprised)

So if anyone achieved a good result with any other solutions, and if it could be shared, it would be a great contribution to developer community.

Suggestive

You can probably make the field not look like a password field to browsers, so that message doesn't show on default browsers, but if someone really wants to save it, you can't prevent it. – Parapodium

What's the HTML? You could try removing attributes from the input. Could also try removing the form, but that makes it less accessible IIRC – Lucas

Yes, it makes it less accessible. I want to keep on using the password input field with type attribute password. Otherwise it causes other issues :( – Suggestive

Does this answer your question? How to disable Chrome's saved password prompt setting through JavaScript – Sulky

Not really, it causes a security problem. And also less accessible as I mentioned earlier. – Suggestive

Why is this even your goal? Are you trying to force users to type in their password every time? If so, that's a great way to get them stored in plaintext. If you do want to do this, however, you should be able to emulate a password input box by captuing keyboard event listeners. – Foredeck

I think you need to think about what it is you're really trying to achieve. And I think you might want to look at two-factor authentication (2FA). The principle there is usually that your access to the system depends on you knowing something and having something. The knowing bit is the password -- and your browser might help you know it by saving it for you. The having bit is usually implemented using a challenge-response (OTP) to a cell phone, or something like Authy if you don't want to spend $$ on SMSes. The fact that your browser might store the password then becomes less of an issue. – Leta

@DemeterDimitri Why not use autocomplete="new-password" for browsers that work and find an IE specific fix for this problem? I think you have discarded autocomplete="new-password" as if it is completely useless. Perhaps, if autocomplete="off" works in IE, use that for IE and use new-password for the rest. – Homage

Answer 1

This cannot be prevented from scripts, the only way to prevent is you can disable Autofill in Browser Settings.

Pyramidon

Answer 2

You should put text input box inside a canvas.
Take a look at CanvasInput and canvas-text-editor.

By using canvas to draw input box you can trick browsers.

or you can use contenteditable on a div.

Upside

Answer 3

You cannot do this while using an input field for passwords. I also strongly advise against you using a regular input field, because many browsers save inputs to those too (but in plain text).

Using a text box inside a canvas is not good for accessibility, and it also is completely incompatible with older browsers.

Your best bet is going to be creating a hidden div that you can type in via contenteditable, and then creating a fake password entry overlay that adds a • every time you type a character. This has the exact same level of treatment from the browser as a regular password input, but the browser won't prompt you to save it.

Madiemadigan

Answer 4

This is Tricky

The reason is browser always watch input field type when we submit.

example

<input type="password">

when use div tag browser does not show (save popup)

example(you want to write some huge logic to hide password)

<div contenteditable="true">username</div>
<div contenteditable="true">password</div>

otherwise you want to manually disable autofilling and popup in your browser

Merete