如何设置正确的用户名和密码文本框？

Question

我有一个带有用户名和密码的登录屏幕，但它也有一个公司字段，有点像拥有一个域。

问题是浏览器使用的是域框，就像用户名一样，所以当您在浏览器中保存密码时，如果您在密码框中键入域，它会在密码框中填写密码，那么您只需添加最有可能是该计算机用户的用户名。这显然是一个严重的安全问题。

例如用户：Tom，域：Netweb，通过：test

Tom 登录一次并单击以保存他的密码。下次他回来时，他将 Netweb 输入域并按回车键，它会填充为该域保存的密码，然后他可以输入他的用户名。

对此我能做些什么？有没有办法设置用户名使其不使用公司或在添加密码之前使用前两个？

我的代码如下：

<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

您在此处面临的称为表单值的autocomplete 属性。当您提交表单时，浏览器会保存表单值以供在同一页面上进一步使用。浏览器有时还为用户提供保存网站密码的功能。

是这样的

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

但请记住，即使浏览器保存了自动完成的数据。它永远不会为自动完成功能保存用户的密码。在用户允许软件这样做之前，它们不会保存在任何地方。

您在这里面临的是浏览器的表单自动完成功能。在这种情况下，浏览器会保存用户的数据，然后您可以从浏览器中删除该数据，方法是转到浏览器的设置以及更多后台，然后选择保存的密码，然后删除您网站的密码.

否则，您无法控制阻止用户执行的操作。但是，正如谷歌所做的那样。你可以实现他们的安全理念。

他们所做的是向您显示一个密码类型的输入框，然后他们编写与该帐户关联的电子邮件地址。这样，您将欺骗浏览器，而浏览器会认为您需要其他东西而不是他的密码。

您还可以做一些其他的事情。例如，在一个页面上获取用户的电子邮件地址，然后在下一页上获取密码——就像 Google 现在所做的那样。

Answer 2

如果问题只是在文本框中自动提示密码，那么您需要禁用文本框的 AutoComplete 属性

Answer 3

使用自动完成字段，您最好尽可能多地为浏览器提供有用的指针。在你的情况下，这将是这样的：

<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>

请注意，这适用于适当的表单，而不是您所指的登录类型。此外，这些都使用 HTML 表单输入进行了测试——我假设 ASP 应该将自定义属性传输到生成的 HTML 代码中，但这可能会失败。 ASP ID 肯定会映射到 HTML 输入 name。

---

这对我来说是一个非常有趣的问题，因为自动完成似乎是其中之一，甚至还没有接近标准。

HTML5 W3 Spec

“on”关键字表示允许用户代理提供 具有自动完成值的用户，但不提供任何进一步的 关于用户可能需要什么样的数据的信息 进入。用户代理必须使用启发式方法来决定什么 要建议的自动完成值。

Google 的一个团队似乎想用 their proposal 改变这一点

当前的自动填充产品依靠上下文线索来确定 应填写到表单元素中的数据类型。示例 这些上下文线索包括输入元素的名称、文本 围绕它，以及占位符文本。

我们已经讨论了这些临时方法的缺点 几种自动填充产品的开发人员，并且都对此感兴趣 在一个可以让网站作者对其形式进行分类的解决方案中 字段本身。虽然当前的字段分类方法有效 一般来说，在许多情况下，它们是不可靠或模棱两可的，因为 Web 开发人员在创建时使用的许多变体和约定 他们的形式：

这是一个nice link，其中介绍了如果实施该提案将如何运作：

<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">

更多链接：

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

Answer 4

现在通过最后交换文本框来解决。

Answer 5

我们处理这个问题的方法是在每次页面加载时在文本框的 id 和 name 属性上附加一个随机值。然后浏览器无法调用自动完成，因为它是为具有不同标识符的字段存储的。

为此使用 ClientIDMode="Static"，这样 .net 就不会为您生成 Id。

Answer 6

我不确定我是否理解您的问题。但是有几个提示：

您可以使用自动完成功能告诉 Chrome 不要记住密码：http://www.w3schools.com/tags/att_input_autocomplete.asp

您可以使用 tabindex 更改文本框的 tab 顺序：http://www.w3schools.com/tags/att_global_tabindex.asp

Answer 7

如果您唯一的问题是您可以自动填充密码，您可以通过执行以下操作通过代码隐藏禁用此功能：

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

Answer 8

用于域/公司：

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

或来自 CodeBehind：

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

它将禁用文本框公司的自动完成功能。

如果它不能解决问题，另一种方法是使用一些验证，例如：

1. 输入域/公司时，检查是否提供了用户名。

2. 如果未提供用户名且存在密码，则给出错误消息以先填写用户名并故意清空公司和密码的文本框。

jquery 中的一些代码如下：

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

我知道这不是一个好的解决方案并且还有可用性问题。但如果其他方法不起作用，这可能是最后的手段。

希望对你有帮助。

Answer 9

浏览器自动将凭据填充到错误的文本字段？

有时我会在 Chrome 和 Safari 上注意到这种奇怪的行为，当密码字段以相同的形式出现时。我猜，浏览器会寻找密码字段来插入您保存的凭据。然后它自动填充（只是根据观察猜测）最近的文本输入字段，该字段出现在 DOM 中的密码字段之前。由于浏览器是最后一个实例，您无法控制它，有时即使 autocomplete=off 也不会阻止填写凭据。这个只读修复对我有用。

当您将订单交换为“用户...密码...公司”时，它可以工作。浏览器将再次使用密码之前的字段（现在是用户）来填写凭据。

修复浏览器自动填充： 设置只读并在焦点上设置可写（点击和标签）

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

Answer 10

手动管理 cookie， 这是 jQuery 示例。

     $("#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);

    }
    });

要获取 cookie 并将其分配回控件，请使用以下

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);
    }