How to set the correct username and password textboxes?

Question

I have a login screen with a user name and password but it also has a company field which is kind of like having a domain.

The problem is that the browsers are using the domain box like the username so when you save the password in the browser, if you type the domain it fills the password in the password box, then all you need to to is add the username which is most likely that computer user. It is obviously a serious security problem.

E.g. User: Tom, Domain: Netweb, Pass: test

Tom logs in once and clicks to save his password. The next time he comes back, he enters Netweb into the domain and presses return, it fills the password which was saved for that domain and then he can enter his username afterwards.

What can I do about this? Is there a way to set the username so that it doesn't use the company or a way to use the top two before adding the password?

My code is below:

<tr class="center">
    <td class="center">User Name
        <br />
        <asp:TextBox ID="txtUser" runat="server"></asp:TextBox>
    </td>
</tr>
<tr class="center">
    <td class="center">Company
        <br />
        <asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
    </td>
</tr>
<tr class="center">
    <td class="center">Password
        <br />
        <asp:TextBox ID="txtPass" runat="server" TextMode="Password"></asp:TextBox>
        <br />Remember me?
        <asp:CheckBox ID="chkPersistCookie" runat="server" AutoPostBack="false" />
        <br />
        <br />
        <asp:Button ID="btnSubmit" runat="server" Text="Login" CssClass="center" OnClick="btnSubmit_Click" />
        <br />
        <asp:Label ID="lblMessage" runat="server"></asp:Label>
        <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtUser" ErrorMessage="Please enter a user name" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtCompany" ErrorMessage="Please enter a company" ForeColor="Red"></asp:RequiredFieldValidator>
        <br />
        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPass" ErrorMessage="Please enter a password" ForeColor="Red"></asp:RequiredFieldValidator>
    </td>
</tr>

Answer 1

What you're facing here is known as autocomplete attribute for Form Values. When you submit a form, Browser saves the form values for further usage on the very same page. Browser sometimes also provides the user ability to Save the Password for the very website.

It is something like this

<input type="text" name="someInputName" autocomplete="off|on" />

But remember, even if the browser saves the data for the autocomplete. It will never ever save the Passwords of the user for the autocomplete feature. They're not saved anywhere until the user allows the software to do so.

What you're facing here is the Form Autocomplete feature by Browsers. In this case, Browser saves the User's data and then you can just either remove that Data from the Browser by going to the Settings of the browser and further more under the hood, and there selecting the Saved passwords, and removing the password for your site.

Otherwise, you have no control in preventing what a user want to do. But, as Google does. You can implement their idea of the Security.

What they do is that they show you an input box, of Password type and then they write the Email address that is associated with the account. This way, you will trick the Browser and the browser would think that you require something else and not the password for him.

There are some other things that you can do too. Like, getting the user's Email address on one page, and then getting Password on the next page—like Google does now.

Answer 2

If the problem is just with automatic prompting of password in the textbox then you need to disable AutoComplete property of the textbox

Answer 3

With the autocomplete field as it is, you're best off making as many helpful pointers to the browser as possible. In your case, that would be something like:

<asp:TextBox ID="username" x-autocompletetype="given-name" runat="server"></asp:TextBox>
<asp:TextBox ID="txtCompany" x-autocompletetype="organization" runat="server"></asp:TextBox>
<asp:TextBox ID="password" x-autocompletetype="password" runat="server" TextMode="Password"></asp:TextBox>

Note that this is meant for forms proper, not the login types that you refer to. Also, these are tested with HTML Form Inputs - I assume ASP should transfer custom attributes into the resulting HTML code, but it's a possible fail. The ASP ID maps to HTML Input name for sure though.

---

This was a very interesting question for me, because Autocomplete seems to be one of those things that's not even close to a standard yet.

HTML5 W3 Spec

The "on" keyword indicates that the user agent is allowed to provide the user with autocompletion values, but does not provide any further information about what kind of data the user might be expected to enter. User agents would have to use heuristics to decide what autocompletion values to suggest.

