Javascript 防止浏览器记住凭据（密码）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31439047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Prevent browser from remembering credentials (Password)
提问by Danny22
Is it possible after processing any login Form to prevent the browser from offering the option to remember the password?
是否可以在处理任何登录表单后阻止浏览器提供记住密码的选项？
I know it's been asked and answered here but none of the answers have worked so far, even one of them suggested using:
我知道这里有人问过并回答过，但到目前为止没有一个答案有效，甚至其中一个建议使用：
autocomplete="off"
But that also didn't worked.
但这也没有奏效。
I'm using AngularJS and Jade as templating engine (not sure if relevant or not anyhow), is there any way to do this?
我正在使用 AngularJS 和 Jade 作为模板引擎（不确定是否相关），有什么办法可以做到这一点？
采纳答案by Preston Van Loon
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"，并且表单包含用户名和密码输入字段，则浏览器仍会提供记住此登录信息，如果用户同意，浏览器将在下次访问时自动填充这些字段用户访问此页面。
You should also set autocomplete="off"on your input as well as your form.
您还应该设置autocomplete="off"您的输入以及您的表单。
Google Chrome release notes:
谷歌浏览器发行说明：
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.
用于自动完成请求的 Google Chrome UI 会有所不同，具体取决于输入元素及其表单上的自动完成是否设置为关闭。具体来说，当表单将自动完成设置为关闭且其输入元素的自动完成字段未设置时，如果用户要求输入元素的自动填充建议，Chrome 可能会显示一条消息，指出“此表单的自动完成已被禁用”。另一方面，如果表单和输入元素都将自动完成设置为关闭，浏览器将不会显示该消息。因此，您应该为每个具有自定义自动完成功能的输入设置自动完成功能。
回答by UncaAlby
I would suggest using Javascript to create a random number. Pass that random number to your Server Action using a hidden field, then incorporate that random number into the names of the "login" and "password" fields.
我建议使用 Javascript 创建一个随机数。使用隐藏字段将该随机数传递给您的服务器操作，然后将该随机数合并到“登录”和“密码”字段的名称中。
E.g. (psuedo code, the exact syntax depends on whether you use PHP, jQuery, pure Javascript, etc.)
例如（伪代码，具体的语法取决于你是否使用 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'>
Your server reads the "number" field, then uses that to read "name_"number value and "pass_"number value.
您的服务器读取“数字”字段，然后使用它来读取“name_”数字值和“pass_”数字值。
It won't matter whether or not the user saves their password in the browser, since every time the user logs in, the name and password fields will be different.
用户是否将密码保存在浏览器中并不重要，因为每次用户登录时，名称和密码字段都会不同。
回答by MinnesotaSlim
This is a super annoying problem for me as a developer. The problem I have is that while I understand the 'annoyance' to a user in not being able to have their browser remember their password and I don't want to 'disable' that feature completely, there are times when I want to disable it for just a certain password field. Example for me being a 'reset your password' dialogue box. I want to force them to have to re-enter their old password and then of course type the new one twice. Well it's been my experience that no matter what I name that 'old' password input, it is auto-filled with the 'remembered' password (in Firefox 49.0.1 anyway). Maybe this is where I'm getting this wrong, but this has been my experience, it just fills it no matter the fact that this input's name is different from say the 'login' input field. The behavior I see is basically that the browser seems to say "This user has remembered a password for this site, so now just fill every "input type='password'" box with that password no matter the name. It seems to me that this should be based on the 'name' attribute, but for me (on multiple sites I've worked on) this just does not seem to be the case.
作为开发人员，这对我来说是一个非常烦人的问题。我遇到的问题是，虽然我理解用户无法让浏览器记住密码的“烦恼”，而且我不想完全“禁用”该功能，但有时我想禁用它仅针对某个密码字段。我的示例是“重置密码”对话框。我想强迫他们重新输入旧密码，然后当然输入两次新密码。好吧，根据我的经验，无论我输入什么“旧”密码，它都会自动填充“记住”密码（无论如何在 Firefox 49.0.1 中）。也许这是我弄错的地方，但这是我的经验，不管这个输入是什么，它都会填满它' s 名称不同于“登录”输入字段。我看到的行为基本上是浏览器似乎在说“这个用户已经记住了这个网站的密码，所以现在只需用那个密码填写每个“输入类型=密码”框，不管名称如何。在我看来这应该基于“名称”属性，但对我来说（在我工作过的多个站点上），情况似乎并非如此。
My solution:
我的解决方案：
- Color this password field to the same color as the background of your input so the 'password dots' are essentially invisible on page load.
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);
- 将此密码字段的颜色与您输入的背景颜色相同，以便“密码点”在页面加载时基本上不可见。
onload、onblur、超时后，或者不管你想怎么做，使用 JQuery 或 JS 将该密码字段的值设置为空（空白），然后将该字段的颜色设置为它应该是的任何颜色。
$("#old_password").val('').css('color','black);
回答by madgangmixers
Since you're using AngularJS, you can leave the field unnamed, and access the data it contains through the model :
由于您使用的是 AngularJS，您可以不命名该字段，并通过模型访问它包含的数据：
Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />
and in your javascript file :
并在您的 javascript 文件中：
$scope.doLogin = function() {
var dataObj = {
login: $scope.login,
password: $scope.password
};
var res = $http.post('/login', dataObj);
}
Tested in IE10 and Chrome 54
在 IE10 和 Chrome 54 中测试
回答by Olivier Levrey
This post is little bit old now, but sincce I found a solution that works for me (at least with Chrome version 56), I'll share it here.
这篇文章现在有点旧了，但是因为我找到了一个适合我的解决方案（至少对于 Chrome 56 版），我会在这里分享。
If you remove nameand passwordattributes on your input, then Chrome won't ask to save the password. Then you just have to add the missing attributes by code just before submitting the form:
如果您删除name和 上的password属性input，则 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)">
Then in Javascript:
然后在 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();
}
I hope this will help. Tested on Chrome 56 only.
我希望这将有所帮助。仅在 Chrome 56 上测试。
回答by David
I've discovered that Firefox 52.0.2 is incredibly determined to remember the autocompletion values. I tried almost everything suggested above, including changing the name attributes to random values. The only thing that is working for me is setting the values to "" with Javascript after the browser has had its way with the form.
我发现 Firefox 52.0.2 非常确定要记住自动完成值。我几乎尝试了上面建议的所有内容，包括将名称属性更改为随机值。唯一对我有用的是在浏览器处理表单后使用 Javascript 将值设置为“”。
My use case is lucky in that I do not have to resort to CSS tricks to prevent a confusing and/or annoying flash of autocompleted form values (as proposed by @MinnesotaSlim above) because my form is hidden until they click a button; then it's displayed via a Bootstrap modal. Hence (with jQuery),
我的用例很幸运，因为我不必求助于 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("");
})
And I imagine you might be able to get the same effect by having your form initially hidden, and in your document load event, manually override the browser and then display the form.
我想您可以通过最初隐藏表单并在文档加载事件中手动覆盖浏览器然后显示表单来获得相同的效果。
回答by SalgoMato
For me, the only solution that reliably worked was to empty username and password input element just before submitting form combined with replacing submit button for the regular button with onclick handler. NOTE: We use Microsoft MVC so we needed to populate ViewModel with entered credentials. Therefore we created hidden input elements bound to model and copied credential values to them before emptying visible inputs.
对我来说，唯一可靠的解决方案是在提交表单之前清空用户名和密码输入元素，并用 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!");
}
