防止浏览器记住凭据（密码）

Question

在处理任何登录表单后，是否有可能防止浏览器提供记住密码的选项？

我知道这个问题已经在这里被问答过，但是迄今为止没有一个答案起作用，甚至其中一个建议使用：

autocomplete="off"

但是那也没有起作用。

我正在使用AngularJS和Jade作为模板引擎（不确定是否相关），有没有什么方法可以做到这一点？

- DJG22

---

目前无法修改控制器范围或后端服务，实际上它们的名称不是 password 或 email，而是 pss 和 usrnme。 - DJG22

你为什么需要这个功能？如果只是为了确保输入为空，你可以在控制器中手动清除它们。虽然这种行为会让用户感到困惑，所以并不推荐。 - sdgluck

检查以下内容：https://dev59.com/pXVD5IYBdhLWcg3wRpeX https://dev59.com/qHRB5IYBdhLWcg3w6bYE - Amr Elgarhy

可能很难提供高度强健、跨浏览器、未来性的解决方案以应对不断变化的浏览器行为。如果你非常想完成这个任务，你可能需要采用创建一个自定义的 UI 元素的方式，该元素在用户看来看起来像是密码框，但在浏览器中不会被识别为密码框。由于你正在使用 Angular，你可能可以使用 $formatters 等从 ngModelController 创建自定义指令以实现字符掩码。是的，听起来像是一种丑陋的 hack，但我想不出一个真正好的解决方案，我也不敢相信。 - DLH

Answer 1

如果一个网站在表单中设置了autocomplete="off"，并且该表单包含用户名和密码输入字段，则浏览器仍然会提供记住此登录信息的选项，如果用户同意，则浏览器将在下一次访问此页面时自动填充这些字段。您还应该在输入框以及表单上设置autocomplete="off"。Google Chrome的发布说明：自动完成请求的Google Chrome UI因输入元素以及它们的表单是否设置为off而有所不同。具体来说，当表单的autocomplete被设置为off并且其输入元素的autocomplete字段未设置时，如果用户请求输入元素的自动填充建议，则Chrome可能会显示一条消息，指出“对于此表单已禁用自动完成”。另一方面，如果表单和输入元素都设置为autocomplete="off"，则浏览器将不会显示该消息。因此，对于每个具有自定义自动完成的输入，请将autocomplete设置为off。来源：https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion。

- Preston Van Loon

---

如果作者想要防止在用户管理页面中自动填充密码字段，以便用户为其他人指定新密码，那么应该指定 autocomplete="new-password"。尽管并非所有浏览器都支持此功能，但这样做可以使内容更加易懂。您花了一些时间才意识到为什么它不起作用。 - user2341406

Answer 2

我建议使用Javascript创建一个随机数。将该随机数通过隐藏字段传递给您的服务器操作，然后将该随机数合并到“登录”和“密码”字段的名称中。

例如（伪代码，确切的语法取决于您是否使用PHP、jQuery、纯Javascript等）：

<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_word" type='password'>

您的服务器读取“number”字段，然后使用该字段读取“name_”number值和“pass_”number值。

无论用户是否在浏览器中保存密码，每次用户登录时，名称和密码字段都将不同。

- UncaAlby

---

随着大多数现代浏览器忽略密码输入框的自动填充值，这个想法听起来是可行的。 - JWilliams

Answer 3

我遇到的问题是，虽然我理解用户无法让浏览器记住密码的“烦恼”，但我不想完全“禁用”该功能，有时我只想禁用某些特定密码字段。例如，对我来说，“重置密码”对话框。

我想强制用户重新输入旧密码，然后当然要输入新密码两次。

根据我的经验，无论我如何命名“旧”密码输入，它都会自动填充“已记住”的密码（在Firefox 49.0.1中）。也许这就是我搞错的地方，但它只是填充，而不管该输入的名称是否与登录输入字段相同。

我看到的行为基本上是浏览器似乎在说“该用户已经为此站点记住了密码，因此现在只需用该密码填充每个type ='password'的输入框，而不管名称如何。对我来说，这应该基于name属性，但对我来说（在我工作过的多个站点上），情况似乎并非如此。

我的解决方案：

1. Color this password field to the same color as the background of your input so the 'password dots' is essentially invisible on page load.

2. onload, onblur, after a timeout, or however you want to do it, use JQuery or JS to set the value of that password field to nothing (blank), then set the color of the field to whatever it is supposed to be.

   $("#old_password").val('').css('color','black);
   

- MinnesotaSlim

Answer 4

由于您正在使用AngularJS，您可以将字段留空，并通过模型访问它包含的数据：

Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />

在你的 JavaScript 文件中：

$scope.doLogin = function() {
    var dataObj = {
        login: $scope.login,
        password: $scope.password
    };
    var res = $http.post('/login', dataObj);
}

在IE10和Chrome 54中测试过

- madgangmixers

Answer 5

这篇文章有点过时了，但是我找到了一个对我有效的解决方案（至少在Chrome 56版本中），我将在这里分享。

如果您在上删除name和password属性，则Chrome不会要求保存密码。然后，在提交表单之前，您只需要通过代码添加缺少的属性即可。

<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">

然后在Javascript中：

function login(submitButton) {
    var form = submitButton.form;
    // fill input names by code before submitting
    var inputs = $(form).find('input');
    $(inputs[0]).attr('name', 'userName');
    $(inputs[1]).attr('name', 'password');
    form.submit();
}

希望这能有所帮助。仅在Chrome 56上进行了测试。

- Olivier Levrey

Answer 6

我发现Firefox 52.0.2非常坚定地记住自动完成值。我尝试了几乎所有上面建议的方法，包括将名称属性更改为随机值。唯一对我有用的是在浏览器处理表单后使用Javascript将值设置为“”。

我的用例很幸运，因为我不必采取CSS技巧来防止自动完成表单值的混乱和/或恼人的闪烁（如@MinnesotaSlim所提出的），因为我的表单在隐藏状态下，直到他们点击按钮；然后通过Bootstrap模态框显示。因此（使用jQuery），

$('#my-button').on("click",function(){        
   $('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
    $('#form-login input').val("");
})

我想你可以通过最初隐藏表单，在文档加载事件中手动覆盖浏览器并显示表单来获得相同的效果。

- David

Answer 7

对我而言，唯一可靠的解决方案是在提交表单之前清空用户名和密码输入框，并将提交按钮替换为带有onclick处理程序的常规按钮。注意：我们使用Microsoft MVC，因此我们需要用输入的凭证填充ViewModel。因此，在清空可见输入框之前，我们创建了绑定到模型的隐藏输入元素并将凭证值复制到它们中。

<form>
<input id="UserName" name="UserName" type="hidden" value="">
<input id="Password" name="Password" type="hidden" value="">
</form>

<input id="boxUsr" name="boxUsr" type="text" value="" autocomplete="off">
<input id="boxPsw" name="boxPsw" type="password" autocomplete="off">
<input type="submit" value="Login" onclick="javascript:submitformforlogin()">

   function submitformforlogin() {
        $("[name='boxPsw'],[name='boxUsr']").attr('readonly','true');
        var psw = document.getElementsByName('boxPsw')[0];
        var usr = document.getElementsByName('boxUsr')[0];
        if (psw.value != "false") {
            $('#Password').val(psw.value);
            $('#UserName').val(usr.value);
            psw.value = "";
            usr.value = "";
            $("form").submit();
        } else
            window.alert("Error!");
    }

- SalgoMato