jQuery UI Slider Captcha using Range slider
I was searching for jquery slider captcha code last days (16/11/2013). I found some but they weren´t so easy to include and handle. I have decide to build my own to implement to my web sites for testing.
How it works
How it works? We use jQuery UI range slider and save some datas to SESSIONs. The point of this captcha system is not only to move sliders for exact numbers but after moving sliders some security characters are adding with jquery into the captcha field.
- MIN and MAX range value are set and store into $_SESSION["min"] and $_SESSION["max"]
- we set EXPIRETIME into the $_SESSION["expire"]. We use time()+20 (20 seconds for DEMO)
- security characters are set from random function (some random characters) - 2 characters we use for DEMO, store them into the $_SESSION["character"]. This session is been used when we call slider function to add the charactes into the captcha field.
- we use another rand() function to set some salt for crypting the characters and save it into $_SESSION["salt"]
- we crypt $_SESSION["character"] with crypt() function using salt and save the result into $_SESSION["hashcharacter"]
- the last security part is using honeypot field call "formemail" which is hidden only with CSS so the bull robots usualy fill it up and humans let it empty cause it is hidden
This was technical part of this captcha script. Let me explain the logic (if there is some :D):
First security part is to store random numbers and MIN MAX values into the image wich is created dynamicly. The user has to move sliders for correct MIN and MAX value. Second is that jQuery funcion adds special security characters into the input after we move sliders. If the numbers are set correctly we compare data stored at the beggining with datas send from POST value (crypted). To compare the special characters we use saved salt and crypt function to crypt them and compare datas with $_SESSIONs. If all - numbers, crypted special characters and honeypot field are set correct the form passed without error. The point is that bot have no clue how we crypt the data so all HTML data and data from the image are not able to use to send the form.
Hope the second version of the script is much secure now. Thank you all for comments ;).
Here is what you need
DOWNLOAD SOURCE CODE Last edit: 16/12/2013
test | 11.07.2016/15:57
test_h | 06.06.2016/09:05
mark1 | 24.04.2016/19:26
mark | 24.04.2016/19:25
testato | 13.04.2016/16:33
a | 25.03.2016/08:13
Test | 10.03.2016/20:16
sd | 02.10.2015/10:18
test | 25.08.2015/15:39
Toto je test
test | 28.04.2015/13:12