Chrome 浏览器有个自动填充密码的功能。通常在录完一个密码表单点击提交的时候,浏览器顶部会出现一个提示,上面有两个按钮,“保存密码”和“此站点一律不保存密码”,当然也可选择最右边的“X”关掉。很多喜欢偷懒的用户可能就会点击“保存密码”,于是每次访问改网站的时候都会自动填充用户名和密码。

安全缺陷

记住密码功能带来了安全隐患,除非你能保证自己的电脑具有绝对的隐私。否则别人打开你的浏览器就能就能登陆进去保存密码的网站。更进一步,若网站被 xss 攻击者利用,可以轻松的获取到你的明文密码信息,攻击者只要构造一个包含用户名和密码的表单插入到 DOM,,延时等待浏览器的自动填充,然后就可以获取密码值了。即使不被 xss 攻击,也可能被他人打开你的浏览器直接获取到明文密码。

禁止表单被自动填充

  1. 更改浏览器设置。这是最有效的办法,但用户有选择的自由。作为个人用户可以考虑禁用这个选项,但作为网站还是得寻求更保险的方式。
  2. 给表单设置 autocomplete="off" 。实践证明 autocomplete 这个属性可以关掉输入框获得焦点时的下拉选项,但不能禁用表单被自动填充。在 chrome 开发工具中可以看到,当 input 被自动填充后,会有一个 input:-webkit-autofill 的样式,但这个样式不可更改(在去除 Chrome 下 autocomplete 输入框的黄色背景一文有说明)。而且也没有提供一个 autofill 的 DOM 接口来改变这个行为。
  3. 有效的办法,用 Javascript 动态设置 password 的 type,来绕过浏览器的自动填充。经过实践,下面代码被证明有效果:
$('input[type="password"]').attr('type', 'text').addClass('password-fix');
setTimeout(function(){
    $('input.password-fix').attr('type', 'password').removeClass('password-fix');
}, 500);

原理是:动态将 input[type="password"] 的 type 改为 text,然后延时 500mm,将 type 改回 password。这个过程中添加了 "password-fix" 这个 class 只是为了标记元素,便于后面寻找。