5

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.

enter image description here

Demeter Dimitri
  • 608
  • 8
  • 17
  • 1
    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. – ASDFGerte Feb 24 '20 at 06:24
  • 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 – CertainPerformance Feb 24 '20 at 06:32
  • 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 :( – Demeter Dimitri Feb 24 '20 at 06:36
  • Does this answer your question? [How to disable Chrome's saved password prompt setting through JavaScript](https://stackoverflow.com/questions/32775342/how-to-disable-chromes-saved-password-prompt-setting-through-javascript) – F.NiX Feb 24 '20 at 08:26
  • Not really, it causes a security problem. And also less accessible as I mentioned earlier. – Demeter Dimitri Feb 24 '20 at 08:47
  • 2
    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. – ecc521 Jun 26 '20 at 21:38
  • 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. – Frans Jun 29 '20 at 13:46
  • @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. – Muhammad Talha Akbar Jun 29 '20 at 14:26

4 Answers4

6

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

vaasav kumar
  • 166
  • 1
  • 4
1

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.

Navpreet Devpuri
  • 503
  • 4
  • 19
1

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.

Splox
  • 701
  • 4
  • 14
0

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

Balaji
  • 9,657
  • 5
  • 47
  • 47