How to bypass “slider CAPTCHA” with JS and Puppeteer

Photo by James Pond on Unsplash

Next story on same topic -

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

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 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 , 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.

Next story on same topic -

Thanks for reading! If you like the article, give a clap, or two, or 50👏.
Leave a comment below if you have any questions or say hi on
.

Coffee Driven Software Developer @SBGenomics