web安全：防止浏览器记住或自动填写用户名和密码(表单)的终极解决方案

最近项目上要求做到这一点，在网上搜了一圈，发现都是不完美的，不兼容全部的浏览器，于是只能自己摸索了，最终得出了终极解决方案：

涉及：

disabled 或 readonly 

display:none;   隐藏用，隐藏后不占位置

visibility:hidden;   隐藏用，隐藏后占原来的位置

position:absolute;z-index:-1;   隐藏用，隐藏与否取决于z-index相对的值，这里的-1是我自己用的

autocomplete:"off";  

网上说，这个属性有时失效，有个解决办法是将off改为new-password。

还有个说法(来自MDN)，之所以new-password能够解决off失效的原因是autocomplete属性的有效值只有on和off，默认值是on，

如果autocomplete的属性是除on和off外的值，那么就是个无效值，那么浏览器就会放弃对该属性的执行。

换句话说，除on和off外的任一值，可以随便编都行。

在这里，我用off就够了，测试过程中没遇到失效的情况，所以暂时用off。

代码如下：

（最简洁）

<input type="text" name="name" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 这个username会被浏览器记住，我随便用个admin-->
<input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 这前面两个name属性要不要和真正的一样，具体自己调试下 -->
<p><input type="text" maxlength="20" placeholder="用户名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密码" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="验证码"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="点击更换验证码" /></p>
<p><input type="button" value="登录" id="login"/></p>
<p style="visibility: hidden;"><input type="password" name="pwd" value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 这个password的值会被浏览器记住，我随便用个空格 -->

或

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 这个username会被浏览器记住，我随便用个admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<input type="text" name="name" style="display: none;" disabled autocomplete = "off"/><!-- 这里的autocomplete可以不要 -->
<input type="password" name="pwd" style="display: none;" disabled autocomplete = "off"/><!-- 这里的autocomplete可以不要 -->
<p><input type="text" maxlength="20" placeholder="用户名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密码" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="验证码"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="点击更换验证码" /></p>
<p><input type="button" value="登录" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 这个password的值会被浏览器记住，我随便用个空格 -->

测试的浏览器：
ie浏览器（7~11，edge），360安全浏览器(全部模式)，360极速浏览器(全部模式)，谷歌浏览器，火狐浏览器，猎豹浏览器

分析以上代码的原因：

有的浏览器会自动记录登录的账号，并且会记录第一个用户名和最后一个密码input。

对360安全浏览器，单数个的话360安全浏览器不会出现提示是否要保存密码。

disabled：和360浏览器、页面第一个聚焦点有关。

改进过程：

一开始是在真正要用到的用户名密码input前面加两个对应name的隐藏用户名密码input，用于对付浏览器的自动填充表单。

但是，这个方案有个缺点：浏览器会记住登录的账号（有的浏览器会提示是否要记住），每当填写密码时（不用tab切换到，直接用鼠标获得焦点），

会提示是否使用以下密码。这样别人不仅仅能够登录，并且还可以知道密码的明文（浏览器审查元素改密码input的type为text或在浏览器设置上查看保存的用户名密码）

经过N次的测试，发现= =浏览器只会记住第一个用户名input的值和最后一个密码input 的值，并且这些input不能用display：none。

于是在上面的基础上，在前和后增加另一种隐藏方式的一组用户名密码input：用position:absolute;z-index:-1; 来隐藏

问题解决了，但是出现了一个小问题：360安全浏览器会提示是否记住密码，并且，最重要的是，是输入密码的时候，还会提示是否使用以下项的密码。

又经过N次的测试，发现，单数的input时，360安全浏览器不会再弹出是否记住密码的提示。

最后发现，把最开始加的两个display：none去掉也行，并且也是单数的input。

ok，完美。

结论：

<input type="text" value="admin" style="position: absolute;z-index: -1;" disabled autocomplete = "off"/><!-- 这个username会被浏览器记住，我随便用个admin-->
<input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/>
<p><input type="text" maxlength="20" placeholder="用户名" id="name" name="name" autocomplete = "off"/></p>
<p><input type="password" maxlength="20" placeholder="密码" id="pwd" name="pwd" autocomplete = "off"/></p>
<p><input type="text" maxlength="4" placeholder="验证码"  id="vcode" name="vcode" autocomplete = "off"/><img id="vcode" title="点击更换验证码" /></p>
<p><input type="button" value="登录" id="login"/></p>
<p style="visibility: hidden;"><input type="password"  value=" " style="position: absolute;z-index: -1;" disabled autocomplete = "off"/></p><!-- 这个password的值会被浏览器记住，我随便用个空格 -->

PS：z-index的值和autocomplete的值根据实际情况来调整。

对于具体的情况，每个人会有不同的表单，可能会出现布局啊什么的不完美，
可以根据添加一组或多组display：none 的用户名密码input和在input的外层加个<p style="visibility: hidden;"></p> 来调整显示！

如果是表单，一样的道理，这里不多说了。(注意要在表单里面加input)

如果不是登录页面，而是其他的页面，如修改密码的页面，可以用小招：在旧密码input前面加个隐藏的密码input

<input type="password" style="display: none;" disabled autocomplete = "off"/>

如果其他的页面，不只有密码，还有用户名input，那么与修改密码页面一样，在前面加多个用户名密码input组合即可

<input type="text" style="display: none;" disabled autocomplete = "off"/>
<input type="password" style="display: none;" disabled autocomplete = "off"/>

或者(推荐)

<input type="text"  name="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" name="password" style="display: none;" disabled autocomplete = "off"/>

又或者(推荐)

<input type="text"  id="username" style="display: none;" disabled autocomplete = "off"/>
<input type="password" id="password" style="display: none;" disabled autocomplete = "off"/>

这里临时的text和password要和真实的text、password的name或id值要一样！！！
如：临时text的id值和真实的text的name值一样，或临时text的name值和真实的name值一样等等！！！

最后小tip：

每次登陆时（按回车或者点击登录），都将真正的用户名密码input置空比较好，处于安全考虑