Spam is a huge problem for website owners. On the other hand, CAPTCHAs drives me crazy and they are bad for user experience.
CAPTCHA sucks. Let’s face it. There are a lot of ways to verify humans and every method sucks.
In recent years bots are becoming smarter every day and it is hard to defend website from bots. With a lot of spare time and enough resources, we can bypass almost any CAPTCHA. People wrote plugins to prevent Puppeteer detection and to solve reCAPTCHA. There are even companies that provides CAPTCHA solving services. And we just can’t detect headless Chrome controlled by Puppeteer.
There are websites that implemented “slide to verify” CAPTCHA as an alternative. But why would anyone use something that is so simple to bypass.
- Most bots don’t execute JS, so you can stop those bots
- Slider is user friendly
- Slider has natural swipe action for mobile users
So, sliders are good and easy for humans. But having slider CAPTCHA is like going into the battle naked, with only wooden stick.
Let’s bypass some slider CAPTCHAs.
Slide To Submit
A jQuery plugin for “slide to submit” forms. This is a CAPTCHA alternative for preventing spam on forms.
First we are going to populate input fields. In order to move this slider, we have to:
- position mouse over the center of the handle
- press mouse
- move mouse
- release mouse
Done. That was easy.
Dipbit registration slider
Dipbit is a website for digital currency exchange. Both login and register page have “slide to verify” element.
Dipbit is trying to be smart a bit, so we need to add a code to hide Puppeteer execution.
Taobao is a Chinese online shopping website owned by Alibaba. They have similar register slider like Dipbit. The only difference is that their register form is inside an iframe. But for Puppeteer, that’s not a problem.
Slider CAPTCHA with puzzle
I came across “slide to verify” Vue component that should be easy for humans and it should be hard for bots.
This verification method fetch image, creates 2 canvases and one slider. It renders initial image with puzzle pieces. User is going to move slider and puzzle pieces will match. When two pieces match, user should release the slider and verification is over.
This CAPTCHA randomize puzzle position to confuse bots.
I didn’t want to do anything fancy here, like ML or OCR, so I will just move that slider little by little and compare result image with initial image.
I use rembrandt.js library to compare images. Once I find a picture with the lowest difference I move slider in the best position and release mouse.
In case you missed one cool part. I randomize slider movement on Y-axis to emulate real user mouse movement 😎
All code examples are on github repo, so feel free to copy anything you like.
It’s always a dilemma, should websites have better experience and have ease to bypass CAPTCHA or should websites aggressively protect themselves from bots and have bad user experience.
War between websites and bots is never over. Whatever verification method websites pull out, it’s just a matter of time when someone figures out how to bypass it.
Nevertheless this is just for educational purpose, use Puppeteer responsibly.