A team from Google seems to want to change that with their proposal

Current autofill products rely on contextual clues to determine the type of data that should be filled into form elements. Examples of these contextual clues include the name of the input element, the text surrounding it, and placeholder text.

We have discussed the shortcomings of these ad hoc approaches with developers of several autofill products, and all have been interested in a solution that would let website authors classify their form fields themselves. While current methods of field classification work in general, for many cases they are unreliable or ambiguous due to the many variations and conventions used by web developers when creating their forms:

Here's a nice link that covers how this proposal, if implemented, will work:

<input type="text" name="firstname" value="" x-autocompletetype="given-name">  
<input type="text" name="doesn-matter" value="" x-autocompletetype="family-name">  
<input id="email" type="text" name="email" value="" x-autocompletetype="email">

Further links:

• WHATWG Wiki on autocomplete types
• Google Blogpost introducing x-autocompletetype

Answer 4

Solved for now by swapping the textboxes around in the end.

Answer 5

How we handle this is by appending a random value onto the id and name attributes of the textbox on every page load. Then the browser has no way to recall the auto complete, since it was stored for a field with different identifiers.

Use ClientIDMode="Static" for this, so that .net doesn't generate the Id for you.

Answer 6

I am not sure I understood your question. But a couple of tips:

You can tell Chrome not to remember passwords using autocomplete: http://www.w3schools.com/tags/att_input_autocomplete.asp

You can change the tab sequence of the textboxes using tabindex: http://www.w3schools.com/tags/att_global_tabindex.asp

Answer 7

If your only problem is that you can autofill the password you can disable this through the codebehind by doing the following:

txtPass.Attributes.Add("autocomplete", "off");

Answer 8

Use either for Domain/Company:

<asp:TextBox id="Textbox1" runat="server" autocomplete="off"></asp:TextBox>

Or from the CodeBehind:

Textbox1.Attributes.Add("autocomplete", "off");

It will disable autocomplete for textbox company.

If it doesn't resolve the problem, the alternate way is to use some validation like:

1. When Domain/Company is entered, checks if Username is provided.

2. If username is not provided & password is present, give error message to fill username first & deliberately empty textboxes for Company & password.

Some code in jquery will be like:

$(txtDomain).focusout(function() {
      if($txtUserName).val().trim()=="" && $(txtDomain).val().trim()!="" && $(txtPass).val().trim()!="")
      {
         alert('Please fill the username first');
         $(txtPass).val('');
         $(txtDomain).val('');
      }

I know this is not good solution & also has usability issues. But this can be last resort, if anything else not works.

Hope it helps.

Answer 9

Browser auto fills credentials to wrong text field?

Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills (just guessing due to observation) the nearest textlike-input field, that appears prior the password field in DOM. As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials. This readonly-fix worked for me.

As you swapped the order to " user ... password ... company" it works. Again the Browser will use the field prior to password, now user, to fill in the credentials.

fix browser autofill in: set readonly and set writeble on focus (click and tab)

 <input type="password" readonly  
     onfocus="$(this).removeAttr('readonly');"/>

Answer 10

Manage the cookie manually, This is the jQuery Sample.

     $("#chkPersistCookie").change(function() {

        if(this.checked) {

        var username = $('#txtUser').attr("value");
        var password = $('#txtPass').attr("value");

        $.cookie('username', username, { expires: 14 });
        $.cookie('password', password, { expires: 14 });
        $.cookie('remember', true, { expires: 14 });

    } else {
        $.cookie('username', null);
        $.cookie('password', null);
        $.cookie('remember', null);

    }
    });

To get the cookie and assign it back to the control use the following

var remember = $.cookie('remember');
    if ( remember == 'true' ) {

        $("#chkPersistCookie").attr("checked",true)
        var username = $.cookie('username');
        var password = $.cookie('password');

        $('#txtUser').attr("value", username);
        $('#txtPass').attr("value", password);
    }