How to bypass “slider CAPTCHA” with JS and Puppeteer

4 min readJul 8, 2019

Next story on same topic - How to solve GeeTest “slider CAPTCHA” with JS

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. There are plugins for Puppeteer to solve reCAPTCHA. There are companies that provides CAPTCHA solving services. For example 2Captcha. Here is how to use Puppeteer and 2Captcha.

There are websites that implemented “slide to verify” CAPTCHA as an alternative. But why would anyone use simple slider CAPTCHA?

Reasons are:

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 simple for humans. But they are also simple to solve by smarter bots.

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

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.

Conclusion

It’s always a dilemma, should websites have better experience and have simple 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.