自动识别输入学工平台验证码

前言

最近登录学校的学工平台的官网的时候发现学校的网站有一定的年份了，包括验证码的机制也是非常的简单，那么也就意味着其实在如今这样简单的验证码机制已经不再安全了，其实不仅仅是我们学校的验证码使用的是比较老的技术，我也发现了其实还有很多的比较小并且比较老的网站使用的都是以前的验证码技术，所以我打算实现一个自动输入验证码的功能，这样配合浏览器的记住密码的功能每次登录就会非常的方便了。

实现思路

在开始实现之前可以想看一下我们学校的学工平台的验证码有多么的简单：

可以看出这样的验证码是非常的简单的，很简单的就可以通过肉眼就分辨出其中的数字。

那么基于这样的验证码我们需要做到自动识别并且完成输入那么非常的简单了：

识别出验证码中的图像内容
将识别到的内容填充到验证码输入框中

如何实现

思路是非常的简单,那么究竟该如何实现呢?

首先我们是通过JS来实现,所以可以通过浏览器插件或者是油猴脚本的形式来向页面当中注入JS
识别图像内容
这里我找到了一个JS的图像识别的开源项目,可以通过这个项目来实现图像识别的功能。(项目地址:tesseract.js)

但是在这之后我又遇到了一个问题,通过查看网页源代码可以发现我们学校学工平台中的验证码并不是一般的图像格式,而是一个.html文件,无法保存,虽然不知道是什么原理,但是直接识别肯定是不会成功的,所以需要想办法.
<img style="border: none; display: none;" border="0" src="default3.html">

那么换一种思路只需要将这个.htmldom元素转化为一张真正的图像就可以了，该如何转换呢，这里就必须借助于 html2canvas这个项目了(项目地址),这个工具可以将dom元素转化为canvas图像,从而就可以达到我们的目的。

之后我们就只需要对转化的得到的canvas图像进行图像识别就可以获得到我们想要的验证码了。

最后只需要将验证码填入相应的文本框就完美的实现了自动输入验证码的功能了。

实现代码

(function () {
  //这里通过使用了promise来更加简便的调用
  let H2C = new Promise(function (resolve, reject) {
    // 引入html2canvas
    dynamicLoadJS('http://html2canvas.hertzen.com/dist/html2canvas.min.js', function () {
      resolve("html2canvas加载完毕");
    });
  })

  let Tes = new Promise(function (resolve, reject) {
    // 引入tesseract
    dynamicLoadJS('https://unpkg.com/tesseract.js@v2.0.0-beta.1/dist/tesseract.min.js', function () {
      resolve("tesseract加载完毕");
    });
  })

  Promise.all([H2C, Tes]).then(function (values) {
    // 将原本的html文件转化为canvas图像
    html2canvas(document.querySelector("img[src='default3.html']")).then(canvas => {
      document.querySelector("img[src='default3.html']").parentNode.appendChild(canvas);
      document.querySelector("img[src='default3.html']").style.display = "none";

      //对图像进行识别
      Tesseract.recognize(canvas.toDataURL()).then(function (result) {
        let yzm = result.data.text;
        yzm = yzm.replace(/[^0-9]/ig, "");
        console.log(yzm);
        //将结果注入相应的文本框
        document.querySelector("input[maxlength='5']").value = yzm;
        console.log(values);
      })

    });
  })

  //这个函数的作用是动态的引入我们需要的那两个js库,并且接收两个参数,第一个参数是路径,第二个参数是一个回调函数,回调函数就是加载完毕后所要执行的内容
  function dynamicLoadJS(path, callback) {
    let temp = document.createElement('script');
    temp.setAttribute('type', 'text/javascript');
    temp.src = path;
    temp.onload = temp.onreadystatechange = function () {
      if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
        temp.onload = temp.onreadystatechange = null;
        callback();
        this.parentNode.removeChild(this);
      }
    };
    document.head.appendChild(temp);
  }
})();

这样就实现了自动输入验证码的功能,虽然动态加载两个js库需要花费一些时间以及识别的过程需要一些时间,但是还是能够免去手动输入验证码的过程。

总结

实现这个功能整体上还是挺简单的，毕竟现在已经有了这么强大的识别技术，这也意味着现在很多网站的验证码已经是如同虚设，需要及时的更新了。

这个小工具写的也不是很好，如果有更好的方案欢迎提出学习。