How to disable Chrome's saved password prompt setting through JavaScript

Asked 25/9, 2015 at 5:21 Answered 6/6 at 19:13

Is there any way to manipulate Chrome settings with the help of JavaScript or jQuery? I want to disable the save password pop-up bubble using JavaScript. How to do this?

Pepsinate answered 25/9, 2015 at 5:21 Comment(7)

chrome just made this un-disable-able from html/js, but skipping the name attrib on the input should prevent the pop-up. you will have to add the name in with JS before the form submits. – Hudis 25/9, 2015 at 5:34

... why would you expect to be able to manipulate client settings from the server? – Lamellate 25/9, 2015 at 5:35

I have a task that I have to disable bubble pop up of save password that is in chrome using code means using javascript or jquery. That's why I am asking this question. Is there any possible way to do this? – Pepsinate 25/9, 2015 at 5:50

Why would you want to do this? – Unworldly 29/9, 2015 at 6:29

Because if you click on save password than third user can see your user name and password from settings. I want to prevent this. – Pepsinate 29/9, 2015 at 6:54

duplicate:https://mcmap.net/q/384533/-how-do-i-disable-the-save-password-bubble-in-chrome-using-javascript, https://mcmap.net/q/391974/-chrome-save-password-on-this-site-offer, https://mcmap.net/q/391975/-prevent-chrome-from-prompting-to-save-password-from-input-box – Blaeberry 20/10, 2015 at 5:56

I have given answer on my own question you can see below – Pepsinate 20/10, 2015 at 6:8

Now I am going to give answer on my own question.

It can be done in both chrome as well as in mozilla fire fox.

For Chrome

First of all you must have to remove the attribute "password" of input type.

The main reason behind this is when you take input type = "text" and input type = "password" major browser shows that pop up. Because browsers have inbuilt functionality to show that pop up when you take input type = "password".

Now we can manipulate chrome from this.

Here is an example

<html>
<head>
   <title> Remove Save Password Pop Up For Chrome </title>
   <style>
       #txtPassword{
           -webkit-text-security:disc;
       }
   </style>
</head>
<body>
   <input type="text" id="txtUserName" />
   <br />
   <input type="text" id="txtPassword" />
   <br />
</body>
</html>

It is css property that is used for changing text into bullets.

For Mozilla

You cannot do this in mozilla. Because -moz-text-security is obsolete. It is not working in mozilla.

But we can also manipulate mozilla.

Now there are list of character codes in html that is supported in all of the major browsers.

From that character code for bullet is '•'. When you write this code in html it will print bullet like this "•"

Now we can replace the text field with these bullets

But there is one limitation for this. You cannot print bullets inside the text box. But there is also solution for that limitation. Because everything is possible in programming world.

For that limitation we can make fake div that shows bullets when you write password.

Here is an example.

<html>
<head>
  <title> Remove Save Password Pop Up For Mozilla </title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
  <script>
      function RemoveSavedPassword() {
         if (jQuery.browser.webkit == undefined) {
             inputValue = $('.real-input').val();
             numChars = inputValue.length;
             showText = "";
        for (i = 0; i < numChars; i++) {
            showText += "&#8226;";
        }
        $('.fake-input').html(showText);
    }
 }
  </script>
</head>
<body>
    <div class="input-box">
       <label>Enter password:</label>
       <div class="fake-input"></div>
       <input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
    </div>
</body>
</html>

Now there is magic of CSS. Magic means power of margin, padding, opacity and position attribute we can manipulate user.

Here is the link:

http://codepen.io/jay191193/pen/bVBPVa

Security Issue

For security issue of input type="text" instead of input type="password" you can visit this link:

Security issue of changing type="password" into type="text"

Pepsinate answered 29/9, 2015 at 5:42 Comment(6)

Good anser, but really complicated. – Enchanting 8/2, 2017 at 2:31

yes, you are right this is complicated. But this is complete answer. – Pepsinate 9/2, 2017 at 6:49

It is somewhere good, any way for internet explorer or opera mini? – Harbourage 16/2, 2018 at 5:25

Hi @WarisSarwar For internet explorer, there is a problem for cursor, if anyhow we can hide that cursor only for internet explorer then it is fine. I don't have any idea for opera mini(because I don't have that browser). – Pepsinate 20/2, 2018 at 22:50

Good one, is there any cross browser support answer instead of doing it for browser specific ?? – Synagogue 18/5, 2018 at 6:44

I can't find any solution for cross browser support. This is I think only browser specific. @SumanthVarada – Pepsinate 29/5, 2018 at 5:38

There isn't a way to change Chrome settings directly from JavaScript, so the following answer will focus on how to prevent that dialog from appearing for a specific HTML form.

There aren't any great ways to do this as far as I can tell - from what I've read, the HTML5 autocomplete="off" attribute gets ignored in Chrome, so it will prompt to save the password even if you supply the attribute.

There is a workaround though - if you set the password field to be readonly until it is focused, Chrome will not prompt to save the credentials. Unfortunately there is no good clean solution that I know of, so that's why the solution I am posting is a little hacky.

Please view the JSFiddle in Chrome and try submitting each form to see the solution in action (you will need to reload the fiddle after you submit each time): https://jsfiddle.net/g0e559yn/2/

Full Code:

/* Chrome does not ask to save the password from this form */

<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>

/*Chrome asks to save the password from this form */

<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>

Laundromat answered 25/9, 2015 at 6:8 Comment(2)

That worked perfectly, thanks @Maximillian Laumeister – Bronchiole 12/11, 2018 at 8:42

Works perfectly in Chrome but not in Mozilla – Reiner 13/11, 2019 at 12:57

