MVC 5 - Prevent password storing - asp.net-mvc

I need to prevent the storing of username/password on my MVC 5 site.
I have set the both the form and input elements to autocomplete="off" and I'm sure the site is running HTML5. For all intents and purposes it should not want to store the login information, yet, it still prompts for it after login.
As suggested, I tried changing the input field names to something other than "username" and "password", but it changed nothing.
I have even tried the trick of adding dummy username & password hidden elements outside the form, tried inside the form as well. No joy.
I have also tried doing it in jQuery, with no success
$("input").attr("autocomplete", "off");
Form tag:
<form action="/" autocomplete="off" class="form-horizontal" method="post" role="form" novalidate="novalidate">
input element:
<input autocomplete="off" class="form-control" data-val="true" data-val-regex="Mobile number must be a Numbers only." data-val-regex-pattern="[0-9]*\.?[0-9]+" data-val-required="The Mobile field is required." id="Username" name="Username" type="text" value="">
Tested in IE and chrome, but prompt to save info.
Any help or advice would be greatly appreciated. How do banks prevent this?

I tested many solution and finally, came with this one.
HTML code
#Html.TextBoxFor(m => m.UserName, new { #class = "form-control", #placeholder = "UserName", #autofocus = "", #autocomplete = "off" })
#Html.TextBoxFor(m => m.Password, new { #class = "form-control", #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");
}
}

Related

Disable autocomplete option on Google Chrome using MVC 5 application

We tried to use Autocomplete attribute of textbox and dynamic value on name attribute of textbox but unable to disbale autocomplete option on Google Chrome but it work perfectly fine on IE, Firefox.
You can try this way
If the input is inside the form, you should do like this:
<form autocomplete="off">
And the input you should do
<input type="text" id="input_name" autocomplete="none"/>
This is a sample block using Razor
<div class="position-relative form-group">
#Html.LabelFor(m => m.EmailAddress, new { #class = "control-label" })
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", #autocomplete = "off" })
#Html.ValidationMessageFor(m => m.EmailAddress, "", new { #class = "text-danger", #style = "font-style:italic;" })
</div>
Hope this one helps

How do I use bootstrap-formhelpers data-format in a #Html.TextBoxFor?

