42

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??

5
  • 2
    Why is autocomplete=off not the answer? Can you elaborate? What other questions have you read on this topic? Why do you need to do this? I have some reservations about a browser/JavaScript doing something to affect non-rendering aspects of a browser functionality. Apr 20, 2014 at 1:03
  • The application is in the medical industry and the requirements are that users not be able to save passwords. autocomplete=off is not the answer because it does not work...it still brings up the bubble. There are plenty of other questions on SO, and I've asked one previously and had it almost immediately marked as a duplicate. Apr 20, 2014 at 1:08
  • Can you provide a fiddle example where autocomplete=off does not work? Apr 20, 2014 at 1:54
  • 1
    The Chrome team believes that autocomplete=off is a bad idea, and that's just that. You cannot get around the problem because the Chrome people explicitly don't want you to. More info.
    – Pointy
    Apr 20, 2014 at 13:22
  • 1
    duplicate:stackoverflow.com/questions/20303053/… and stackoverflow.com/questions/27280461/… . This question has more helpful answers though.
    – kristianp
    Oct 20, 2015 at 5:41

13 Answers 13

25

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();
    }
3
  • 8
    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");. Mar 2, 2015 at 15:47
  • This may actually be better. I'm glad you found it useful!
    – Leon
    Mar 25, 2015 at 17:05
  • 1
    @FerranMaylinch, Changing the input type from password to text will display the password; So make sure you stop displaying the input first. Nov 24, 2015 at 17:13
20

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.

2
  • 1
    I think that this answer is the least complex to implement. Jul 13, 2017 at 22:32
  • 1
    The only solution I've found so far, which is really working for the latest Chrome (61 currently)
    – Igor Dymov
    Sep 13, 2017 at 15:53
4

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.

2
  • 1
    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. Apr 26, 2014 at 16:08
  • 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.
    – Mike
    Mar 18, 2016 at 15:40
3

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

4
  • 1
    Good idea but no secure
    – Alaeddine
    Apr 20, 2014 at 1:04
  • Yes, I've thought of that but Alaeddine is correct. Apr 20, 2014 at 1:08
  • 5
    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.
    – Issam Zoli
    Apr 20, 2014 at 1:18
  • 7
    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
    Feb 17, 2015 at 12:16
3

I handled this with the following markup.

#txtPassword {
  -webkit-text-security: disc;
}
<form autocomplete="off">
  <input type="text" name="id" autocomplete="off"/>
  <input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
  <input type="password" name="password" id="txtPassword" autocomplete="off"/>
  <button type="submit" class="login100-form-btn">Login</button>
</form>

2
<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.

1
  • This works great as of 7/9/2015. Other solutions no longer worked for me! Thanks!
    – Zoltan
    Jul 8, 2015 at 22:59
1

I found no alternative with all the benefits I need so, created a new one.

HTML

<input type="text" name="password" class="js-text-to-password-onedit">

jQuery (replace with vanilla JS with same logic if you don't use jQuery)

$('.js-text-to-password-onedit').focus(function(){
    el = $(this);
    el.keydown(function(e){
      if(el.prop('type')=='text'){
        el.prop('type', 'password');
      }
    });
    // This should prevent saving prompt, but it already doesn't happen. Uncomment if nescessary.
    //$(el[0].form).submit(function(){
    //  el.prop('readonly', true);
    //});
});

Benefits:

  • Does not trigger prompt
  • Does not trigger auto fill (not on page load, nor on type change)
  • Only affects inputs that are actually used (allowing undisturbed element cloning/templating in complex environments)
  • Selector by class
  • Simple and reliable (no new elements, keeps attached js events, if any)
  • Tested and works on latest Chrome 61, Firefox 55 and IE11 as of today
0

First of all I wanna tell you something. When you take [input type="text"] and also [input type="password"] Major browsers give you popup for that.

Now, replace [input type="password"] to [input type="text"] then there is css for that

#yourPassTextBoxId{

-webkit-text-secutiry:disc

}
2
0

I've subverted this by using 2 regular text boxes. One to contain the actual password and one to function as a mask. I then set the password box's opacity to 0 and the mask text box is disabled - but the background color is set to white making it appear enabled. Then I place the password box on top of the mask box. In a jscript function I update the mask's text value to display a string of '*' characters with each keypress in the password box. Two drawbacks: the blinking cursor might now show depending on your browser. It shows in IE, but not Chrome or Firefox. There's a bit of a delay as the user is typing.

My code snippet is in asp:

$(window).ready(function() {
  var pw = $('#txtPassword');
  var mask = $('#txtMask');
  $(pw).css('opacity', '0');
  $(pw).keyup(function() {
    var s = '';
    for (var i = 0; i < $(pw).val().length; i++)
      s = s + '*';
    mask.val(s);
  })
});
style... .password {
  font-family: monospace;
  position: absolute;
  background-color: white;
}
Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />

0

I had two issues with how browsers force their password behavior on you when working on a support-only login page within a regular page (the support login should never be saved):

  1. The browser will recommend a login from the rest of the page which gets in the way.
  2. The browser will ask to save the entered tech password.

So I combined two solutions I found on various stackoverflow posts and thought I'd post them here. I'm using jQuery, but the principle can be translated into regular JavaScript as well.

First, have your password field start as a text field and have JavaScript change it later - this gives a decent chance that the browser won't offer a saved password.

Second, just before submitting the form, set the password form back to being a text field, but hide it first so the password can't be seen. This could be made to look prettier by adding another text field when the password field disappears, but that's cosmetic only.

<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
  $('#password').on('focus', function()
  {
    $(this).prop('type', password');  // this stops pre-saved password offers
  });
  $('#techForm').on('submit', function()
  {
    $('#password').hide().prop('type', 'text');  // this prevents saving
  });
});
</script>

This worked for me on Firefox and Chrome as of 9/12/2017.

0

The only thing worked for me was adding a space to input's value after document ready and then deleting the space when user focused on the input.

$('.login-input').val(' ');
$('.login-input').on('focus', function() {
    $(this).val('');
});

Simple and easy. Works on Chrome 64. In Firefox all you need is adding autocomplete="off" attribute to the input.

0

My own solution jQuery with PrimeFaces. Tested work in Chrome and Internet Explorer but in mozilla firefox (though not in Firefox)

<script  type="text/javascript" charset="utf-8">
$(function(){
    $('#frmLogin').on('submit',function(e){

        $(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')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");

    });
});
</script>

<h:inputSecret id="password" value="#{loginMB.password}" class="form-control" 
    placeholder="Contraseña" tabindex="3"  label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
    <p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
1
  • 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')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>'); Mar 6, 2018 at 17:45
-2

If you choose to let Google Chrome save website passwords, you'll see a prompt every time you sign in to a new website. If you click Never for this site in the prompt, your password for the site is not saved and the site is added to a list of passwords that are never saved.

You can edit this list AND DISABLE THE PROMPT:

Click the Chrome menu Chrome menu on the browser toolbar. Select Settings. Click Show advanced settings. Click Manage saved passwords. In the Passwords dialog that appears, scroll down to the "Never saved" section at the bottom. To remove a site from this list, select it and click the X that appears the end of the row. Now revisit the website and you should see the prompt to save your password information again, if you've allowed Google Chrome to show the prompt.

1
  • 7
    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.
    – OMA
    Feb 17, 2015 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.