I've had success preventing this popup by adding the type="button" attribute to the <button> that is kicking off the event.

I had understood browsers to accompany the "Do you want to save this login?" popup with any form submit, but I get this popup even when using a button outside a <form>. I am guessing that since a button by default is <button type="submit">, in some way clicking it is recognized as a form submit even if you're not using it in a <form>.

Tested in recent versions of Firefox, Chrome, Edge.

Perdu answered 7/10, 2018 at 20:37 Comment(0)

I think I found rough, but working method to prevent browser saving password prompt. It might be not really beautiful solution, but it worked for me.

Made with jQuery.

Hope it helps.

$('#modified span').on('click', function(e){
  e.preventDefault();
  $('#modified').submit();
});


//Clear the form on submit
$('form').on('submit', function(){
  $('form input[type="text"], form input[type="password"]').val('');
});

#modified input[type="submit"]{
  pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
  <h1>Browser IS asking to save password</h1>
  
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <input type="submit" value="Submit"/>
</form>

<form id="modified">
  <h1>Browser IS NOT asking to save password</h1>
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <span>
    <input type="submit" value="Submit"/>
  </span>
</form>

Homy answered 10/5, 2016 at 1:7 Comment(0)

This method work for me in chrome and mozilla, Using this in my projects:

<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">

Add onfocus="this.removeAttribute('readonly');" in your input type after this it wont remember any saved password.

Elwina answered 20/7, 2016 at 5:9 Comment(0)

For Chrome and Firefox 2018

ONLY IF YOU USE AJAX:

After you check if login and password is ok, clear password input field:

$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
   if (data == "auth is ok"){
     // clear password field
     $("#password").val(''); // <-- this will prevent browser to save password
   }
});

Fidge answered 18/7, 2018 at 21:39 Comment(0)

use Ajax

                $.post("process.php", {
                    user: txtuser,
                    pass: txtpass
                }, function(data) {
                    //alert(data);
                    async: true //blocks window close
                    //location.reload();
                    //OR
                    //window.location.href = "your link";
                });

Artery answered 3/7, 2020 at 15:5 Comment(1)

So which version of jQuery are you using where async: true would be compiled correctly in the body of a function? And async:true absolutely does not block window.close, badly copied/pasted. – Creamy 16/7, 2020 at 9:12

There's another way to do this. I think it works on all frameworks. As I've solved it in Java Spring Boot, I'll first give the solution for java spring boot projects.

You can turn off autocomplete by using autocomplete="off" attribute. But in many modern browsers this attribute does not make any effect. So, in this case, if we use one more thing under the input field then this problem can be fixed.

    <input type="text" readonly id="username" name="username">

in spring boot we should write:

    <html:text property="username" styleId="username" readonly="readonly"></html:text>

Now, by writing readonly we have disabled the save prompt. We must also use "text" as type for the password. So, it will be like this:

    <input type="text" readonly id="password" name="password">
    <html:text property="password" styleId="password" readonly="readonly"></html:text>

But this will make the password field visible. We need to show "********" in the password field. For this we will use a tricky method that is, we will use a font that makes each character look like small dots. So, we need to change into css content.

Download the “security-disc” font files/images from here. In spring boot, download the “security-disc” font/images files then define the font files inside WebContent under WEB-INF/fonts and font images under WEB-INF/images.

<style>
 
@font-face {
    font-family: 'text-security-disc';
    src: url('../WEB_INF/fonts/text-security-disc.eot');
    src: url('../WEB_INF/fonts/text-security-disc.eot?#iefix') format('embedded-opentype'),
        url('../WEB_INF/fonts/text-security-disc.woff') format('woff'),
        url('../WEB_INF/fonts/text-security-disc.ttf') format('truetype'),
        url('../WEB_INF/images/text-security-disc.svg#text-security') format('svg');
}
 
input.password {
    font-family: 'text-security-disc';
    width:15%;
    margin-bottom:5px
}
</style>

If your directory path isn't found you can use

URL('<%=request.getContextPath()%>/WEB-INF/fonts/text-security-disc.eot');

Method 2: Another method by which we can use to remove the password, also other values from the form. The values are stored in the browser in the form of a cookie, so if the cookies are deleted then the password, as well as other values, also deleted. So only we have to add a function to delete the cookies.

<script type="text/javascript"> 
    function savePass() { 
        passVal = "password = " 
            + escape(document.Frm.passWord.value) 
            + ";"; 

        document.cookie = passVal 
            + "expires = Sun, 01-May-2021 14:00:00 GMT"; 

        document.getElementById("show").innerHTML = 
            "Password saved, " + document.cookie; 
    } 
    function dltPass() { 
        document.cookie = passVal 
            + "expires = Sun, 01-May-2005 14:00:00 GMT"; 
            // Set the expiration date to  
            // removes the saved password 

        document.getElementById("show").innerHTML = 
            "Password deleted!!!"; 
        // Removes the password from the browser 

        document.getElementById("pass").value = ""; 
        // Removes the password from the input box 
    } 
</script>

Here, we added an older expiration date in dltPass function. So, the cookie will be thought of as expired and will be deleted.

Finally, another simplest way of preventing browsers to remember password is, using autocomplete="new-password". By this the browser will give random password suggestions while filling the password field in any form. So the actual password will not be saved in the browser.

Taejon answered 18/1, 2021 at 13:16 Comment(0)

Use autocomplete: one-time-code:

<input type='password' autocomplete="one-time-code" />

Nitrogen answered 6/6 at 19:13 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

For Chrome

For Mozilla

Security Issue

Recommended topics

Hot tags