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