Password field outputs in plain text using console.log() - javascript

I discovered something interesting today while messing around with the password fields in Google Chrome.
Interestingly, outputting the value of an input of type 'password' to console using console.log(password); totally negates the idea of obscuring the password fields by printing the password in plain text in the console.
var password = $('#password').val();
console.log(password);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="form-control text-box single-line input-validation-valid" id="password" name="password" type="password" value="test">
Would this cause any security issues at all?

The value of all textual input controls is the text that was typed in it, irrelevant if it is a password input or not. The only difference that type="password" makes is that it obscures the text in the web view.
You can even call up the Dev Tools to inspect a password textbox, change type="password" to type="text" and BAM you suddenly see the plain text that you typed.

Related

how can I put different code or not editable code when ctrl+shift+i I am doing in browser

I have some Html code Like:
Enter UserName <input type="text" name="user"><br>
Enter Password <input type="password" name="pass">
when I running this code it displaing on browser but while I am doing ctrl+shift+i html code is coming like this:
<input name="pass" type="password">
but if I change this type runtime as a "text" then my password is visible.
please tell me some solution how I can change or put different code in runtime that shows not changeable after ctrl+shift+i.
You can do it this way by applying the same security attribute to input box of any type to show value as the password.
input.password-input {
text-security: disc;
-webkit-text-security: disc;
-moz-text-security: disc;
}
Enter UserName <input type="text" name="user"><br> Enter Password <input type="password" class="password-input" name="pass">
If you change input type then text still can't visible.
But caution, someone could simply "inspect element" in Chrome and change the css element from "disc" to "none" and real text would be seen clear as day.

Can a javascript program read the validation result given by `type="email"` of `input` element?

