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

浏览数：21 / 时间：2015年06月09日

序

写文章之前，先向大家认个错，其实这篇文章以及下一篇将要写的文章都应该是在上个月完成的。但是吧，由于一些原因，没有来的及写完。因此，现在把上个月欠下的债先补上。废话不多说，直接上内容。

问题

做过 Web 开发的童鞋们都知道，打开网站之后，一般都是需要输入用户名、密码的。然而，就是这简单的操作，在提交的时候，就可能会暴露一些问题，当然，这些问题是会被安全漏洞测试软件检测出来的。如果没有做过相关的处理，那么表单、页面或者本地的 Cookie 中都是会留有一些敏感信息，这些敏感信息都可能会被黑客利用的。下面就简单的谈一谈如何避免这样的问题出现。

解决方案

下面列出了几个比较常用的解决方案，都有各自的优缺点，和不同的适用场景，先大概的看一下吧：

Ⅰ、针对浏览器记住密码

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

代码如下：

<span style="font-family:Comic Sans MS;"><input type="text" name="password" onfocus="this.type='password'" /> </span>

注：当这个文档框获取焦点时才将其变成密码域，这样浏览器就不会记住密码，当然为了更加完善，还可以把autocomplete="off"属性也加上。

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

代码如下：

<span style="font-family:Comic Sans MS;"><script language="javascript"> 
window.load = function(){ 
document.getElementById('密码域ID').value=''; 
}; 
</script> </span>

注：或者使用 jQuery 对应的方法。

Ⅲ、页面采用https协议，因为https是不会对表单进行保存信息的。

Ⅳ、采用flash做登录表单，这种情况浏览器也不会记录表单信息。

Ⅴ、再来个变态的好了，就是可以把 type="password" 改成 type="text"，因为 type 不是 password 就不会出现记住密码功能,然后设置一个变量如：var val="" 或者是设置一个隐藏域 <input type="hidden" name="val">，最后用 onpropertychange 把密码换成一行圆点，并把值赋给 val，提交时再把 val 的值还原回去，由于效果和 * 号一样，用户是看不出来的。

对比

那么，问题来了，如果项目已经开发结束，并且正在进行测试阶段，遇到这样的问题之后，那么你不可能再去重构代码了，而是所谓的打补丁，通过补丁来解决这个漏洞。那么，可用的方案就是 I 和 Ⅱ了，当然，如果你不怕麻烦，那么推荐使用 Ⅳ 和 Ⅴ了。

第 Ⅲ 种方案肯定是不行的，因为项目中的协议已经在开发结束的时候就确定了，如果事先留有接口的话，那就容易的多了。不过，这需要一个好的设计才能实现。

当你选择第Ⅰ种方案的时候，你会发现，其实还是有问题的，因为我在做的时候，就已经测试过了，第 Ⅰ 种方案在 IE 10 及以上版本都不会有问题，但在 IE 10 以下的版本就出现了明文，this.type=‘password‘ 完全不起作用。如果你的项目中需要 IE 多个版本的兼容性的话，这种方案就被 pass 了。

而至于第Ⅱ种方案，通过测试你就会发现，其实它的作用是锦上添花，搭配第Ⅰ种方案一起使用还是可以的，不过第Ⅰ种方案已经被 pass 了，仅仅使用第Ⅱ种方案也只是治标不治本，所以，一样 pass 。

如果项目在开发中，那么第Ⅲ种、第Ⅳ种方案可以尝试一下。

而我选择的解决方案，则是使用第Ⅴ种，这种方式是使用 JS 实现的，通过文本框获得焦点后，把文本框进行替换成密码框，这种方式在各版本的 IE 中都是可以做到的。而且，如果您的项目正在开发的阶段，那么，我推荐您使用这种方式，在以后的维护中，也不会有后顾之忧的。

至于代码嘛，这里就不贴了，都不难，而且网上也都有。如果有需要的可以私信给我，我会把代码发给您。