191122_01 纯前端JS实现的文字验证码
纯前端JS实现的文字验证码
作者：邵发
官网：http://afanihao.cn/java
本文是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(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包在此处可以获取。