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

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

基于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. Tornado 的教材

    Tornado 的教材 作者:杨昆链接:https://www.zhihu.com/question/19707966/answer/12731684来源:知乎著作权归作者所有,转载请联系作者获得授权 ...

  2. 【Winform 控件浅谈 】 之 WebBrowser

    前言 鄙人才疏学浅,如果说错了,还请各位不吝赐教 1.什么是 WebBrowser 下面是已有的轮子,我想说它们是专业的 http://baike.baidu.com/view/2981935.htm ...

  3. [BZOJ 3209] 花神的数论题 【数位统计】

    题目链接: BZOJ - 3209 题目大意 设 f(x) 为 x 的二进制表示中 1 的个数.给定 n ,求 ∏ f(i)     (1 <= i <= n) . 题目分析 总体思路是枚 ...

  4. 【Java】Java XML 技术专题

    XML 基础教程 XML 和 Java 技术 Java XML文档模型 JAXP(Java API for XML Parsing) StAX(Streaming API for XML) XJ(XM ...

  5. VS2012中使用Boost库的方法(超级简单)

    很不错的博客一定得看 http://my.csdn.net/caimouse 1.下载boost库 从http://www.boost.org上下载到目前最新的boost库,快速传送门:boost_1 ...

  6. finalize与System.gc()

    finalize Finalize是Object类的一个方法,可以用来被重写 finalize的工作原理应该是这样的:一旦垃圾收集器准备好释放对象占用的存储空间,它首先调用finalize(),而且只 ...

  7. RTF格式文件浅析

    ps:这两天在分析从微软的word复制一个绕排环绕的表格到openoffice的writer中去的bug,需要了解RTF... RTF是Rich TextFormat的缩写,意即多文本格式.这是一种类 ...

  8. 利用over开窗函数取第一条记录

    SQL> set linesize 200 SQL> select * from (select a.* ,row_number() over( order by empno) rn  f ...

  9. Linux配置支持高并发TCP连接(socket最大连接数)

    Linux配置支持高并发TCP连接(socket最大连接数) Linux配置支持高并发TCP连接(socket最大连接数)及优化内核参数 2011-08-09 15:20:58|  分类:LNMP&a ...

  10. 线性代数（高斯消元）：JSOI2008 球形空间产生器sphere

    JSOI2008 球形空间产生器sphere [题目描述] 有一个球形空间产生器能够在n维空间中产生一个坚硬的球体.现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确 ...