I need to stop browsers from storing the username & password values, because I'm working on a web application which contains more secure data. My client asked me to do this.
I tried the autocomplete="off" attribute in the HTML form and password fields. But it is not working in the latest browsers like Chrome 55, Firefox 38+, Internet Explorer 11, etc.
What is the best solution for this?
Thank you for giving a reply to me. I followed the below link
Disable browser 'Save Password' functionality
I resolved the issue by just adding readonly & onfocus="this.removeAttribute('readonly');" attributes besides autocomplete="off" to the inputs as shown below.
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
This is working fine for me.
Trying to prevent the browser from storing passwords is not a recommended thing to do. There are some workarounds that can do it, but modern browsers do not provide this feature out-of-the-box and for good reason. Modern browsers store passwords in password managers in order to enable users to use stronger passwords than they would usually.
As explained by MDN: How to Turn Off Form Autocompletion:
Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.
Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.
Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.
For this reason, many modern browsers do not support autocomplete="off" for login fields:
If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits the page.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.
Here is a pure HTML/CSS solution for Chrome tested in version 65.0.3325.162 (official build) (64-bit).
Set the input type="text" and use CSS text-security:disc to mimic type="password".
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
Note: Works in Firefox but CSS moz-text-security is
Deprecated/Removed. To fix this create a CSS font-face made only of
dots and use font-family: 'dotsfont';.
Source:
Get input type=text to look like type=password
The Source above contains a link to a work-around for CSS moz-text-security and -webkit-text-security property.
Source: https://github.com/kylewelsby/dotsfont
As far as I have tested this solution works for Chrome, Firefox version 59.0 (64-bit), Internet Explorer version 11.0.9600 as well as the IE Emulators Internet Explorer 5 and greater.
I solved this by adding autocomplete="one-time-code" to the password input.
As per an HTML reference autocomplete="one-time-code" - a one-time code used for verifying user identity. It looks like the best fit for this.
You should be able to make a fake hidden password box to prevent it.
<form>
<div style="display:none">
<input type="password" tabindex="-1"/>
</div>
<input type="text" name="username" placeholder="username"/>
<input type="password" name="password" placeholder="password"/>
</form>
By default, there is not any proper answer to disable saving a password in your browser. But luckily there is a way around and it works in almost all the browsers.
To achieve this, add a dummy input just before the actual input with autocomplete="off" and some custom styling to hide it and providing tabIndex.
Some browsers' (Chrome) 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.
<div className="password-input">
<input
type="password"
id="prevent_autofill"
autoComplete="off"
style={{
opacity: '0',
position: 'absolute',
height: '0',
width: '0',
padding: '0',
margin: '0'
}}
tabIndex="-2"
/>
<input
type="password"
autoComplete="off"
className="password-input-box"
placeholder="Password"
onChange={e => this.handleChange(e, 'password')}
/>
</div>
I tested the many solutions and finally I came with this solution.
HTML Code
<input type="text" name="UserName" id="UserName" placeholder="UserName" autocomplete="off" />
<input type="text" name="Password" id="Password" placeholder="Password" autocomplete="off"/>
CSS Code
#Password {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
JavaScript Code
window.onload = function () {
init();
}
function init() {
var x = document.getElementsByTagName("input")["Password"];
var style = window.getComputedStyle(x);
console.log(style);
if (style.webkitTextSecurity) {
// Do nothing
} else {
x.setAttribute("type", "password");
}
}
At the time this was posted, neither of the previous answers worked for me.
This approach uses a visible password field to capture the password from the user and a hidden password field to pass the password to the server. The visible password field is blanked before the form is submitted, but not with a form submit event handler (see explanation on the next paragraph). This approach transfers the visible password field value to the hidden password field as soon as possible (without unnecessary overhead) and then wipes out the visible password field. If the user tabs back into the visible password field, the value is restored. It uses the placeholder to display ●●● after the field was wiped out.
I tried clearing the visible password field on the form onsubmit event, but the browser seems to be inspecting the values before the event handler and prompts the user to save the password. Actually, if the alert at the end of passwordchange is uncommented, the browser still prompts to save the password.
function formsubmit(e) {
document.getElementById('form_password').setAttribute('placeholder', 'password');
}
function userinputfocus(e) {
//Just to make the browser mark the username field as required
// like the password field does.
e.target.value = e.target.value;
}
function passwordfocus(e) {
e.target.setAttribute('placeholder', 'password');
e.target.setAttribute('required', 'required');
e.target.value = document.getElementById('password').value;
}
function passwordkeydown(e) {
if (e.key === 'Enter') {
passwordchange(e.target);
}
}
function passwordblur(e) {
passwordchange(e.target);
if (document.getElementById('password').value !== '') {
var placeholder = '';
for (i = 0; i < document.getElementById('password').value.length; i++) {
placeholder = placeholder + '●';
}
document.getElementById('form_password').setAttribute('placeholder', placeholder);
} else {
document.getElementById('form_password').setAttribute('placeholder', 'password');
}
}
function passwordchange(password) {
if (password.getAttribute('placeholder') === 'password') {
if (password.value === '') {
password.setAttribute('required', 'required');
} else {
password.removeAttribute('required');
var placeholder = '';
for (i = 0; i < password.value.length; i++) {
placeholder = placeholder + '●';
}
}
document.getElementById('password').value = password.value;
password.value = '';
//This alert will make the browser prompt for a password save
//alert(e.type);
}
}
#form_password:not([placeholder='password'])::placeholder {
color: red; /*change to black*/
opacity: 1;
}
<form onsubmit="formsubmit(event)" action="/action_page.php">
<input type="hidden" id="password" name="password" />
<input type="text" id="username" name="username" required
autocomplete="off" placeholder="username"
onfocus="userinputfocus(event)" />
<input type="password" id="form_password" name="form_password" required
autocomplete="off" placeholder="password"
onfocus="passwordfocus(event)"
onkeydown="passwordkeydown(event)"
onblur="passwordblur(event)"/>
<br />
<input type="submit"/>
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) {
e.preventDefault();
e.stopPropagation();
e.target.setAttribute('readonly', true);
setTimeout(() => {
e.target.focus();
e.target.removeAttribute('readonly');
});
}
I'm making a PWA using React. (And using Material-UI and Formik on the component in question, so syntax may seem a bit unusual...)
I wanted to stop Chrome from trying to save login credentials (because devices are shared with many users in my situation).
For the input (MUI TextField in my case), I set the type to "text" rather than "password" in order to get around Chromes detection for the store-credentials-feature. I made input-mode as "numeric" to get the keypad to pop up as the keyboard, because users will input a PIN for their password.
And then, as others here described, I used text-security: disc; and -webkit-text-security: disc;
Again, careful of my code's syntax, as it's using React, MUI, etc. (React uses capital letters and no dashes, etc.)
See the parts with the // comment; the rest is just bonus for context.
<TextField
type="text" // this is a hack so Chrome does not offer saved credentials; should be "password" otherwise
name="pincode"
placeholder="pin"
value={values[PIN_FIELD]}
onChange={handleChange}
onBlur={handleBlur}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<RemoveRedEye
color="action"
onClick={togglePasswordMask}
/>
</InputAdornment>
),
inputProps: {
inputMode: 'numeric', // for number keyboard
style: {
textSecurity: `${passwordIsMasked ? 'disc' : ''} `, // part of hack described above. this disc mimics the password *** appearance
WebkitTextSecurity: `${passwordIsMasked ? 'disc' : ''} `, // same hack
},
},
}}
/>
As you can see, I have a toggle that lets you hide or show the pin (by clicking the eye icon). A similar function could be added as appropriate / desired.
const [passwordIsMasked, setPasswordIsMasked] = useState(true)
const togglePasswordMask = () => {
setPasswordIsMasked((value) => !value)
}
Here's a pure html/css (no js) solution
For input/type=text, use a textarea
For password, use a textarea with a circle glyph font (see https://stackoverflow.com/a/40982531/146457)
<textarea required="required" autocorrect="off" autocapitalize="off" name="username" class="form-control" placeholder="Your username" rows="1" cols="20" wrap="off"></textarea>
<textarea required="required" autocorrect="off" autocapitalize="off" name="password" class="form-control password" placeholder="Your password" rows="1" cols="20" wrap="off"></textarea>
#font-face {
font-family: 'password';
src: url('css/font/password.woff2') format('woff2'),
url('css/font/password.woff') format('woff'),
url('css/font/password.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
textarea.form-control {
overflow:hidden;
resize:none;
height:34px;
}
textarea.form-control.password:valid {
font-family: 'password';
}
Notes
Textarea prevent autofill & password manager trigger
wrap=off/overlow=hidden/rows=1 force one-line display
the required pseudo css make the placeholder works
You'll probably need some "prevent eventKey=13 / submit" thing
Works fine under ffox/chrome/iOS
In the end, it end up been a freaking webshit sum of hacks (but it works)
This worked for me:
<form action='/login' class='login-form' autocomplete='off'>
User:
<input type='user' name='user-entry'>
<input type='hidden' name='user'>
Password:
<input type='password' name='password-entry'>
<input type='hidden' name='password'>
</form>
I think it is not possible in the latest browsers.
The only way you can do that is to take another hidden password field and use it for your logic after taking value from visible password field while submitting and put dummy string in visible password field.
In this case the browser can store a dummy string instead of the actual password.
Try the following. It may be help you.
For more information, visit Input type=password, don't let browser remember the password
function setAutoCompleteOFF(tm) {
if(typeof tm == "undefined") {
tm = 10;
}
try {
var inputs = $(".auto-complete-off, input[autocomplete=off]");
setTimeout(function() {
inputs.each(function() {
var old_value = $(this).attr("value");
var thisobj = $(this);
setTimeout(function() {
thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
thisobj.val(old_value);
}, tm);
});
}, tm);
}
catch(e){
}
}
$(function(){
setAutoCompleteOFF();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="passfld" type="password" autocomplete="off" />
<input type="submit">
One way would be to generate random input names and work with them.
This way, browsers will be presented with the new form each time and won't be able to pre-populate the input fields.
If you provide us with some sample code (do you have a JavaScript single-page application (SPA) app or some server side rendering) I would be happy to help you in the implementation.
I needed this a couple of years ago for a specific situation: Two people who know their network passwords access the same machine at the same time to sign a legal agreement.
You don't want either password saved in that situation because saving a password is a legal issue, not a technical one where both the physical and temporal presence of both individuals is mandatory. Now, I'll agree that this is a rare situation to encounter, but such situations do exist and built-in password managers in web browsers are unhelpful.
My technical solution to the above was to swap between password and text types and make the background color match the text color when the field is a plain text field (thereby continuing to hide the password). Browsers don't ask to save passwords that are stored in plain text fields.
jQuery plugin:
https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js
Relevant source code from the above link:
(function($) {
$.fn.StopPasswordManager = function() {
return this.each(function() {
var $this = $(this);
$this.addClass('no-print');
$this.attr('data-background-color', $this.css('background-color'));
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this.attr('autocomplete', 'off');
$this.focus(function() {
$this.attr('type', 'password');
$this.css('background-color', $this.attr('data-background-color'));
});
$this.blur(function() {
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
});
$this.on('keydown', function(e) {
if (e.keyCode == 13)
{
$this.css('background-color', $this.css('color'));
$this.attr('type', 'text');
$this[0].selectionStart = $this[0].selectionEnd;
}
});
});
}
}(jQuery));
Demo:
https://barebonescms.com/demos/admin_pack/admin.php
Click "Add Entry" in the menu and then scroll to the bottom of the page to "Module: Stop Password Manager".
One thing you can do is ask your users to disable saving the password for your site. This can be done browser wide or origin wide.
Something else you can do is to force the inputs to be empty after the page is loaded (and after the browser auto completed the fields). Put this script at the end of the <body> element.
userIdInputElement.value = "";
userPasswordInputElement.value = "";
I would create a session variable and randomize it. Then build the id and name values based on the session variable. Then on login interrogate the session var you created.
if (!isset($_SESSION['autoMaskPassword'])) {
$bytes = random_bytes(16);
$_SESSION['autoMask_password'] = bin2hex($bytes);
}
<input type="password" name="<?=$_SESSION['autoMaskPassword']?>" placeholder="password">
In such a situation, I populate the password field with some random characters just after the original password is retrieved by the internal JavaScript code, but just before the form submission.
NOTE: The actual password is surely used for the next step by the form. The value is transferred to a hidden field first. See the code example.
That way, when the browser's password manager saves the password, it is not really the password the user had given there. So the user thinks the password has been saved, when in fact some random stuff is what got saved. Over time, the user would know that he/she can't trust the password manager to do the right job for that site.
Now this can lead to a bad user experience; I know because the user may feel that the browser has indeed saved the password. But with adequate documentation, the user can be consoled. I feel this is the way one can fully be sure that the actual password entered by the user cannot be picked up by the browser and saved.
<form id='frm' action="https://google.com">
Password: <input type="password" id="pwd" />
<input type='hidden' id='hiddenpwd' />
<button onclick='subm()'>Submit this</button>
</form>
<script>
function subm() {
var actualpwd = $('#pwd').val();
$('#hiddenpwd').val(actualpwd);
// ...Do whatever Ajax, etc. with this actual pwd
// ...Or assign the value to another hidden field
$('#pwd').val('globbedygook');
$('#frm').submit();
}
</script>
I did it by setting the input field as "text", and catching and manipulating the input keys
first activate a function to catch keys
yourInputElement.addEventListener('keydown', onInputPassword);
the onInputPassword function is like this:
(assuming that you have the "password" variable defined somewhere)
onInputPassword( event ) {
let key = event.key;
event.preventDefault(); // this is to prevent the key to reach the input field
if( key == "Enter" ) {
// here you put a call to the function that will do something with the password
}
else if( key == "Backspace" ) {
if( password ) {
// remove the last character if any
yourInputElement.value = yourInputElement.value.slice(0, -1);
password = password.slice(0, -1);
}
}
else if( (key >= '0' && key <= '9') || (key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z') ) {
// show a fake '*' on input field and store the real password
yourInputElement.value = yourInputElement.value + "*";
password += key;
}
}
so all alphanumeric keys will be added to the password, the 'backspace' key will erase one character, the 'enter' key will terminate, and any other keys will be ignored
don't forget to call removeEventListener('keydown', onInputPassword) somewhere at the end
While the previous solutions are very correct, if you absolutely need the feature then you can mimic the situation with custom input using text-field and JavaScript.
For secure usage, you can use any cryptography technique. So this way you will bypass the browser's password saving behavior.
If you want to know more about the idea, we can discuss that on chat. But the gist is discussed in previous answers and you can get the idea.
It is working fine for a password field to prevent to remember its history:
$('#multi_user_timeout_pin').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');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="multi_user_timeout_pin" name="multi_user_pin" autocomplete="off" class="form-control" placeholder="Type your PIN here" ng-model="logutUserPin">
I just change the type attribute of the field password to hidden before the click event:
document.getElementById("password").setAttribute("type", "hidden");
document.getElementById("save").click();
The password input box is essentially character replacement.
1.download font https://pan.baidu.com/s/1TnlCRB8cam6KgS6OarXu3w (c23n)
2.
<style>
#font-face {
font-family: 'htmlpassword';
font-style: normal;
font-weight: 300;
src: url(./css/fonts/htmlpassword.woff2) format('woff2');
}
</style>
<input type="text" autocomplete="off" name="password" style="font-family: "htmlpassword";">
Try
<input type="password" placeholder="Enter password" autocomplete="new-password">
autocomplete="new-password" works for me.
Using that code :
<!-- THIS IS WHERE IT ALL STARTS -->
<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<table class="title">
<tr><th>Web Bank application</th></tr>
</table>
<br/>
<fieldset>
<legend>Login Page - please enter your Username and Password</legend>
<form action="loginPage">
Username: <input type="text" name="username"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Login">
</form>
</fieldset>
<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>
The user enters his username and password
How can I present to the screen asterisks (*) when I enter the password , e.g. instead of showning myPassword , I want to present ********** , and keep the actual characters of the string myPassword in tact ?
Thanks
<input type="password" name="password">
change it to
<input type="PASSWORD" name="password">
Specifications
Control types created with INPUT
When working with passwords, use the input type="password" instead of text.
The format is the same, it will just tell the browser that you want your user to enter a password in it, or other sensitive data, that should be hidden from weary eyes. So the browser will not show the typed characters (or just briefly), but will show asterisks instead.
Username: <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
Right, #eric-yin has the correct answer: An input with type="password" masks the password.
Nevertheless, Like #beefchimi, i needed: a password field that can:
Show asterisks in every browser
Show the final character without an asterisk
So i wrote this jQuery plugin:
$.fn.betta_pw_fld = function(pwfld_sel, hiddenfld_sel) {
// this is the form the plugin is called on
$(this).each(function() {
// the plugin accepts the css selector of the pw field (pwfld_sel)
var pwfld = $(this).find(pwfld_sel);
// on keyup, do the masking visually while filling a field for actual use
pwfld.off('keyup.betta_pw_fld');
pwfld.on('keyup.betta_pw_fld', function() {
// if they haven't typed anything...just stop working
var pchars = $(this).val();
if (pchars == '') return;
// we'll need the hidden characters too (for backspace and form submission)
var hiddenfld = $(this).parents('form').find(hiddenfld_sel);
var hchars = hiddenfld.val();
// use these placeholders to build our password values
// this one will have all asterisks except the last char
var newval = '';
// this one will have the actual pw in it, but we'll hide it
var newhpw = '';
// in this block, we're in a "keydown" event...
// let's get the characters entered
// loop over them and build newval and newhpw appropriately
for (i=0; i<pchars.length - 1; i++) {
if (pchars[i] == '*') {
newhpw += hchars[i];
} else {
newhpw += pchars[i];
}
newval += '*';
}
// we want to see the last character...
var lastchar = pchars[pchars.length - 1];
if (lastchar == '*') {
newval += hchars[pchars.length - 1];
newhpw += hchars[pchars.length - 1];
} else {
newval += pchars[pchars.length - 1];
newhpw += pchars[pchars.length - 1];
}
// set the updated (masked), visual pw field
$(this).val(newval);
// keep the pw hidden and ready for form submission in a hidden input
hiddenfld.val(newhpw);
});
});
};
The html might be:
<form id="myForm">
<label for="pw">Type password:</label><br>
<input name="pw" class="stylishPassword" type="text"><br>
<input class="hiddenPassword" type="hidden">
</form>
And at document.ready, or appropriate time, the plugin is instantiated like this:
$('#myForm').betta_pw_fld('.stylishPassword', '.hiddenPassword')
Visit the Better Password Field jQuery Plugin Codepen and then please remember to vote it up if it helps you.