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

在线demo：verificationcod

  1. <!DOCTYPE html><html lang="en">
  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4. </head>
  5. <body>
  6.     <input type="text" id="verificationCodeValue" /><button id="verificationCodeBtn">验证</button>
  7.     <script type="text/javascript" src="md5.min.js"></script>
  8.     <script type="text/javascript">
  9.     var verificationCode="";
  10.     function createVerificationCode (w,h){
  11.         var codeLength = 4;
  12.         var code=[];
  13.         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',
  14.          'S','T','U','V','W','X','Y','Z');
  15.          for(var i = 0; i < codeLength; i++) {
  16.             var index = Math.floor(Math.random()*36);
  17.             code.push(random[index]);
  18.         }
  19.         verificationCode = md5(code.join(""));
  20.         console.log(verificationCode);
  21.         var colors = ["red","green","brown","blue","orange","purple","black"]; 
  23.         var codeCanvas = document.createElement("canvas");
  24.             codeCanvas.width = w;
  25.             codeCanvas.height= h;
  26.         var ctx = codeCanvas.getContext("2d");
  27.         ctx.font = "18px Arial";
  28.         var cx = (w-20-codeLength*4)/(codeLength-1),cy = h/2+18/2;
  30.         var deg,cos,sin,dg;
  31.         for(var j=0;j<codeLength;j++){
  32.             ctx.fillStyle =colors[Math.floor(Math.random()*colors.length)];
  33.             //产生一个正负30度以内的角度值以及一个用于变形的dg值
  34.             dg = Math.random()*4.5/10;
  35.             deg = Math.floor(Math.random()*60);
  36.             deg = deg>30?(30-deg):deg;
  37.             cos = Math.cos(deg*Math.PI/180);
  38.             sin = Math.sin(deg*Math.PI/180);
  39.             ctx.setTransform(cos,sin+dg,-sin+dg,cos,(j?cx:10)*j+10,cy);
  40.             ctx.fillText(code[j], 0,0);
  41.             console.log(sin);
  42.         }
  43.         var img = document.getElementById("verificationCodeImg");
  44.         if(!img){
  45.             img = new Image();
  46.             img.id="verificationCodeImg";
  47.             img.onload= function(){
  48.                 document.body.appendChild(img);
  49.             }
  50.         }
  51.         img.src=codeCanvas.toDataURL("image/png");
  53.     }
  54.    window.onload=function(){
  55.            createVerificationCode(120,40);
  56.            document.getElementById("verificationCodeBtn").onclick=function(){
  57.                var vlu = document.getElementById("verificationCodeValue").value;
  58.                if(vlu.length!=4){
  59.                    alert("请输入正确的验证码");
  60.                }else if(md5(vlu.toUpperCase())===verificationCode){
  61.                    alert("正确的验证码！");
  62.                }else{
  63.                    alert("错误的验证码！");
  64.                    createVerificationCode(120,40);
  65.                }
  66.            }
  67.    }
  68.     </script>
  69. </body>
  70. </html>

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

基于CANVAS与MD5的客户端生成验证码的更多相关文章

  1. Jquery 客户端生成验证码

    验证码的作用: 1.有效防止这种问题对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试,实际上是用验证码是现在很多网站通行的方式(比如招商银行的网上个人银行,腾讯的QQ社区),我们利用比较简 ...

  2. KoaHub.JS基于Node.js开发的Koa 生成验证码插件代

    ccap node.js generate captcha using c++ library CImg without install any other lib or software node- ...

  3. H5+JS生成验证码

    效果图如下: <canvas id="canvas1" style="margin-left: 200px;"></canvas>< ...

  4. 利用canvas绘制带干扰线的验证码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. captcha.js一个生成验证码的插件，使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  6. 基于canvas的二维码邀请函生成插件

    去年是最忙碌的一年,实在没时间写博客了,看着互联网行业中一个又一个人的倒下,奉劝大家,健康要放在首位,保重身体.好了,言归正传,这是17年的第一篇博文,话说这天又是产品同学跑过来问我说:hi,lenn ...

  7. Django（十六）基于模板的登录案例：登录装饰器、csrf攻击方式及防护、ajax的Post 的csrf开启写法、生成验证码、加验证码登录、反向解析+传参

    一.csrf攻击 1.1 csrf攻击(跨站请求伪造) [csrf攻击即]:通过第3方网站,伪造请求(前提条件是你已经登录正常网站,并保存了session或cookie登录信息且没有退出),第三方网站 ...

  8. jQuery.qrcode.js客户端生成二维码，支持中文并且可以生成LOGO

    描述: jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ,使用它可以很方便的在页面上生成二维条码.此插件是能够独立使用的,体积也比较         ...

  9. nodejs 生成验证码

    此方法需要nodejs 安装canvas 扩展 准备工作 以Linux为例 1.服务器gcc版本需4.8以上 2.安装所需扩展 yum install cairo cairo-devel cairom ...

随机推荐

  1. iOS证书详解－－再转

    一.成员介绍1.    Certification(证书)证书是对电脑开发资格的认证,每个开发者帐号有一套,分为两种:1)    Developer Certification(开发证书)安装在电脑上 ...

  2. 【Unity探究】物理碰撞实验

    这几天为了准备面试,所以决定对平时学习中的盲点扫盲一下,首先想到的就是物理碰撞.以前没有好好研究过,一直模糊不清,到底什么条件下才可以产生物理碰撞呢?只要其中一个有Rigidbody就可以了吗?所以进 ...

  3. BZOJ 1263 整数划分

    Description 从文件中读入一个正整数\(n\).要求将\(n\)写成若干个正整数之和,并且使这些正整数的乘积最大. 例如,\(n=13\),则当\(n\)表示为\(4+3+3+3\)(或\( ...

  4. CSS也可以改变图片幅面尺寸

    一般情况下,只有<img />标签中的图片,可以根据宽高设定来改变大小. 比如1024x768的图,我们设width="640",height="480&qu ...

  5. hdu 5063 Operation the Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5063 思路:因为3查询最多50,所以可以在查询的时候逆操作找到原来的位置,然后再求查询的值. #include ...

  6. 2.JQuery AJAX

    new ActiveXObject("Microsoft XMLHTTP")是IE中创建XMLHTTPRequest对象的方法.非IE浏览器创建方法是new XmlHttpRequ ...

  7. poj 2432 Around the world bfs+哈希

    由于每个点的状态包含走过来的距离,所以要存二维的状态,但是状态总量太多,所以可以用哈希来搞. 那么就是bfs最短路,哈希记录状态了. #include <iostream> #includ ...

  8. 【HDOJ】2428 Stars

    先排序后二分. #include <iostream> #include <cstdio> #include <cstring> #include <algo ...

  9. LA 4726 再看斜率优化

    感觉最近一批解题报告没写,现在慢慢补吧,算是noip前攒攒rp了 首先感到深深的自责,因为之前对斜率优化没有深入的理解,只是记住了一般步骤,并没有完全了解为什么这样做 先就这道题目而言 首先这种序列题 ...

  10. BZOJ 1050 [HAOI2006]旅行comf

    1050: [HAOI2006]旅行comf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1889  Solved: 976[Submit][Sta ...