web安全:防止浏览器记住或自动填写用户名和密码(表单)的终极解决方案 | 您所在的位置:网站首页 › input取消默认记住 › 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。
代码如下: (最简洁) 或
测试的浏览器: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,完美。
结论: PS:z-index的值和autocomplete的值根据实际情况来调整。 对于具体的情况,每个人会有不同的表单,可能会出现布局啊什么的不完美,可以根据添加一组或多组display:none 的用户名密码input和在input的外层加个 来调整显示!
如果是表单,一样的道理,这里不多说了。(注意要在表单里面加input)
如果不是登录页面,而是其他的页面,如修改密码的页面,可以用小招:在旧密码input前面加个隐藏的密码input 如果其他的页面,不只有密码,还有用户名input,那么与修改密码页面一样,在前面加多个用户名密码input组合即可 或者(推荐) 又或者(推荐) 这里临时的text和password要和真实的text、password的name或id值要一样!!!如:临时text的id值和真实的text的name值一样,或临时text的name值和真实的name值一样等等!!!
最后小tip: 每次登陆时(按回车或者点击登录),都将真正的用户名密码input置空比较好,处于安全考虑 |
CopyRight 2018-2019 实验室设备网 版权所有 |