阿发你好java_191122_01 纯前端JS实现的文字验证码

纯前端JS实现的文字验证码

作者：邵发

本文是Java学习指南系列教程的官方配套文档。内容介绍一种基于JavaScript绘制的纯前端实现的验证码技术。本文附带项目源码及相关JAR包。

1.  验证码的作用

简单地说，验证码是用于“防刷”的，防止用户或机器人的高频率的网页刷新。举一个例子，假设网站提供一个订单查询功能，示意图如下。

( 项目演示http://127.0.0.1:8080/demo/test  )

所谓的恶意刷新，就是疯狂地点击这个“查询”按钮。由于后台的查询操作往往要查询数据库，这个操作占用CPU较高。如果对用户的恶意刷新不加阻拦，则网站会由于负载太高而崩溃。

所以对高耗资源的服务接口，一般要使用验证码加以保护，使其无法轻易调用。加上验证码环节之后，用户必须在人工输入了正确的验证码之后，才能够进入后面的查询流程。输入验证码需要一定时间，从而阻止了用户的高频刷新攻击。

2.  纯前端JS验证码的实现

验证码在工作原理上分为两种：纯前端验证，前端+后台联合验证。

本文先介绍纯前端验证的方式，这种方式仅靠前端JS来完成验证，理论上并不安全，仅仅是防范一些不会编程的小白发起的低水平攻击。

(1) 准备基础字符序列，如下：

vf.charBase = 'abcdefghjkmnqprstuvwxyABCDEFGHJKLMNPQRSTUVWXY3456789';

(2) 使用JS的Math.random()，生成每组4字符的随机数字，即验证码。

vf.random = function(n){

var result = '';

for(var i=0;i

{

var max = this.charBase.length;

var idx = Math.floor( Math.random()* max );

result += this.charBase.charAt(idx);

}

return result;

}

(3) 将生成的随机验证码保存在全局变量中，

vf.verifyCode = vf.random(4);

(4) 使用JS的Canvas绘制技术，将它绘制出来，

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

ctx.fillStyle = '#f37b63' ;

var text = vf.verifyCode + '';

ctx.fillText(text, w/2, h/2);

现在网页上的呈现为：

注意这个Canvas是一个图片，它里面的文字是绘制出来的。在实际项目中，你可以在这个图片上再添加一些干扰，使之难以识别一点。

(5) 在用户点“查询”时，先检查用户输入的验证码是否正确

window.doQuery = function(){

var verifyCode = $('.verifyCode').val().trim();

if(verifyCode.toLowerCase() != vf.verifyCode.toLowerCase())

{

alert('验证码有误');

vf.reset(); // 更换验证码

return;

}

// 继续后续流程...

var req = {};

req.orderNumber = $('.orderNumber').val().trim();

Af.rest ('[[@{/query.do}]]' ,req, function(data){

alert('成功提交');

})

}

在整个流程中，用户想要用查询功能，就必须正确的填写验证码。输入验证码是需要几秒时间的，从而阻止了用户的‘疯狂’点击操作。

3.  纯前端JS验证的安全缺陷

以上验证机制，理论上是不安全的。它只能阻止低水平的攻击，无法防范真正的程序员的功击。可以说，它是防君子不防‘小人’的。

对于程序员来说，可以直接编写一个程序来发起HTTP交互。形如，

JSONObject jreq = new JSONObject();

jreq.put("orderNumber", "112233445566");

HttpUtil httpUtil = new HttpUtil();

String reply = httpUtil.post ("http://www.your.com/query.do",  jreq.toString());

通过编程直接调用后台的query.do接口，便可以发起攻击，并不需要经过验证码的流程。所以上述的前端验证形同虚设。在下一篇191122_02文章中，将介绍基于前后台联合验证的安全的校验机制。

本篇演示所用的项目源码和JAR包在此处可以获取。