通过JavaScript脚本实现验证码自动输入

浏览数：17 / 时间：2015年06月08日

　　很多网站在用户进行某次点击，比如在线购物确认购买时，会要求用户输入验证码，这在一般情况下也没啥问题，但在用户需要频繁购买或是抢购时就很讨厌了。其实网站的验证码一般是由JS脚本生成的，因此也可以通过编写自己的JS脚本来实现验证码自动输入。

　　大致原理如下，首先观察原网页弹出的验证码图片，这里给出两个示例：技术分享，它们都是前景黑白，背景彩色，宽100高20的图片，进一步把图片放到PS里打开可以发现每个数字所占的都是一个宽8高10的矩形，且这5个矩形的位置和相对距离都是固定的。因此，原理就很简单了，事先为每个数字和字母做一个唯一的编码表，每个码都是长为80维的0-1编码，0代表当前数字(字母)在这个小矩形里是背景，1则代表是前景，这样所有数字和字母都有自己唯一的编码。每次随机生成一幅新的验证码图后，只要把这5个数字(字母)对应的小矩形取出来，然后依次遍历那80个像素，得到一个长为80的编码，再去与编码表一一匹配，就知道具体是哪个数字(字母)了。代码如下：

 1 var captcha = ‘‘; /* 验证码 */
 2 var canvas = document.createElement(‘canvas‘);
 3 canvas.width = ‘100‘; /* 验证码图片宽度 */
 4 canvas.height = ‘20‘; /* 验证码图片高度 */
 5 canvas.style.display = ‘none‘;
 6 document.body.appendChild(canvas); /* 将这一部分也加入到网页代码中 */
 7 var context = canvas.getContext(‘2d‘);
 8 var image = new Image();
 9 image.src = document.getElementById(‘coderefresh‘).src;
10 image.onload = function() {
11     context.drawImage(image, 0, 0); 
12     for (var i = 0; i < 5; i++) { /* 5位验证码，依次处理 */
13         var dbString = ‘‘;
14         var canvasData = context.getImageData(27 + 9 * i, 5, 8, 10); /* 上面的例子第一个小矩形左上角的坐标是(27,5)，然后依次偏移9就是下一个小矩形 */
15         for (var j = 0; j < canvasData.data.length; j += 4) {
16             var r = canvasData.data[j + 0];
17             var g = canvasData.data[j + 1];
18             var b = canvasData.data[j + 2];
19             /* 验证码字符只有黑白两种纯色, 背景色均为其它RGB值 */
20             if (!((r == 0 && g == 0 && b == 0) || (r == 255 && g == 255 && b == 255)))
21                 dbString += ‘0‘;
22             else
23                 dbString += ‘1‘;
24         }
25         for (var k = 0; k < 36; k++) { /* 去编码表进行匹配 */
26             if (dbString == characters[0][k]) /* 匹配成功 */
27                 break;
28         }
29         captcha += characters[1][k];
30     }
31     /* 加入购物车 */
32     var reslut_list = new Array();
33     reslut_list.push(window.location.pathname.match(/\d+/)[0]);
34     reslut_list.push(captcha);
35     addToCart(reslut_list);
36 }