How to prevent save credentials from login page in web browser

Question

I am looking for some workaround, how to disable save credentials functionality in web browser after fill in. I have found several solutions but neither of them doesn't work in all browser (all solutions was old and authors tested these "hacks" in older browser versions). I have tested on Chrome, FF, Opera, IE (current versions). In most cases only FF has a problem, it always wanted to save credential. Could someone help me?

Here are some solutions which works for all browsers except FF.

<form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly 
   onfocus="this.removeAttribute('readonly');" >
  Password:
  <input type="password" name="password" autocomplete="off" readonly 
  onfocus="this.removeAttribute('readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

2.)

 <form action="test.php"  method="post" autocomplete="off">
    <div style="display:none">
        <input type="password" tabindex="-1"/>
      </div>
      Username:
     <input type="text" name="username" placeholder="username"/>
    Password:  
    <input type="password" name="password" placeholder="password"/>
      <input type="submit" value="Login">
    </form> //works for Chrome, IE, Opera; doesn't work FF.

3.)

<form action='test.php' class='login-form' autocomplete='off'>
  Username:
  <input type='user' name='username'>
  <input type='hidden' name='user'>

  Password:
  <input type='password' name='password'>
  <input type='hidden' name='password'>
</form> //works for Chrome, IE, Opera; doesn't work FF.

4.)

    <form action="test.php"  method="post" autocomplete="off">
  Username:
  <input type="text" name="username" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
   onfocusout="this.setAttribute('readonly','readonly');" >

  Password:
  <input type="password" name="password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"
  onfocusout="this.setAttribute('readonly','readonly');" >
  <input type="submit" value="Login">
</form> //works for Chrome, IE, Opera; doesn't work FF.

5.)

 Username: 
<input type="text" id="username" name="username"/>
 Password:
<input type="password" id="password" name="password"/>


<form id="theForm" action="test.php" method="post">
  <input type="hidden" id="hiddenUsername" name="username"/>
  <input type="hidden" id="hiddenPassword" name="password"/>
  <input type="submit" value="Login"/>
</form>


<script type="text/javascript" language="JavaScript">
  $("#theForm").submit(function() {
    $("#hiddenUsername").val($("#username").val());
    $("#hiddenPassword").val($("#password").val());
  });
  $("#username,#password").keypress(function(e) {
    if (e.which == 13) {
      $("#theForm").submit();
    }
  });
</script>

Hello and welcome to Stackoverflow. Please further explain what solutions you have tried so far. Maybe a combination could solve your Problem? — Lumnezia, Jan 09 '20 at 07:58
Does this answer your question? [how to disable save password prompt in chrome](https://stackoverflow.com/questions/33341027/how-to-disable-save-password-prompt-in-chrome) — Pushprajsinh Chudasama, Jan 09 '20 at 07:59
@BhavikKalariya thank you, it works. However I would like to ask, if the solution provided in thread which you mentioned is secure? `` — lkip912, Jan 09 '20 at 08:23
@BhavikKalariya, Okay, I have just updated FF from version 71 to 72. The password is not hidden in version 72, it is showing like normal text — lkip912, Jan 09 '20 at 08:48

score 1 · Answer 1 · answered Jan 09 '20 at 08:13

1

On the first solution, you need to add :

onfocusout="this.setAttribute('readonly','readonly');"

answered Jan 09 '20 at 08:13

A.Baudouin

2,855
3
24
28

Where should I add it? – lkip912 Jan 09 '20 at 08:21
On the two inputs (username and password) avec onfocus – A.Baudouin Jan 09 '20 at 08:25
thank you for your answer. I tried it, and I have already edited my question. Please check solution 4 if it is correct. It still doesn't work in FF. – lkip912 Jan 09 '20 at 08:28

score 0 · Answer 2 · answered Jan 14 '20 at 09:58

0

Have you tried using:

<form autocomplete="off"> 
  <input type="text" id="username" autocomplete="none"/> 
  <input type="text" id="password" autocomplete="none"/>
</form>

Or you could try using this plugin for jQuery. https://terrylinooo.github.io/jquery.disableAutoFill/

It is an alternative listed in the mozilla site.

answered Jan 14 '20 at 09:58

Deckerz

2,606
14
33

First solution - password is not hidden. I will try to look on jQuery plugin which you mentioned. – lkip912 Jan 14 '20 at 10:58

score 0 · Answer 3 · answered Jan 14 '20 at 09:59

You could you intercept the submit process and send the details via AJAX using JavaScript, once a response is recieved then redirect, this should stop the browser from storing the credentials, code could look like (using jQuery):

<script type="text/javascript">
$(document).on("ready", function(){
    $("form").on("submit", function(){
        var action = $(this).attr("action");
        var username = $(this).find("[name=username]").val();
        var password = $(this).find("[name=password]").val();
        $.post(action, {username: username, password: password}, function(response){
            if(response=="ok"){
                // go to logged in page
            }else{
                //present error
            }
        });
        return false;
    });
});
</script>

This assumes the response from test.php on successful login is ok

How to prevent save credentials from login page in web browser

3 Answers3