WEB安全防御总结三 ： 防止浏览器记住用户名和密码

漏洞简介：

在公共电脑上面，攻击者可以通过记住密码功能，免输入密码来实现登录用户的账号的目的，从而窃取用户的信息。

修复建议：

显式设置输入框的属性autocomplete="off"

处理方式：

1. 设置输入框的属性autocomplete="off"；

2. 对应浏览器 浏览器只会记住第一个用户名input的值和最后一个密码input 的值，并且这些input不能用display：none  的自动加载用户名、密码的模式，在真实使用的用户名输入框与密码输入框前后增加一些混淆浏览器的输入框，使之不能正确的加载用户名、密码。

注：这样处理后，360安全浏览器会提示是否记住密码，并且，最重要的是，是输入密码的时候，还会提示是否使用以下项的密码。而单数的input时，360安全浏览器不会再弹出是否记住密码的提示。所以控制 Input 的数量为单数！

3. 大部分浏览器都是根据表单域的type="password"来判断密码域的，所以先设置 Input的type为text，然后延迟0.2秒后将其变成密码域。

 

<style type="text/css">
	.hiddenInput{width:0px;height:0px;padding:0px;margin:0px;opacity:0;border:none;position:absolute;z-index: -2;}
</style>

<form class="form" id="dlk" onsubmit="return false;">
	<input type="text" value="admin" name="first" class="hiddenInput" disabled autocomplete = "off"/><!-- 这个username会被浏览器记住，我随便用个admin-->
	<input type="password" value=" " name="cecond" class="hiddenInput" disabled autocomplete = "off"/><!-- 这前面两个name属性要不要和真正的一样，具体自己调试下 -->

	<input type="text" class="input username" placeholder="请输入用户名"   autocomplete="off"/>
	<input id="pwd" type="text" class="input password" placeholder="请输入密码" autocomplete="off" />
	<input value="登录" type="submit" class="abtn_login">

	<input type="password" value=" " name="third" class="hiddenInput" disabled autocomplete = "off"/></p>
	<input type="password" value=" " name="fourth" class="hiddenInput" disabled autocomplete = "off"/></p><!-- 这个password的值会被浏览器记住，我随便用个空格 -->
</form>

<script>
	window.onload= function () {
	   setTimeout(function(){
　　　　　　var pwd = document.getElementById('pwd');
			pwd.type = "password";
			pwd.value = "";
		},200);
	}
</script>

一. Html代码处理部分，参考 web安全：防止浏览器记住或自动填写用户名和密码(表单)的终极解决方案：

测试的浏览器：
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，完美。

二. JS部分，参考WEB安全实战（六）防止浏览器记住用户名和密码：

Ⅰ、 针对浏览器记住密码

首先大部分浏览器都是根据表单域的type="password"来判断密码域的，所以针对这种情况可以采取“动态设置密码域”的方法。

注：默认把文本框type设为text，延迟0.2秒后将其变成密码域。这样浏览器就不会记住密码，当然为了更加完善，还可以把autocomplete="off"属性也加上。

Ⅱ、在 onload 事件，把密码框的值清空。

代码如下：

<script>
	window.onload= function () {
	   setTimeout(function(){
　　　　　　var pwd = document.getElementById('pwd');
			pwd.type = "password";
			pwd.value = "";
		},200);
	}
</script>

参考：

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

2. WEB安全实战（六）防止浏览器记住用户名和密码