问题
做过 Web 开发的童鞋们都知道,打开网站之后,一般都是需要输入用户名、密码的。然而,就是这简单的操作,在提交的时候,就可能会暴露一些问题,当然,这些问题是会被安全漏洞测试软件检测出来的。如果没有做过相关的处理,那么表单、页面或者本地的 Cookie 中都是会留有一些敏感信息,这些敏感信息都可能会被黑客利用的。下面就简单的谈一谈如何避免这样的问题出现。
解决方案
下面列出了几个比较常用的解决方案,都有各自的优缺点,和不同的适用场景,先大概的看一下吧:
Ⅰ、 针对浏览器记住密码
首先大部分浏览器都是根据表单域的type=”password”来判断密码域的,所以针对这种情况可以采取“动态设置密码域”的方法:
代码如下:
<span style="font-family:Comic Sans MS;"><input type="text" name="password" onfocus="this.type='password'" /> </span>
注:当这个文档框获取焦点时才将其变成密码域,这样浏览器就不会记住密码,当然为了更加完善,还可以把autocomplete=”off”属性也加上。
Ⅱ、在 onload 事件,把密码框的值清空,即:
代码如下:
<script language="javascript"> window.load = function(){ document.getElementById('密码域ID').value=''; }; </script>
注:或者使用 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 中都是可以做到的。而且,如果您的项目正在开发的阶段,那么,我推荐您使用这种方式,在以后的维护中,也不会有后顾之忧的。