in HTML, type="email" of input element can validate if an input string has a valid email format.
I would like to write a javascript program which will act differently when an input string to such an input element has or doesn't have a valid email format.
Can a javascript program read the validation result given by type="email" of input element? If not, why?
Or do I have to implement validation of email format in Javascript instead?
Thanks.
You can use the :invalid pseudoselector and querySelectorAll. In the following two email inputs - one with an invalid value set and one with a valid email. Css styling (using the :invalid pseudoselector to indicate which one is which. The console log will query all inputs that are invalid and log them.
The bigger issue may be the validation that is required to pass may be as simple as requiring a "#" symbol - so this is not a very stringent validation.
var test = document.querySelectorAll('input:invalid');
console.log(test);
input:invalid{background: red}
<input type="email" value="blah.com"/>
<input type="email" value="blah#blah.com"/>
It seem you can do something like this
<form id='form' action='post'>
<input id='email' type='email' required/>
<input type='submit' value='Submit'/>
</form>
<script>
console.log( document.getElementById('form').checkValidity() );
console.log( document.getElementById('email').checkValidity() );
</script>

Vue js : can't change saved password in Chrome

i have an issue, i have a login page to my website, and when i'm connecting and click on "Save password" on Google Chrome, i can't change my password anymore:
My password field auto fill with the password of the mail, and when i try to enter another one (with the email still in the email field), but it keeps re auto fill with the old password (every second or so), here is my password input:
<input class="form-control" required name="password" :placeholder="$gettext('Password')" type="password" v-model="password">
I don't have any code or function that change the password model.
If someone have an idea from where it can come, i'll be really thankful.

using 2 inputs or change type of input to show password

I want to add a show password checkbox to my form.
When a user checks that checkbox password is shown.
Most of the examples that I found are using 2 inputs, one with type="text" and the other with type="password". And switch between these inputs according to the status of the checkbox.
it is simpler to change type of input to type="text", so why people use 2 inputs?
Be careful with using type="text" as a way of showing the password, as it exposes the user to saving the password in plain text in their autocomplete settings. I think the two input box approach is probably safer as you can stop the text one from being picked up by autocomplete by using autocomplete="off"
See this artcile describing the vulnerability: https://www.foxtonforensics.com/blog/post/uncovering-plain-text-passwords-in-internet-history
probably to make it work on old versions of IE, since IE 9 and below, do not allow dynamic change of type="password" to type="text". it throws an error "Could not get the type property"
I hope ur trying to ask that u want single password input field and show password button...Below is my answer
<input type="password" name="passwd" id="txtPassword" placeholder="Password" required="required">
<input type="checkbox" id="showhide"/>
<label for="showhide" id="showhidelabel">Show Password</label>
<script type="text/javascript">
$(document).ready(function () {
$("#showhide").click(function () {
if ($("#txtPassword").attr("type")=="password") {
$("#txtPassword").attr("type", "text");
}
else{
$("#txtPassword").attr("type", "password");
}
});
});

"Show password as text" control

I have a usual login form consisting of two input fields, one for login, one for password. I am currently trying to add a control that will show entered password as plain text, so user can check it for typos.
The problem is that browsers (at least Firefox) do not allow dynamic changing of type attribute of input fields, so I cannot just change type="password" to type="text". Another problem is that browsers do not allow to get value of password field, so I can't create a new input type="text" and set its value to the password's one. I've seen several different approaches to this task, including this one, but they are working only if the password is typed and fail when browser autofills the password.
So, any suggestions to do this are welcome. I am using jQuery.
You can do something like this:
<input type="password" id="password">
<input type="checkbox" onchange="document.getElementById('password').type = this.checked ? 'text' : 'password'"> Show password
If I may, I don't think it's a great idea to show the password in text, for the following reasons:
It's not commonly done, so it will be confusing to the user
It means you are open to over-the-shoulder viewing of the password
I also think, if you just want to help users avoid typos, give them more chances before the password is disabled. I think the typical "3" that most sites implement is not really required, I'd suggest "10" attempts, or perhaps "5", if you wish to be really conservative, is quite acceptable. Just count it down for them, and let them resolve typos on their own.
Just my humble opinion.
I have never tried this myself but can't you just access the value property of the element?
if you have something like...
<input id="pw" name="pw" type="password" />
Then in JavaScript / jQuery...
var pass = document.getElementById('pw').value;
$('pw').val()
There is no any possibility to show autofilled password for security reasons. Anyone could see your password on your computer for this page if this is possible.
You have to deal with following for complete solution:
javascript is not allowed - then you should not display choose password checkbox
autocomplete is turned on - as I wrote, you're not able to show password filled this way. Eaighter switch off autocomplete or hide show password until user re-type password.
Autocomplete switch off by this jQuery
$('input').attr('autocomplete', 'off');
For adding checkbox on the fly you can use following jquery-showPassword plugin available at http://www.cuptech.eu/jquery-plugins/
$('.show-password').change(function() {
if ($("#form-fields_show-password").attr('checked')) {
var showValue = $('#form-fields_password').val();
var showPassword = $('<input type="text" size="50" required="required" name="form- fields[password]" id="form-fields_password" class="password required" value="'+showValue+'">');
$('#form-fields_password').replaceWith(showPassword);
} else {
var hideValue = $('#form-fields_password').val();
var hidePassword = $('<input type="password" size="50" required="required" name="form-fields[password]" id="form-fields_password" class="password required" value="'+hideValue+'">');
$('#form-fields_password').replaceWith(hidePassword);
}
});
Something like this will find the input area, and store the value in a variable called showValue. Then you can replace the element with type="password", with new html where type="text" and if the checkbox is unchecked the value will be dropped into password type field.
There is a problem with this method in that the password type value will be visible in the code, however to get round this you can always remove the value attribute from the password type and just force the user to re-type. If you can live with that in you application.
function change(){
id.type="password";
}
<input type="text" value="123456" id="change">
<button onclick="pass()">Change to pass</button>
<button onclick="text()">Change to text</button>
<script>function pass(){document.getElementById('change').type="password";} function text(){document.getElementById('change').type="text"; } </script>
Password: <input type="password" value="" id="myInput"><br><br>
<input type="checkbox" onclick="myFunction()">Show Password
<script>
function myFunction() {
var x = document.getElementById("myInput");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}
</script>

Categories

Resources