How to bypass “slider CAPTCHA” with JS and Puppeteer

Photo by James Pond on Unsplash

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.

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

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

--

--

--

Coffee Driven Software Developer @SBGenomics

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Missing Ranges

Emotion Styled Components [Tutorial]

React Finland, day 3, from newbie perspective

Introduction to Koa.js

React Cheatsheet 2020

How to maintain large sums of data in React

Setting boundaries

Phase 5 React-Redux Project F&B Finder

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Filip Vitas

Filip Vitas

Coffee Driven Software Developer @SBGenomics

More from Medium

Introduction Node.js

Several Ways of Pagination in Javascript for Beginners

How to handle asynchronous operations using a callback, promises & async/await in JavaScript

Uses of JavaScript and MongoDB