滑动验证码的设计与理解

在介绍之前,首先一个概念明确一个共识:没有攻不破的网站,只有值不值得。

这意思是说,我们可以尽可能的提高自己网站的安全,但并没有绝对的安全,当网站安全级别大于攻击者能得到的回报时,你的网站就是安全的。

所以百度搜到的很多验证码都已经结合了人工智能分析用户行为,很厉害。但这里只介绍我的小网站是怎么设计的。

大概逻辑:当需要验证码时,前端发送ajax向后台请求相关数据发送回前端,由前端生成(与后端生成图片,然后传送图片到前端的做法相比安全性要差很多。但也是可以预防的,后端可以对此Session进行请求记录,如果在一定时间内恶意多次请求,可以进行封禁ip等对策),验证完成后,后台再对传回的数据进行校验。

效果图:

1|0js类的设计:

1.定义一个验证码父类,因为目前只有这一个验证类型,倘若以后再要扩展其他验证类型呢。那么它们之间肯定有很多公共之处(如:验证成功、失败的回调,获取验证码的类型,获取验证结果等),所以这些共同点可以提炼出来,下面是我目前的父类样子:

 

 /**
 * 验证码的父类,所有验证码都要继承这个类
 * @param id 验证码的唯一标识
 * @param type 验证码的类型
 * @param contentDiv 包含着验证码的DIV
 * @constructor
 */
 var Identifying = function (id,type,contentDiv){
  this.id = id;
  this.type = type;
  this.contentDiv=contentDiv;
 }
 /**
 * 销毁函数
 */
 Identifying.prototype.destroy = function(){
  this.successFunc = null;
  this.errorFunc = null;
  this.clearDom();
  this.contentDiv = null;
 }
 /**
 * 清除节点内容
 */
 Identifying.prototype.clearDom = function(){
  if(this.contentDiv instanceof jQuery){
   this.contentDiv.empty();
  }else if(this.contentDiv instanceof HTMLElement){
   this.contentDiv.innerText = "";
  }
 }
 /**
 * 回调函数
 * 验证成功后进行调用
 * this需要指具体验证类
 * @param result 对象,有对应验证类的传递的参数,具体要看验证类
 */
 Identifying.prototype.success = function (result) {
  if(this.successFunc instanceof Function){
   this.successFunc(result);
  }
 }
 /**
 * 验证失败发生错误调用的函数
 * @param result
 */
 Identifying.prototype.error = function (result) {
  if(this.errorFunc instanceof Function){
   this.errorFunc(result);
  }else{
   //统一处理错误
  }
 }
 /**
 * 获取验证码id
 */
 Identifying.prototype.getId = function () {
  return this.id;
 }
 /**
 * 获取验证码类型
 * @returns {*}
 */
 Identifying.prototype.getType = function () {
  return this.type;
 }
 /**
 * 显示验证框
 */
 Identifying.prototype.showIdentifying = function(callback){
  this.contentDiv.show(null,callback);
 }
 /**
 * 隐藏验证框
 */
 Identifying.prototype.hiddenIdentifying = function(callback){
  this.contentDiv.hide(null,callback);
 }
 /**
 * 获得验证码显示的dom元素
 */
 Identifying.prototype.getContentDiv = function () {
  return this.contentDiv;
 }
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/1584.html