How do I disable the save password bubble in chrome using Javascript?

Question

I need to be able to prevent the Save Password bubble from even showing up after a user logs in.

Autocomplete=off is not the answer.

I have not come across a post that offers a secure solution for this issue. Is there really no way to disable the password bubble in Chrome??

Solution 1

I found there is no "supported" way to do it.

What I did was copy the password content to a hidden field and remove the password inputs BEFORE submit.

Since there aren't any passwords fields on the page when the submit occurs, the browser never asks to save it.

Here's my javascript code (using jquery):

function executeAdjustment(){       
        $("#vPassword").val($("#txtPassword").val());
        $(":password").remove();        
        var myForm = document.getElementById("createServerForm");
        myForm.action = "executeCreditAdjustment.do";
        myForm.submit();
    }

Solution 2

After hours of searching, I came up with my own solution, which seems to work in Chrome and Safari (though not in Firefox or Opera, and I haven't tested IE). The trick is to surround the password field with two dummy fields.

<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">

Here's the CSS I used:

.stealthy {
  left: 0;
  margin: 0;
  max-height: 1px;
  max-width: 1px;
  opacity: 0;
  outline: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1;
}

Note: The dummy input fields can no longer be hidden with display: none as many have suggested, because browsers detect that and ignore the hidden fields, even if the fields themselves are not hidden but are enclosed in a hidden wrapper. Hence, the reason for the CSS class which essentially makes input fields invisible and unclickable without "hiding" them.

Solution 3

Add <input type="password" style="display:none"/> to the top of your form. Chrome's autocomplete will fill in the first password input it finds, and the input before that, so with this trick it will only fill in an invisible input that doesn't matter.

Solution 4

The best solution is to simulate input password with input text by replacing value with asterisks or dots manually.

Solution 5

<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />

<script>
  function init() {
       $('#password').replaceWith('<input type="password" id="password" />');
  }     
</script>

tested in Firefox and chrome working as expected.

View more solutions

Comments

[Alaeddine]

Good idea but no secure

[Cognitronic]

Yes, I've thought of that but Alaeddine is correct.

[Issam Zoli]

The only difference between input text and password is the asterisks and deny copy from password which can be simulated, data from both inputs can be manipulated with js. To secure sending data you should use https.

[Cognitronic]

This is not working for me. Again, what I am referring to is completely shutting off the option for a user to save their password. I need to prevent the password manager bubble from even showing up.

[OMA]

Why do you say that a regular input field is not secure? You seem to imply that the password field is safer, but in reality it isn't. It's just a regular input field which shows dots/asterisks instead of text, but its contents are still sent as plain text unless the developer does some extra manipulation before sending the form. So using a regular input field is no less safe than using a password field. The only problem would perhaps be mobile devices compatibility with this pseudo-password field.

[OMA]

This is not what the original poster is asking. This site is for developers, not for end users. What he needs is a way to programatically disable the prompt, not using the browser user interface, because users aren't going to do all that stuff anyway.

[Ferran Maylinch]

Thanks Leon, we're using your solution with a slight modification: instead of removing the password input, we remove the value and set the type to text. password.val(""); password.attr("type", "text");.

[Leon]

This may actually be better. I'm glad you found it useful!

[Zoltan]

This works great as of 7/9/2015. Other solutions no longer worked for me! Thanks!

[ThorSummoner]

@FerranMaylinch, Changing the input type from password to text will display the password; So make sure you stop displaying the input first.

[ThorSummoner]

At time of writing this element doesn't even have a MDN page: developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-securi‌​ty

[Mike]

I might have done something wrong but Chrome (maybe they updated the browser) remembered the name of my variable and attached the password to that name. I tried giving the same name to both the hidden and shown password field, still didn't work. I finally ended up using an empty array for both password field names, name="password[]". It still prompts to save password but even if you tell it to save your password, it won't show up anywhere on the login page. Tested on Chrome 49.

[BrightIntelDusk]

I think that this answer is the least complex to implement.

[Igor Dymov]

The only solution I've found so far, which is really working for the latest Chrome (61 currently)

[Admin]

I'm sorry Line 2 and 3 : $(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith‌​('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8" tabindex="2"/>'); $(PrimeFaces.escapeClientId('frmLogin:password')).replac‌​eWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');

[vuquanghoang]

it should be -webkit-text-security. You got a typo.