我遇到了chrome自动填充行为的几个形式的问题。
表单中的字段都有非常常见和准确的名称,例如“email”、“name”或“password”,并且它们还设置了autocomplete=“off”。
自动完成标志已经成功禁用了自动完成行为,当你开始输入时,会出现一个下拉的值,但没有改变Chrome自动填充字段的值。
这种行为是可以的,除了chrome填充输入不正确,例如填充电话输入与电子邮件地址。客户抱怨过这个问题,所以它被证实在很多情况下都发生了,而不是我在我的机器上本地操作的某种结果。
目前我能想到的唯一解决方案是动态生成自定义输入名称,然后在后端提取值,但这似乎是一种相当笨拙的解决这个问题的方法。是否有任何标签或怪癖,改变自动填充行为,可以用来解决这个问题?
对于Angular用户:
由于autocomplete= 'off'忽略新chrome版本,chrome开发人员建议autocomplete= '假|随机字符串',所以谷歌chrome/现代浏览器有2种类型的用户助手-
Autocomplete ='off'(防止上次缓存的建议)。
Autocomplete = 'false | random-string'(防止自动填充设置,因为'random-string'是不知道的浏览器)。
那么,在禁用这两个恼人的建议的情况下,该怎么办呢?
诀窍在这里:-
在每个输入字段中添加autocomplete = 'off'。
(或简单的Jquery)。
示例:$("input")。attr(“自动完成”,“关闭”);
从HTML代码中删除<form name='form-name'>标签,并在<div>容器中添加ng-form ='form-name'。
添加ng-form="form-name"也会保留所有的验证。
Boom,谷歌Chrome和其他人尝试击败这然后。
我能够得到这个实现今天2017年9月7日,但使用在我的MVC视图中生成的随机字符串的FormCollection。
我会首先在我的登录页面的索引控制器中获得一个新的随机密钥,加密并创建一个新的完全唯一的随机字符串(我实际上使用了一个256位的cypher来执行此操作,以及一个唯一的cypher和认证密钥),然后在每个字符串的末尾附加纯文本“用户名”和“密码”,以帮助我从响应视图控制器识别用户名和密码。你也可以把这个普通字符串改成任何东西,只要你知道它的模式并且它是唯一的。
在我看来,我然后适当地使用这些变量,然后在响应控制器中—通过FormCollection搜索并找到匹配的变量—然后使用该项的Key-Value作为相应的用户名和密码进行适当的处理。
The other issue i had which i think is sneaky of Chrome, is that any
Any thoughts ?
<style>
@@font-face {
font-family: 'password';
font-style: normal;
font-weight: 400;
src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
}
</style>
<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />
LogOnModel model = new LogOnModel()
{
UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username",
PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password",
};
I think it a hell of a workaround, but hey it works, and i think it could also be future proof unless google determines the URL of the page has key words in it, then appropriately just adds its stupid extensions on top on any input field - but that's a little drastic.
我遇到了“现在登录或注册”模式窗口的问题,如果用户已经将他们的凭据保存到浏览器中,这是一个问题。sign in和register字段都被填充了,所以我可以用下面的angular js指令来清除它们:
(function () {
"use strict";
var directive = function ($timeout) {
return {
restrict: "A",
link: function (scope, element, attrs) {
$timeout(function () {
element.val(" ");
$timeout(function () {
element.val("");
});
});
}
};
};
angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());
它基本上与之前使用jquery的一些答案相同,但以一种角度的方式完成。
以下是我提出的解决方案,因为谷歌坚持推翻人们似乎做出的每一个变通办法。
选项1 -选择所有文本点击
为你的用户设置输入的值为一个例子(例如your@email.com),或者字段的标签(例如Email),并在你的输入中添加一个名为focus-select的类:
<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">
下面是jQuery:
$(document).on('click', '.focus-select', function(){
$(this).select();
});
我真的看不出Chrome会搞砸数值。那太疯狂了。希望这是一个安全的解决方案。
选项2 -设置电子邮件值为一个空间,然后删除它
假设您有两个输入,例如电子邮件和密码,将电子邮件字段的值设置为“”(一个空格),并添加属性/值autocomplete=“off”,然后使用JavaScript清除此设置。您可以将密码值保留为空。
如果用户出于某种原因没有JavaScript,请确保您在服务器端修改了他们的输入(无论如何您都应该这样做),以防他们不删除空格。
下面是jQuery:
$(document).ready(function() {
setTimeout(function(){
$('[autocomplete=off]').val('');
}, 15);
});
我将超时设置为15,因为5似乎在我的测试中偶尔可以工作,所以将这个数字增加三倍似乎是一个安全的赌注。
如果没有将初始值设置为空格,Chrome会让输入框显示为黄色,就好像它已经自动填充了一样。
选项3 -隐藏输入
把这个放在表单的开头:
<!-- Avoid Chrome autofill -->
<input name="email" class="hide">
CSS:
.hide{ display:none; }
确保您保留了HTML注释,这样其他开发人员就不会删除它!还要确保隐藏输入的名称是相关的。
不同的解决方案,基于webkit。如前所述,任何时候Chrome发现一个密码字段,它自动完成电子邮件。AFAIK,这与autocomplete = [whatever]无关。
为了避免这种情况,将输入类型更改为文本,并以任何您想要的形式应用webkit安全字体。
.secure-font{
-webkit-text-security:disc;}
<input type ="text" class="secure-font">
从我所看到的,这至少是安全的输入类型=密码,它的复制和粘贴安全。然而,它是脆弱的,通过删除将删除星号的样式,当然input type = password可以很容易地在控制台中更改为input type = text,以显示任何自动填充的密码,所以它是非常相同的。