We Keep Coding

How can I prevent Chrome from incorrectly grabbing a username and password and trying to store it into the user's password manager? [duplicate]

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

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();
}

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.

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.

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

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>

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

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

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
}

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" />

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):
The browser will recommend a login from the rest of the page which gets in the way.
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.

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.

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" />

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.

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

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?

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 += "•";
}
$('.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"

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>

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.

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>

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.

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
}
});

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";
});

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.

How to check inputs in <form> and send form correctly

I have 2 questions:
How to check input better? I have idea:
First, make field near input.
<input type='text' name='firstname'><label id='firstnameError'></label>
Second, call js-function on input onBlur with id of input and id of this label.
<input type='text' name='firstname' id='firstname' onBlur='checkEmpty("firstname", "firstnameError");'><label id='firstnameError'></label>
And js-script:
function checkEmpty(fieldId, errorFieldId)
{
var data = document.getElementById(fieldId).value;
if (data == "")
{
document.getElementById(errorFieldId).innerHTML="Error, input something!...";
}
}
And I will just use this function on all inputs, right?
Is it correct?
How to check all inputs in form correctly?
Sure I can set type=button and onSubmit call some function, which will check all elements in this form. ~ Same function like in first question, but with 5-7 if-blocks for each input. And yes for 10 forms, I will have to write 10 functions, etc. How better do it? Seems to me, I can only send form Id/name and get childs of element. Am I correct?
Maybe another way? I use jquery on my site anyway (some ajax). Maybe it is easier to do what I want on jquery? The problem is I am not too good in js, to use jquery easily. What do you think?

If you just want to verify if some data is provided or not, you can use required attribute.
<input type="text" name="username" required>
if you are using XHTML it should be as shown below..
<input type="text" name="username" required="required">
The required attribute is supported in Internet Explorer 10, Firefox, Opera, and Chrome and is not supported in Internet Explorer 9 and earlier versions, or in Safari.
In case if you want to use JavaScript. You can create a javascript function which will be called on submit of the form.
<form name="search" onsubmit="return validate()" >
Name: <input type="text" name="name"/>
Age: <input type="gender" name="sex"/>
<input type="submit" name="Submit" value="Submit"/>
</form>
function validate(){
// all the code for verification
return false; // if any of the step verification step fails. Otherwise return true.
}
Source: http://www.w3schools.com/tags/att_input_required.asp

To improve on your design, it's better to use non-inline JavaScript. Try using a design like this:
var fname = document.getElementById("firstname");
var other = document.getElementById("otherid");
fname.onblur = other.onblur = function() {
checkEmpty(this.id,this.id+"Error");
}
This will give all your desired elements the same onclick function and eliminate those pesky onblur attributes.
Edit: make sure your variables are declared before you chain assignments like this, or you will yield unwanted global variables.

Javascript: Prevent browser to display input history for a field on press of down key

Is there anyway to prevent the browser from displaying previously inputted values for a field on press of the down key?
If this is not possible, another problem of mine is on press of the down key, the list of previously inputted values will be shown and on press of the TAB key, the currently highlighted value on the list will be chosen and will be set as the value of the field. I do not want this, I just want the focus to be passed to the next input element w/o choosing any values.
Are there any ways to override the browser behavior? A solution in play javascript is preferred though jQuery solutions are fine as well. Thanks!

Just add the autocomplete attribute
<input type="text" autocomplete="off" />

You can disable autocomplete by adding autocomplete="off" onto your input tags. MDN Reference
Example
<input type="text" name="email" value="" autocomplete="off" />
See this Stack Overflow post for browser compatibility.

html code
<input type="text" autocomplete="off" id="password-field" class="form-control" name="multi_user_pin" placeholder="Type your PIN here"/>
jquery code
$('#password-field').on('input keydown',function(e) {
if(e.keyCode == 8 && $(this).val().length==1) {
$(this).attr('type', 'text');
$(this).val('');
}
else{
if ($(this).val() !== '') {
$(this).attr('type', 'password');
} else {
$(this).attr('type', 'text');
}
}
});
This code works fine for password field to prevent to remember its history with all browsers

Keep input values unchange in browser without depending on browser

Values entered by the user in <input/> are required to be kept unchanged after refreshing the page.
The browser dependency is expected be avoided in order to keep the cross browser compatibility.(For example: cookies, localStorage are not solution for this.) any one let me know how this can be achieved. JavaScript, Jquery can be used, but it should be browser compatible.

This should get you started. You can add text to the URL using the # sign in the URL without navigating away from the page. Then when reloading the page, you can pull the text back off of the URL.
HTML and Javascript Code:
Type something in the box below and then refresh the page:<br>
<input type="text" id="myTextBox" onkeyup="saveValue();">
<script type="text/javascript">
var originalLocation = document.location.href;
var myTextBox = document.getElementById('myTextBox');
function saveValue(){
document.location.href = originalLocation + "#" + myTextBox.value;
}
if(document.location.href.indexOf("#") > -1){
myTextBox.value = document.location.href.split("#")[1];
}
</script>

Here is a quick demonstration using localStorage (which is available in all browsers except IE<=7) that relies on this basic plugin for serializing and restoring form values. Try refreshing the page after typing some information into the inputs:
HTML:
<form>
<label for="name">Name:
<input type="text" id="name" name="name" />
</label>
<br/>
<label for="email">Email:
<input type="text" id="email" name="email" />
</label>
</form>
JS:
$(':input').on('input change keyup', function(){
localStorage.formData = JSON.stringify($('form').values());
console.log(localStorage.formData);
});
if(localStorage.formData){
$('form').values(JSON.parse(localStorage.formData));
}