好久没写东西，工作太忙了！不想服务端请求太多，搞了个这玩意儿，不过项目中并不会用上，还是使用服务端生成的机制（会安全多少呢？）；我就想问个问题，除了图像识别来破解这样的简单验证码外，针对我这种例子，可以侦听到我的验证码吗？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>
本文原创，转载注明出处...博客园 哥德