你的位置:首页 > Java教程

[Java教程]基于CANVAS与MD5的客户端生成验证码


好久没写东西,工作太忙了!不想服务端请求太多,搞了个这玩意儿,不过项目中并不会用上,还是使用服务端生成的机制(会安全多少呢?);我就想问个问题,除了图像识别来破解这样的简单验证码外,针对我这种例子,可以侦听到我的验证码吗?How?好吧,最简单的莫过于开发个浏览器插件,在页面注入脚本,修改我的所谓“md5的密码”的值。ヽ(*。>Д<)o゜

在线demo:verificationcod

<!DOCTYPE html><html lang="en">
<head>  <meta charset="UTF-8">  <title>Document</title></head><body>  <input type="text" id="verificationCodeValue" /><button id="verificationCodeBtn">验证</button>  <script type="text/javascript" src="md5.min.js"></script>  <script type="text/javascript">  var verificationCode="";  function createVerificationCode (w,h){        var codeLength = 4;    var code=[];    var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',      'S','T','U','V','W','X','Y','Z');     for(var i = 0; i < codeLength; i++) {      var index = Math.floor(Math.random()*36);      code.push(random[index]);    }    verificationCode = md5(code.join(""));    console.log(verificationCode);    var colors = ["red","green","brown","blue","orange","purple","black"];     var codeCanvas = document.createElement("canvas");      codeCanvas.width = w;      codeCanvas.height= h;    var ctx = codeCanvas.getContext("2d");    ctx.font = "18px Arial";    var cx = (w-20-codeLength*4)/(codeLength-1),cy = h/2+18/2;        var deg,cos,sin,dg;    for(var j=0;j<codeLength;j++){      ctx.fillStyle =colors[Math.floor(Math.random()*colors.length)];      //产生一个正负30度以内的角度值以及一个用于变形的dg值      dg = Math.random()*4.5/10;      deg = Math.floor(Math.random()*60);      deg = deg>30?(30-deg):deg;      cos = Math.cos(deg*Math.PI/180);      sin = Math.sin(deg*Math.PI/180);      ctx.setTransform(cos,sin+dg,-sin+dg,cos,(j?cx:10)*j+10,cy);      ctx.fillText(code[j], 0,0);      console.log(sin);    }    var img = document.getElementById("verificationCodeImg");    if(!img){      img = new Image();      img.id="verificationCodeImg";      img.onload= function(){        document.body.appendChild(img);      }    }    img.src=codeCanvas.toDataURL("image/png");      }  window.onload=function(){      createVerificationCode(120,40);      document.getElementById("verificationCodeBtn").onclick=function(){        var vlu = document.getElementById("verificationCodeValue").value;        if(vlu.length!=4){          alert("请输入正确的验证码");        }else if(md5(vlu.toUpperCase())===verificationCode){          alert("正确的验证码!");        }else{          alert("错误的验证码!");          createVerificationCode(120,40);        }      }  }  </script></body></html>

本文原创,转载注明出处...博客园 哥德