機器人惡意刷接口？加個驗證碼幾分鐘搞定！

很多時間我們會在登入或者比如一些抽獎報名頁面放一個驗證碼。

然後在背景進行校驗。通過放置圖檔驗證碼，這樣可以防止機器人暴力掃描重試系統接口。

當然也有些網站驗證碼設計的像是防止正常使用者使用似的（像之前某車票網站一樣。。。）

我們直接來看效果

如上圖，登入表單送出一個使用者名字和驗證碼。

背景擷取輸入驗證碼，并進行校驗。

如果校驗失敗需要使用者點選圖檔生成新驗證碼圖檔，然後繼續送出表單校驗。

輸入錯誤圖檔驗證碼

如下圖，這個例子就禁止使用者繼續登入，列印提示資訊。

原理

某使用者小白重新整理登入頁面，背景根據一個給定的文本來生成驗證碼，并把這個文本記錄起來。（存儲在伺服器會話session）

當接受這個數字對應的圖檔驗證碼的使用者，送出表單的時候。（小白需要送出驗證碼圖檔一緻的文字）。

背景從會話擷取對應小白的文本，進行校驗。

校驗成功，則認為是小白的人工操作，繼續放行後續操作。

npm install -S svg-captcha
      

核心代碼如下：

const express = require('express');
const session = require('express-session');
const serveStatic = require('serve-static');
const bodyParser = require('body-parser');

const app = express();
// parse application/x-www-form-urlencoded so that req will has a body attribute
app.use(bodyParser.urlencoded({ extended: false }))

app.use(serveStatic('./public'));
const port = 12024;

app.use(session({
  secret: '雷學委mySecret2021',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false}
}))

const svgCaptcha = require('svg-captcha');
// a function to generate captcha and display on user screen
const captChaHandler = function(req, res){
    var captcha = svgCaptcha.create();
    req.session.captcha = captcha.text;
    res.type('svg');
    res.status(200).send(captcha.data);
}

app.get('/captcha',captChaHandler);

//user will submit form with code in request body and login handler will get captcha from session and check it with given code
app.post('/login', function(req, res){
    console.log('[雷學委] try login');
    console.log('[雷學委] body:', req.body);   
    var captchaCode = req.session.captcha
    console.log('[雷學委] captchaCode:', captchaCode)
    if(req.body && req.body.code == captchaCode){
        res.status(200).send(req.body.user + " 登入驗證成功!"); 
    }else{
        console.log('[雷學委] 驗證碼校驗失敗');
        res.status(400).send("BadRequest, 驗證碼不對！");
    }
});

console.log('listening port ' + port);
app.listen(port);
      

對應的我們在頁面可以編寫類似下面的代碼（非完整，僅重點展示核心實作）

<form>
姓名: <input type="text" id="username" value="雷學委" /><br/>
驗證碼：<input type="text" id="code" value="" />&nbsp;<img class="captcha" src="/captcha" οnclick={$(event.target).attr('src','/captcha?'+Math.random())} /> <br/>
<input type="submit" value="Submit" />
</form>
<br/><div id="result"></div>
<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
   $("form").submit(function(e){
        e.preventDefault();
        var userName = $("#username").val();
        var code = $("#code").val();
        $.ajax({
            type: 'post',
            data: {user:userName, code: code},
            url: "http://localhost:12024/login/",
            success:function(data){$('#result').html(JSON.stringify(data));},
            error:function(error){$("#result").html(JSON.stringify(error));}
        })
    });
}
      

主要是為了實作下面的form表單：