如何避免填充猫鼬返回密码 - Javascript

填充猫鼬攻击（form-field-masking attack）是一种通过 JavaScript 代码探测浏览器自动填充表单的方式来窃取用户密码的攻击方式。建议开发者遵循以下最佳实践来避免此类攻击。

1. 禁用自动填充

禁用浏览器自动填充表单功能可以有效避免填充猫鼬攻击。

<input type="text" name="username" autocomplete="off">
<input type="password" name="password" autocomplete="off">

在表单元素属性中设置 autocomplete="off" 即可禁用自动填充功能。需要注意的是，不是所有的浏览器都支持该属性。

2. 隐藏真实输入框

将真实输入框隐藏，只显示一个虚拟的输入框可以很好地防范填充猫鼬攻击。

<input type="password" name="password" style="display:none;">
<input type="text" name="password_fake" onfocus="this.style.display='none';document.getElementsByName('password')[0].style.display='block';document.getElementsByName('password')[0].focus();" autocomplete="off">

上面的代码将真实输入框隐藏，并显示一个虚拟的输入框。当用户点击虚拟输入框后，真实输入框显示出来，并自动获得焦点。

3. 改变输入框类型

手动将输入框的 type 改为非文本类型，可以有效避免填充猫鼬攻击。

<input type="text" name="password" onfocus="this.type='password';" autocomplete="off">

上面的代码将初始的 type 属性设置为文本类型，当输入框获得焦点后，type 属性被改为密码类型。

总结

以上三种方式都可以很好地避免填充猫鼬攻击。建议开发者在实现无论哪一种方式时都加上一定的提示信息，增强用户体验，比如在虚拟输入框旁边加上 "请输入密码" 的提示语。