阻止浏览器记住凭据(密码)

时间:2015-07-15 19:10:45

标签: javascript angularjs passwords pug privacy

是否可以在处理任何登录表单后阻止浏览器提供记住密码的选项?

我知道在这里已经被问到并回答了,但到目前为止,没有一个答案有效,甚至其中一个建议使用:

autocomplete="off"

但那也没有奏效。

我使用AngularJS和Jade作为模板引擎(无论如何相关或不相关),有没有办法做到这一点?

7 个答案:

答案 0 :(得分:4)

  

如果网站设置了autocomplete =" off"对于表单,表单包含用户名和密码输入字段,然后浏览器仍然会提供记住此登录信息,如果用户同意,浏览器将在下次用户访问此页面时自动填充这些字段。

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

您还应该在输入和表单上设置autocomplete="off"

Google Chrome发行说明:

  

用于自动完成请求的Google Chrome用户界面会有所不同,具体取决于输入元素的自动填充功能是否设置为关闭以及表单。具体来说,当表单将自动填充设置为关闭并且未设置其输入元素的自动填充字段时,如果用户要求输入元素的自动填充建议,Chrome可能会显示一条消息,说明"自动填充已经过禁用此表单。"另一方面,如果表单和输入元素都将自动完成设置为关闭,则浏览器将不显示该消息。因此,对于每个具有自定义自动完成功能的输入,都应将自动完成设置为off。

答案 1 :(得分:3)

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

E.g。 (伪代码,确切的语法取决于你是使用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'>

您的服务器会读取&#34;号码&#34;字段,然后使用它来读取&#34;名称_&#34;数字值和&#34;传递_&#34;数字值。

用户是否在浏览器中保存密码并不重要,因为每次用户登录时,名称和密码字段都会不同。

答案 2 :(得分:1)

对于我作为开发人员来说,这是一个非常烦人的问题。我遇到的问题是,虽然我理解了烦恼&#39;对于用户无法让他们的浏览器记住他们的密码而且我不想要禁用&#39;完全有这个功能,有时我想为某个密码字段禁用它。我是一个重置密码的示例&#39;对话框。我想强制他们必须重新输入他们的旧密码,然后当然输入两次新密码。嗯,这是我的经验,无论我的名字是什么,#39; old&#39;密码输入,它会自动填充“记住的”#39;密码(无论如何都在Firefox 49.0.1中)。也许这就是我犯错误的地方,但这是我的经验,无论这个输入的名称与“登录”的名称有什么不同,它只是填补了它。输入字段。我看到的行为基本上就是浏览器似乎说&#34;这个用户已经记住了这个网站的密码,所以现在只需填写每个&#34;输入类型=&#39;密码&#39;&#34;无论名称如何,都带有该密码的框。在我看来,这应该基于&#39;名称&#39;属性,但对我来说(在我已经工作的多个网站上),这似乎并非如此。

我的解决方案:

  1. 将此密码字段的颜色设置为与输入背景颜色相同的颜色,以便使用“密码”字符串&#39;在页面加载时基本上是不可见的。
  2. onload,onblur,超时后,或者你想要这样做,使用JQuery或JS将该密码字段的值设置为空(空白),然后将字段的颜色设置为任意颜色应该是。

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

答案 3 :(得分:1)

由于您使用的是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中测试

答案 4 :(得分:1)

这篇文章现在有点旧了,但是我发现了一个适合我的解决方案(至少使用Chrome版本56),我会在这里分享。

如果您移除name上的passwordinput属性,则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上测试过。

答案 5 :(得分:0)

我发现Firefox 52.0.2非常坚定地想要记住自动完成值。我几乎尝试了上面建议的所有内容,包括将名称属性更改为随机值。唯一对我有用的是将值设置为&#34;&#34;在浏览器使用表单后使用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("");
})

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

答案 6 :(得分:0)

对我来说,唯一可靠的解决方案是在提交表单之前清空用户名和密码输入元素,并用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!");
    }