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) 准备基础字符序列，