防止浏览器记住凭据(密码)
Prevent browser from remembering credentials (Password)
是否可以在处理任何登录表单后阻止浏览器提供记住密码的选项?
我知道有人在这里提出并回答了这个问题,但 none 的答案到目前为止都有效,甚至其中一个建议使用:
autocomplete="off"
但这也没有用。
我正在使用 AngularJS 和 Jade 作为模板引擎(不确定是否相关),有什么办法可以做到这一点吗?
if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
您还应该在输入和表单中设置 autocomplete="off"
。
Google Chrome 发行说明:
The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.
我建议使用 Javascript 创建一个随机数。使用隐藏字段将该随机数传递给您的服务器操作,然后将该随机数合并到 "login" 和 "password" 字段的名称中。
例如(伪代码,具体语法取决于你是否使用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_" 数字值和 "pass_" 数字值。
用户是否在浏览器中保存密码并不重要,因为每次用户登录时,名称和密码字段都会不同。
我遇到的问题是,虽然我理解 'annoyance' 用户无法让他们的浏览器记住他们的密码,但我不想完全 'disable' 该功能,有时我只想为某个密码字段禁用它。以我为例 'reset your password' 对话框。
我想强迫他们重新输入旧密码,然后再输入两次新密码。
根据我的经验,无论我如何命名 'old' 密码输入,它都会自动填充 'remembered' 密码(无论如何在 Firefox 49.0.1 中)。也许这就是我弄错的地方,但不管这个输入的名称与 login
输入字段的名称不同,它都会填满它。
我看到的行为基本上是浏览器似乎在说“该用户记住了该站点的密码,所以现在无论名称如何,只需在每个 input type='password'
框中填写该密码即可。似乎我认为这应该基于 name
属性,但对我来说(在我工作过的多个网站上)这似乎并非如此。
我的解决方案:
将此密码字段着色为与输入背景相同的颜色,这样 'password dots' 在页面加载时基本上不可见。
onload
、onblur
,超时后,或者你想怎么做,使用JQuery或JS设置该密码字段的值什么都没有(空白),然后将字段的颜色设置为它应该是的任何颜色。
$("#old_password").val('').css('color','black);
由于您使用的是 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
中测试
这个 post 现在有点旧了,但是自从我找到适合我的解决方案(至少 Chrome 版本 56),我将在这里分享它。
如果您删除 input
上的 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 上测试。
我发现 Firefox 52.0.2 非常坚定地记住了自动完成值。我几乎尝试了上面建议的所有方法,包括将名称属性更改为随机值。唯一对我有用的是在浏览器处理完表单后使用 Javascript 将值设置为“”。
我的用例很幸运,因为我不必求助于 CSS 技巧来防止令人困惑的 and/or 烦人的自动完成表单值闪现(如上文@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("");
})
我想您可以通过最初隐藏表单并在文档加载事件中手动覆盖浏览器然后显示表单来获得相同的效果。
对我来说,唯一可靠的解决方案是在提交表单之前清空用户名和密码输入元素,并用 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!");
}
是否可以在处理任何登录表单后阻止浏览器提供记住密码的选项?
我知道有人在这里提出并回答了这个问题,但 none 的答案到目前为止都有效,甚至其中一个建议使用:
autocomplete="off"
但这也没有用。
我正在使用 AngularJS 和 Jade 作为模板引擎(不确定是否相关),有什么办法可以做到这一点吗?
if a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
您还应该在输入和表单中设置 autocomplete="off"
。
Google Chrome 发行说明:
The Google Chrome UI for auto-complete request varies, depending on whether autocomplete is set to off on input elements as well as their form. Specifically, when a form has autocomplete set to off and its input element's autocomplete field is not set, then if the user asks for autofill suggestions for the input element, Chrome might display a message saying "autocomplete has been disabled for this form." On the other hand, if both the form and the input element have autocomplete set to off, the browser will not display that message. For this reason, you should set autocomplete to off for each input that has custom auto-completion.
我建议使用 Javascript 创建一个随机数。使用隐藏字段将该随机数传递给您的服务器操作,然后将该随机数合并到 "login" 和 "password" 字段的名称中。
例如(伪代码,具体语法取决于你是否使用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_" 数字值和 "pass_" 数字值。
用户是否在浏览器中保存密码并不重要,因为每次用户登录时,名称和密码字段都会不同。
我遇到的问题是,虽然我理解 'annoyance' 用户无法让他们的浏览器记住他们的密码,但我不想完全 'disable' 该功能,有时我只想为某个密码字段禁用它。以我为例 'reset your password' 对话框。
我想强迫他们重新输入旧密码,然后再输入两次新密码。
根据我的经验,无论我如何命名 'old' 密码输入,它都会自动填充 'remembered' 密码(无论如何在 Firefox 49.0.1 中)。也许这就是我弄错的地方,但不管这个输入的名称与 login
输入字段的名称不同,它都会填满它。
我看到的行为基本上是浏览器似乎在说“该用户记住了该站点的密码,所以现在无论名称如何,只需在每个 input type='password'
框中填写该密码即可。似乎我认为这应该基于 name
属性,但对我来说(在我工作过的多个网站上)这似乎并非如此。
我的解决方案:
将此密码字段着色为与输入背景相同的颜色,这样 'password dots' 在页面加载时基本上不可见。
onload
、onblur
,超时后,或者你想怎么做,使用JQuery或JS设置该密码字段的值什么都没有(空白),然后将字段的颜色设置为它应该是的任何颜色。$("#old_password").val('').css('color','black);
由于您使用的是 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
中测试这个 post 现在有点旧了,但是自从我找到适合我的解决方案(至少 Chrome 版本 56),我将在这里分享它。
如果您删除 input
上的 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 上测试。
我发现 Firefox 52.0.2 非常坚定地记住了自动完成值。我几乎尝试了上面建议的所有方法,包括将名称属性更改为随机值。唯一对我有用的是在浏览器处理完表单后使用 Javascript 将值设置为“”。
我的用例很幸运,因为我不必求助于 CSS 技巧来防止令人困惑的 and/or 烦人的自动完成表单值闪现(如上文@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("");
})
我想您可以通过最初隐藏表单并在文档加载事件中手动覆盖浏览器然后显示表单来获得相同的效果。
对我来说,唯一可靠的解决方案是在提交表单之前清空用户名和密码输入元素,并用 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!");
}