I am going through an old site adding autocomplete="off" onto passwords fields, ensuring they are hashed and so on to try and increase security.
However how can I stop passwords being stored if chosen by the user in the browser. As if someone left their computer unlocked they could easily get into an admin login due to the username and password being pre-filled even with autocomplete="off" on the input boxes.
I thought I could use JavaScript to check for the existence of a value in the password field (e.g when the browser fills it) and then remove it. But to check for a value you need to change the type of the input box to "text" and once you change it back to "password" the browser fills the boxes up again with values.
Is there anyway to stop this as I would have thought that this could be a security hole for those people who use the same passwords etc as you could just change the DOM element to text, view the value in plain text, then try on other sites the same value.
The code I was trying to use was this where
getEl = an old cross browser function for document.getElement
DOM = my own DOM on load function
function clearPSW()
{
var p=getEl('strPassword');
p.setAttribute("type","text");
console.log("value is " + p.value);
// if I exit here without changing back BOTH username and password fields
// remain blank - although the PSW field is now a text field.
//return;
if(p.value!="")
{
console.log("clear");
p = "";
}
// as soon as I do this the browser re-fills the input boxes!
p.setAttribute("type","password");
}
DOM(function(){
console.log("run DOM");
setTimeout(1000,clearPSW());
});
Is there any method at all or is down to the user to be clever and not store passwords in browsers etc? Obviously I am trying to handle these insecure people and force them to re-enter their password each time.
Thanks!
Browsers such as Chrome now ignore autocomplete=off.
It is really up to the user whether they store passwords. If they do they should really lock the desktop when not at the computer and not share their OS account with others.
You could argue that turning autocomplete off means that the user will either pick a really simple to guess password or they will write it on a post-it note and stick it to the keyboard.
Include a hidden password field before your "real" password field:
<input type="password" style="display:none"/>
<input type="text" name="username"/>
<input type="password" name="password"/>
This works!
My solution is:
Change type of that input inside HTML from type="password" to type="text"
Write script that changes type of that input from type="text" to type="password"
suppose that input has id="pwd". Then:
document.getElementById('pwd').setAttribute('type', 'password')
Make a delay for calling this function (because if you would not, most browsers would still insert their cached password. My browser stops doing that when delay is > 1400):
setTimeout(
() => document.getElementById('pwd').setAttribute('type' 'password')
, 1500)
Related
I have an input field where user can enter OTP. I need to make sure that user is able to enter only numbers and it can contain maximum 6 digits. I want to mask the OTP with asterisk.
I know using type as password will mask but in my scenerio I want to mask after some milliseconds not immediately. User can see the entered number for few milliseconds in mobile browser but that's not the case for desktop browser
<input type="password" />
I found one plugin Passwordify.js which uses jQuery mask library and it's really easy to use and it mask for
<input type="text" />
https://www.jqueryscript.net/form/mask-password-asterisk-passwordify.html
Now the problem is the value itself becomes ****** but I need to send the actual value eg 878787 as otp to backend.
In addition to that I also have a submit button which is disabled by default and should be enabled only if 6 digits are there in the otp input field.
This is my code
<input type="text" id="otp" name="otp" data-val="" value="" placeholder="Enter OTP" autocomplete="off" autocorrect="off" autocapitalize="off" autofocus>
<button id="otpsubmit" disabled>Login </button>
$(document).ready(function(){
$("#otp").passwordify({
maxLength: 6,
numbersOnly: true,
});
});
$("#otp").on('change',function(){
var inputVal = $(this).val();
if(inputVal.length >= 6) {
$('#otpsubmit').attr('disabled',false);
}else {
$('#otpsubmit').attr('disabled',true);
}
});
I was wondering if someone have used these libraries for doing something similar , please suggest me how to use it correctly.
I am also open to look for other solution to the masking problem even without using these libraries.
I would like to mention that using these libraries has solved the masking and verify for numeric input scenerio both in mobile and desktop browser, the only problem now is preserving the actual value entered by user instead of ******
I have also tried keydown,keypress and keyup but e.key is always Unidentified and e.keyCode is always 229 in android chrome.
Thanks in advance
You can try this plugin https://github.com/RobinHerbots/Inputmask
It has functions to get the masked value. Check your plugin methods as well. There should be a function to retrieve the value.
I have a
<input id="TxtBox" runat="server" autocomplete="off" onkeypress="">
And while doing the keypress, directly with js code, it replaces all the characters for '*'. Like a password typing.
Edit: 2022
As i read this old question i found imprecision why i wanted to avoid type="password" at that time. It was because if that attribute were in the tag the browser would remind a old password and it was annoying.
Edit:
I passed all day trying do put the autocomplete=off on all of my inputs to the browser stop asking password while someone is filling a form on my site, ddnt worked(a tried a few more things). And i thought in this type of solution i tried the javascript replace function but it only returned one char and decided to ask about a complete sequence of '*' while writing in a input. Tks for all the help.
sorry if i wasnt clear in the context i was just thinking in the code. i thought in some old i did before in C language but anyway i asked.
Edit:
I asked help how to do this in JS i did some stuff on keypress with JS functions like replace i did some code but i simply erased it and asked for some help. Next time i will post code to have some kick start code. I was doing something like
onkeypress="this.value=this.replace(this.value,'*')"
Tks in advance.
This is for in a visible input see a password typing and in a hidden i have it.
note: i want to avoid type="password"
Why do you need JavaScript to accomplish what HTML gives your for free? The element exposes all the same attributes/properties so you can still use it like a text box.
<input type="password">
If you feel you must reinvent the wheel, this can be done by using two fields. The user will type in the first and it will display the mask character and the actual key will be stored in a hidden input field for processing:
// Get references to DOM elements:
var txt = document.getElementById("txtMask");
var hdn = document.getElementById("pass");
// This keeps track of how many characters should be displayed
var maskLen = 1;
// Set up input event on first box
txt.addEventListener("keydown", function(evt){
// Manually put the right amount of mask characters into the box
// and update the maskLen value
var str = '#'.repeat(maskLen++)
this.value = str;
// Cancel the event and stop bubbling
evt.preventDefault();
evt.stopPropagation();
// Set the actual typed data into the hidden field
hdn.value += evt.key;
// Just for testing:
console.clear();
console.log("Actual data is: " + hdn.value);
});
<input type="text" id="txtMask" autocomplete="false">
<input type="hidden" id="pass">
Use type="password"
Like this:
<input type="password" id="TxtBox" runat="server" autocomplete="off" onkeypress="">
You can also do one of these:
input { -webkit-text-security: none; }
input { -webkit-text-security: circle; }
input { -webkit-text-security: square; }
input { -webkit-text-security: disc; /* Default */ }
You can use those without having a type="password"
I have a form containing:
<input type="password" id="password" />
in which I wish to temporarily display some readable text, therefore:
$('#password').prop('type', 'text');
but when the type is subsequently changed back to password say:
$('#password').focus(function () {
$('#password').prop('type', 'password');
});
then when the form is submitted, the '...remember password?' dialog in fails to launch in Chrome and IE (it works in Firefox).
If the initial convert to text type is delayed, e.g.
setTimeout(function () {
$('#password').prop('type', 'text');
}, 1);
everything works as required in all browsers.
What's going on?
I suspect the browsers are not offering to save the password either as a security measure or as a bug.
A more reliable solution (and one that gets around security restrictions in IE8) is to create a text field immediately afterwards in the DOM which is hidden. When you want to toggle the display, toggle the visibility on both as well as the name of the field so that server-side code treats both fields equally.
Below is a simple version of how you could accomplish this:
<input type='text' id="thisPasword" name="hello" />
<input type='text' id="thisText" name="helloTmp" style="display:none"/>
function toggle() {
var both = $("#thisText,#thisPassword"),
hidden = both.filter(":hidden"),
visible = both.filter(":visible");
hidden.attr("name", "hello").val(visible.val()).show();
visible.attr("name", "helloTmp").hide();
}
My organization has successfully implemented a solution like this one, which worked across all browsers.
I am currently validating my forms using an alert system from jquery. Just with this following code:
function validateForm() {
var a = document.getElementById('inf_field_FirstName').value;
var b = document.getElementById('inf_field_Email').value;
if (a == null || a == "" || a == "First Name") {
alert("Please enter your First Name!");
return false;
}
var emailRegEx = /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i;
if (document.getElementById('inf_field_Email').value.search(emailRegEx) == -1) {
alert("Please enter a valid email address.");
return false;
}
}
However, I would like this to be a cooler looking validation rather than just having a popup telling a user to go back and complete the form again.
I stumbled across this form here: http://lewishowes.com/ at the 'start living the dream now' part. Whenever you don't type something in some text pops up in a box below the field telling you how you didn't fill out the form correctly.
How can a method like this be achieved?
In that particular example, there is actually no libraries or cool work done, he simply uses built in HTML5 validation methods. On the email field, for example, he does not do type="text" but instead type="email". That means that when the form tries to be submitted, the browser will automatically check to make sure it is valid. There are also more advanced, custom, methods, I believe, but using an email type on the input tag is the first step, and is often enough for simple cases. You also use required attribute to make a field required. And instead of leaving just First Name as the default value for the first name field, use the placeholder attribute. e.g:
<input type="text" id="inf_field_FirstName" placeholder="First Name" required>
<input type="email" id="inf_field_Email" placeholder="Email Address" required>
jsfiddle: http://jsfiddle.net/markasoftware/UdJ4Z/1/
Note that you will get an error when submitting the form because there is nothing on the server side to handle the form. However, you will be able to see the messages when you enter invalid text
Note that you should also use standard JavaScript or server-side validation, as this has limited browser support. If user input is going to do something on the server that could be abused, MAKE SURE you have server-side validation, or somebody will hack your website.
I know you can disable the autocomplete on a form by setting autocomplete="off" on the form itself.
The problem I have is, I want to prevent the browser from populating the password field but do not want to disable username or other fields.
The other thing to consider is legacy data. Using autocomplete="off" on the form (or even the field itself) does not prevent existing users with saved passwords from getting a free-pass. Or ones that use web inspector, change the value of autocomplete and submit, allowing themselves to save the password.
I know it is possible to change the password field name attribute to a random/new one on every visit. Regretfully, I am working with a java/spring back-end and I am being told this is NOT easily manageable without a huge refactor/override.
How would you architect this? How would you enforce that the field always starts empty? There is no consistent way for browsers to event notify you of pre-population by a password manager - some may fire an onChange, others may not.
I guess I can move fields around with javascript and build the real form on the fly and submit it but once again, this will have implications with spring security and validations etc. Any other ideas?
you can made a temp variable when onFocus is call to set a variable to true ( like userFocus )
and on the onChange attribut but a short code for reseting "value" to NULL if userFocus== false) kind of overkilling imo but migth work
EDIT
function reset()
{
if (document.getElementById("hidden").value!=" ")
{
document.getElementById("demo").value=" ";
}
else;
}
function getfocus()
{
document.getElementById("hidden").value=" ";
}
else;
}
<input type="password" id="pwd" onchange="reset()" onfocus="getfocus()"/>
<input type="hidden" id="hidden" value="not focus"/>
I had to find this solution for IE 11 (since it ignores the autocomplete attribute). It works fine in other browsers. Really more of a work around, but it works.
https://stackoverflow.com/a/20809203/1248536
I was recently faced with this problem, and with no simple solution since my fields can be prepopulated, I wanted to share an elegant hack I came up with by setting password type in the ready event.
Don't declare your input field as type password when creating it, but add a ready event listener to add it for you:
function createSecretTextInput(name,parent){
var createInput = document.createElement("input");
createInput.setAttribute('name', name);
createInput.setAttribute('class', 'secretText');
createInput.setAttribute('id', name+'SecretText');
createInput.setAttribute('value', 'test1234');
if(parent==null)
document.body.appendChild(createInput);
else
document.getElementById(parent).appendChild(createInput);
$(function(){
document.getElementById(name+'SecretText').setAttribute('type', 'password');
});
};
createSecretTextInput('name', null);
http://jsfiddle.net/N9F4L/