If you take a look at this bootstrap documentation for formhelpers, I can use
<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" placeholder="Cell or Home Phone" required>
to format a textbox when a user enters a phone number. I want to use an #Html.TextBoxFor or an #Html.EditorFor to do the same thing. How do I accomplish this in mvc? Here is what I have tried:
<input type="text" class="form-control bfh-phone" data-format="+1 (ddd) ddd-dddd" value="#Model.PhoneNumber" placeholder="Cell or Home Phone" required>
and
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control bfh-phone", #placeholder = "Cell or Home Phone", #data-format="+1 (ddd) ddd-dddd" } })
both of which gives a object reference razor syntax error. How is this done?
When using the overload of EditorFor() that accepts object to add html attributes, you need to use an _ (underscore) character which will be translated to a - (hyphen) by the razor engine. Use data_format = "..", not data-format = ".."
#Html.EditorFor(m => m.PhoneNumber, new { htmlAttributes =
new { #class = "..", placeholder = "..", data_format="+1 (ddd) ddd-dddd" } })
Note also you do not need the leading # character for placeholder or data_format (its only required for reserved words).

Submitting a form to ASP.NET MVC from Knockout does not bring in all the values

Here is what I have in my view in ASP.NET MVC 5
#model Entities.Coupon
#using (Html.BeginForm("coupon", "marketing", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="scsm-18 scmd-16 sclg-14">
<div class="form-group">
<label>Codes</label>
#Html.TextBoxFor(p => p.Code, new { #class = "form-control", #data_bind = "value: Code", #autofocus = true, #maxlength = "50" })
</div>
<input type="radio" name="IsPerCentOrDollar" value="1" data-bind="checked: IsPerCentOrDollar" />
<span>PercentageAmount</span>
<input type="radio" name="IsPerCentOrDollar" value="2" data-bind="checked: IsPerCentOrDollar" />
<span>DollarAmount</span>
<input type="radio" name="IsPerCentOrDollar" value="3" data-bind="checked: IsPerCentOrDollar" />
<span>FreeShipping</span>
</div>
<div class="panel-footer text-right">
<input type="submit" name="commandType" id="btnSave" class="btn btn-primary" data-bind="click:submit" value="Save" />
</div>
}
In the script:
$(document).ready(function () {
var viewModel = new CouponViewModel(couponModel);
ko.applyBindings(viewModel);
function CouponViewModel(data) {
self.Code = ko.observable(data.Code);
self.IsPerCentOrDollar = ko.observable("1");
self.DiscountLevel = ko.computed(function () {
return self.IsPerCentOrDollar();
});
};
}
Code in MVC:
[HttpPost, ActionName("coupon")]
public ActionResult coupon(Coupon coupon)
{
try
{
// some logic not yet in
}
catch (Exception ex)
{
}
return View();
}
That's all I have in there now.
In Developer tools inside the browser I can see values for self.DiscountLevel change on the selection of radio buttons.
On Submit, at MVC front the value of Code comes in but the values for DiscountLevel are not.
Any help is greatly appreciated.
Regards.
Let me expand on #StephenMuecke's comment (which has the gist of it I think).
ASP.NET MVC's default model binding will fill the argument (Coupon) with values found in the request. Only form elements are sent along with the request. You seem to expect that DiscountLevel is sent along, but it's just a JavaScript function that exists in the user's browser.
Adding something like this may solve your immediate problem:
<input type="hidden" name="DiscountLevel" data-bind="value: DiscountLevel" />
To note a related issue though: the property you have trouble with is a computed observable. However, you probably do not want to send it along as it depends entirely on IsPerCentOrDollar. Just have your server side Coupon class derive the discount level from that property too. That would also prevent users from hacking the hidden input and sending in a malicious value.

form.valid() not working from .js file in MVC

I have a .js file which is called on mvc form submit click. In that .js file function I am trying to validate the form before I do ajax post to my controller
I have also referred following script files at top of .js files as below: -
/// <reference path="~/Scripts/jquery-1.9.1.js" />
/// <reference path="~/Scripts/jquery-ui-1.10.0.js" />
/// <reference path="~/Scripts/jquery.unobtrusive-ajax.js" />
/// <reference path="~/Scripts/jquery.validate.js" />
/// <reference path="~/Scripts/jquery.validate.unobtrusive.js" />
save = function() {
var form = $("#formID");
var result1 = $("#formID").validate();
var result = $("#formID").valid();
if (result === true) {
$.ajax({
url: whatever the url,
data: form.serialize(),
type: 'POST',
...............
..........
});
}
}
My View is strongly typed and model class have all DataAnnotations.
In my scenario I have a form which loads with all data initially and hten I am trying to clear all required field data and trying to submit so that I can see the validation. When form loads I can see the html with all data- atributes such as below.
<input class="custom" data-val="true" data-val-required="First Name is required." id="txtFirstName" name="Form1[0].FirstName" placeholder="First Name" title="First Name" type="text" value="robert">
I always get 'result === true' and thats why it goes for ajax post to controller and it breaks.( i will have server side validation in future to avoid this )
Surprisingly even after I have cleared the data from "First Name" field I still see value="robert" in there....is that an issue ?
I am not sure why this is not working.
1 Firsty use "Chrome Developer Tool(CDT)" for debugging client side
2 Put a break point on the line mentioned below
3 Then in CDT put the below code, it will show you what is the field, and the validation that is failing
**$.data($('form')[0], 'validator').errorList**
[
Object
element: input#FirstName.text-box single-line input-validation-error
message: "The FirstName field is required."
__proto__: Object
Working code below
$(function () {
// Handler for .ready() called.
$('#mycustomsubmitbutton').click(function () {
var $form = $('form').first();
var result = $form.valid();
// Put you break point in the below if condition
if (result === true) {
alert("form valid");
} else {
alert("invalid form");
}
});
});
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
Employee
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<p>
<input id="mycustomsubmitbutton" type="button" value="Valid the form and make an Ajax request" />
</p>
</fieldset>
}
Quote OP:
"Surprisingly even after I have cleared the data from "First Name"
field I still see value="robert" in there....is that an issue ?"
<input class="custom" data-val="true"
data-val-required="First Name is required."
id="txtFirstName" name="Form1[0].FirstName"
placeholder="First Name"
title="First Name"
type="text"
value="robert">
value="robert" is your problem. Because of this attribute the field is not empty.
See: http://jsfiddle.net/M7skq/ and http://jsfiddle.net/JszxA/

Convert textbox type to password in asp.net mvc

How do I convert a textbox type to password in asp.net mvc?
Just write in Razor View i.e. in .cshtml file below line
#Html.PasswordFor(m=>m.Password)
Here m is model object and password is the password field name.
You mean <%=Html.Password("test")%>?
Either use the HTML helper function Password:
<%= Html.Password("Password") %>
or use the type parameter on an input field:
<input name="password" type="password" />
See listings 4 and 5 on this page
There are many types of using password-typed textboxes in ASP. NET MVC
With html controls it would be like;
<input type="password" name="xx" id="yy">
With Razor-syntax it would be like;
#Html.Password(name, value, html_attributes)
Or in a strongly typed view you could write
#Html.PasswordFor(model=>model.Password)
When using a strong-typed view and bootstrap, use the following code to make sure the password field is properly styled:
#Html.PasswordFor(model => model.Password, new { #class = "form-control" })
below is extention based on html helper:
before converting:
#Html.TextBox("mypass", null, new { style = "width: 200px;" })
After converting:
#Html.Password("mypass", null, new { style = "width:200px;" })
hope helps someone.
<div class="editor-field">
#Html.PasswordFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", placeholder = "Password" } })
#Html.ValidationMessageFor(model => model.Password)
</div>
In .cshtml file:
#Html.PasswordFor(modal => modal.Password)
Another way is to add #type = password to your html.texbox() attributes like so:
before converting:
#Html.TextBox("mypass", null, new { #class = "" })
After converting:
#Html.TextBox("mypass", null, new { #class = "", #type = password })
This will mask your text box text with circles instead of text. It does this, because the #type = password attribute tells your text box that it is of type "password".
This method of converting your text box to type password is an easy quick way to to make the conversion from your standard razor form text box.
#Html.EditorFor(model => model.Password,
"Password",
new { htmlAttributes = new { #class = "form-control" } })
Convert textbox type to password in asp.net mvc
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control", placeholder = "Password", #type="Password" } })

Resources