滑動驗證碼的實現與安全性

一、滑動驗證碼的作用

滑動驗證碼最初是為了解決機械人或者腳本在網站上的惡意操作所產生的問題而出現。它通過普通驗證碼的數字或字符轉化為操作行為，提示用戶拖動滑塊以完成驗證。

滑動驗證碼的出現使得普通驗證碼的替代，用戶需要繁瑣地輸入驗證碼的時代已經過去了。它無需用戶手動輸入，提高了用戶體驗，也有利於防範惡意操作或者攻擊的出現。

同時，滑動驗證碼也能夠用於用戶身份認證時的二次驗證或者應用於不安全環境下的安全驗證。總體來看，滑動驗證碼的作用得到了極大的擴展和應用。

二、滑動驗證碼的實現

滑動驗證碼的實現有多種方法，比較常見的是前端JavaScript實現和後端Python實現。下面將對這兩種實現方法進行介紹。

1.前端JavaScript實現

前端JavaScript實現滑動驗證碼的基本原理是通過鼠標操作得到用戶的移動軌跡，對移動軌跡進行判斷和處理，從而完成驗證。

根據實現方法的不同，前端JavaScript可以將滑塊轉化成CSS動畫，模擬拖拽操作，實時改變DOM元素位置等。接下來，我們看一個簡單的實現例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滑動驗證碼的實現</title>
</head>
<body>
<div id="slideTarget" style="background-color: #ccc;height: 50px;width: 300px;position: relative">
<div id="slideBar" style="background-color: #fff;height: 50px;width: 50px;position: absolute;left: 0;top:0"></div>
<div />
<script>
var slideTarget=document.getElementById("slideTarget");
var slideBar=document.getElementById("slideBar");
slideBar.onmousedown=function(e){
    var moveX=e.clientX-slideBar.offsetLeft;
    document.onmousemove=function(e){
        var x=e.clientX-moveX;
        if(x<0){
            x=0;
        }else if(x>(slideTarget.offsetWidth-slideBar.offsetWidth)){
            x=slideTarget.offsetWidth-slideBar.offsetWidth;
        }
        slideBar.style.left=x+'px';
    }
}
document.onmouseup=function(){
    document.onmousemove=null;
}
</script>
</body>
</html>

構建一個包含滑塊和滑動軌跡的div，並通過前端JavaScript監聽鼠標事件，完成滑塊的移動和驗證。通過鼠標按下和移動事件獲取鼠標在屏幕中的位置，同時進行坐標的計算，並完成滑塊的移動。最終，驗證是否通過的判斷方式則由具體的應用場景和需求進行決定。

2.後端Python實現

後端Python實現滑動驗證碼最基本的邏輯就是模擬用戶進行拖動操作，來生成用戶拖動滑塊的軌跡。與前端JavaScript相比，後端Python實現滑動驗證碼主要應用於服務器端的後台處理和生成滑動圖像的操作。

Python實現滑動驗證碼的具體流程為：先將一個滑塊的圖片進行切割，分成兩部分（滑塊部分和缺口部分）。在用戶進行滑動過程中，服務器端要動態生成出一個隨機的滑動圖片，並對這張圖片進行加噪聲等處理，初始化該圖像的滑塊位置在圖像的一側，然後再通過一定的算法確定滑塊的終點位置。當用戶進行滑動操作時，由於拖拽的慣性，會超出滑塊本身位置的範圍，出現滑塊與缺口之間有一定的誤差。這個誤差就是通過判斷滑塊和缺口之間的相對距離來完成驗證的。下面是一個Python實現例子：

from PIL import Image, ImageDraw, ImageFont
import random
 
# 創建畫布
def create_canvas():
    width = 300
    height = 180
    # 創建一個空白圖片對象，背景為白色
    im = Image.new('RGB', (width, height), 'white')
    # 創建畫筆對象
    draw = ImageDraw.Draw(im)
    return im, draw
 
# 繪製滑塊
def draw_slider(im, draw):
    font = ImageFont.truetype('arial.ttf', 40)
    # 滑塊的邊長
    slider_side = 50
    # 滑塊距左端的距離
    slider_left = random.randint(50, 150)
    # 滑塊距上端的距離
    slider_top = random.randint(60, 110)
    # 繪製滑塊
    draw.rectangle([slider_left, slider_top, slider_left + slider_side, slider_top + slider_side],
                   fill=(0, 0, 0), outline=(0, 0, 0), width=1)
    # 繪製文字
    draw.text((15, 20), u'請拖動滑塊完成驗證', font=font, fill=(0, 0, 0))
    return slider_left, slider_top
 
# 繪製缺口
def draw_gap(im, draw, slider_left, slider_top):
    gap = random.randint(40, 80)
    left = random.randint(0, 100)
    top = random.randint(0, 50)
    # 填充滑塊缺口部分
    draw.rectangle([slider_left + left, slider_top + top, slider_left + left + gap, slider_top + top + 6],
                   fill=(0, 0, 0), outline=(0, 0, 0), width=1)
    return gap, left, top
 
# 開始拖動滑塊的位置
def get_track(start, gap):
    track = []
    x, y = start, 0
    while x < 300 - 52:
        track.append(int(random.uniform(x, x + gap / 2)))
        x += int(random.uniform(4, 7))
        y += int(random.uniform(-1, 1))
    track.append(300 - 52)
    return track

Python實現的滑動驗證碼需要將繪製的驗證碼圖像發送到前端，並通過前端JavaScript完成用戶的驗證。可以通過Ajax技術將所繪製好的圖像數據發送到前端，用戶進行驗證操作後，再將操作結果與服務器端返回的數據進行比對，從而完成判定和驗證。除此之外的滑動驗證碼實現還包括滑塊和背景圖形的特效處理、坐標生成算法等各種技巧，讓驗證碼更加安全、實用和有趣。

三、滑動驗證碼的安全性

滑動驗證碼雖然解決了驗證碼手動輸入的煩瑣，但是在應用中也需要注意安全性的問題，滑動驗證碼的安全性主要體現在下面幾個方面：

1.破解難度

對於一些普通的滑動驗證碼，只需要簡單地實現一個模擬鼠標移動的程序就能夠輕易地通過驗證。用戶設置密碼、登錄、支付等功能上需要加入判斷因素，使得攻擊者通過模擬用戶信令來進行攻擊的難度增大。

2.防刷策略

滑動驗證碼可以有效地防止機械人或腳本進行惡意攻擊，但這並不是絕對的，有些登陸攻擊代碼可以通過分析目標網站來自定義鼠標路徑。

3.破解方法分析

基於人為屬性，鼠標軌跡存在原子性，一般都是有規律的，距離方差需要小；速度方差需要小，方向變化需要連續。當距離方差較大時，可能存在加速、驟停等操作，看起來像是作弊的行為。

同時，防破解還可以採用測試樣本的隨機性，通過調整閾值可很好地抵制目攻擊，如果採取半監督或者是全監督的方法，包含大量樣本數據，能夠對生產樣本進行模擬，也是可以有效保證滑動驗證碼的安全性。

總體來說，採用滑動驗證碼的目的是為保護網站的安全性。每一種方法都存在攻擊與防禦的關係，可以針對性的進行防禦措施，增強滑動驗證碼的安全性。

原創文章，作者：WKNMR，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/370154.html