2020-01-07 | UNLOCK | 更新时间:2020-1-8 11:58

记住密码和自动化填充

遇到的问题

当我在登录的时候,出现了记住密码的选择。于是当然我选择的记住密码,但是在下次登录的时候:为是什么我记住了密码,下次进去还是需要自己手动填写?为什么点击用户名需要手动填写,密码栏却拥有记住密码的下拉栏?为什么我关闭了自动填写,在有的浏览器却不起效果?怀着疑问,那么就得解决。

记住密码和自动填充

当浏览器检测到提交的表单这种有 type=”password” 的时候,会提示是否记住用户名和密码;当你选择是的时候,它会把type=”paassword”的 input的value值和前一个离它最近的input的value值分别记为密码和用户名并记录在浏览器上;当你在下次打开这个域名就会自动填写你保存的用户名密码;因为这些功能(自动完成或自动填充)可能涉及用户的隐私,因此浏览器可以让用户禁用它。当然,网站(提供商)可能也不是那么喜欢浏览器的这个功能;当然各种不合理的设置会导致出现自动填写的bug;可能会出现下面这几种情况:

  • 不出现是否记住密码的选择框;每次进入都要手动填写;
  • 出现是否记住密码的选择框;下次进入还是需要手动填写;
  • 记住密码后,点击用户栏或密码栏都会出现记住的用户密码;
  • 记住密码后,点击用户栏不出现记住的用户密码;点击密码栏出现;
  • ……

禁止浏览器的自动填充

要禁用的表单自动填充,网页可以将 autocomplete 的属性设置为 “off”:但是在有的浏览器对autocomplete的设置规则不一样; 那么可以将 “off” 设置成其他字符串;如 “nope” 或者其他字符串; 当这个随机的值不是 可用值的时候,浏览器就会放弃自动填充;

// 表单禁用,可以单独设置在input元素也可以设置在form表单

<form method="post" action="/form">
  ...
  <input type="text" id="cc" name="cc" autocomplete="off">
</form>

由于现代浏览器会让用户在浏览器设置一个Master Password(此处可以理解为主密码、解锁密码);即使没有主密码,浏览器的密码管理起通常也被视为是安全的;所以许多现代浏览器都不支持在登录模块中设置 autocomplete=”off”;譬如谷歌浏览器,即便你设置了 autocomplete=”off” ,在某种情况下,它还是会“贴心”的帮你把账号密码填入里面;这种行为存在与Firefox(38+)、Google Chrome(34+)、Internet Explorer(11+)上;

如果想要阻止在用户管理页面中填写密码字段,用户可以为自己以外的人指定新的密码,虽然所有的浏览器都还不支持,但是 autocomplete = “new-password”应该被指定
这属于变向的阻止了浏览器的自动填写功能

修改自动填写的默认样式

无论浏览器的元素默认样式设置的再怎么绚丽,我们都希望有足够的自由(修改所有的一切);更何况自动填写那一块黄色的背景和我们设置的风格完全无法融合;

/* 这是谷歌浏览器的样式更改 */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* 通过盒子内阴影将背景颜色遮盖;将背景颜色的过渡时间设长 */

参考链接: