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

Posted 2023-03-05

技术标签:

【中文标题】如何设置正确的用户名和密码文本框？【英文标题】：How to set the correct username and password textboxes? 【发布时间】：2014-04-27 13:20:37 【问题描述】：

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

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

例如用户：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>

【问题讨论】：

您是否尝试简单地禁用该文本框，直到（用户名和公司）都具有值？作为替代方案，您可以处理密码文本框中的更改并拒绝它们（preventDefault on keypress），直到其他人被填写。不，但我肯定需要在前两个之后进行回发吗？不，使用 javascript 的客户端。但是想必浏览器正在使用JS将密码添加到框中，我该如何阻止呢？不，浏览器没有为此使用 JS。如果您禁用并只读一个输入，那么浏览器将不会填充它。只需为用户名和密码输入的按键添加客户端事件处理程序。 【参考方案1】：

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

是这样的

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

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

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

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

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

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

【讨论】：

显然，Payza 网站因非法转账而关闭。【参考方案2】：

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

【讨论】：

【参考方案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

【讨论】：

我尝试像您的第一个示例一样添加自动完成类型，因为它们是 asp 控件并且仍然没有变化。我还在上面添加了一张图片来显示问题。我无法让它在 chrome 中运行，有现场示例或演示页面吗？【参考方案4】：

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

【讨论】：

swapping the textboxes around in the end 是什么意思可以通过显示代码来解释一下吗？【参考方案5】：

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

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

【讨论】：

【参考方案6】：

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

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

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

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案8】：

用于域/公司：

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

或来自 CodeBehind：

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

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

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

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

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

jquery 中的一些代码如下：

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

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

希望对你有帮助。

【讨论】：

【参考方案9】：

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

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

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

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

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

【讨论】：

【参考方案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);

【讨论】：

永远不要在 cookie 中存储密码！如果您愿意，最好间接分享您的密码。如上所述，切勿将敏感信息存储在 cookie 中。非常糟糕的主意。像上面这样的 Cookie 会以纯文本形式存储数据 -1 SSL 不能防止 cookie 被盗！！

以上是关于如何设置正确的用户名和密码文本框？的主要内容，如果未能解决你的问题，请参考以下文章

怎样在ASP。NET里做到当鼠标放在文本框时立刻激发事件查询数据库

如何添加带文本编辑器的html文本框