App Security Part III -Protection against bots using Google reCAPTCHA

Prasad Katti
5 min readDec 27, 2020

--

image credit: pngtree

App Security Part 1.

App Security Part 2.

In continuation of the series on application security this installment focuses on protecting a website against a bot[non-human] engineered attack.
Any business that has a presence on the internet needs to continuously monitor and protect its digital assets against attacks intentional and inadvertent. These attacks could be emanating from human hackers, programmed machines and bots working concertedly to carry out DDOS attacks. There is an imperative need for alleviating threats emanating from all these quarters. There are multiple ways of addressing these issues [at different layers] starting from laying out the right network topology, adhering to defense in depth principles, ensuring end-end payload encryption. These are all important tools in the organization’s security tool box. However, business owners still need to tell legitimate and malicious traffic apart. Google ‘reCAPTCHA’ is one of those tools that can help business owners to differentiate legitimate traffic from the bot traffic. It measures the traffic patterns based on calculated score that provides insights into the nature of traffic and how to deal with the same. All in a friction free manner. More importantly it lends itself elegantly to adaptive auth in concert with other concepts in security wheel such as multi-factor-auth [MFA].

About Google reCAPTCHA

We have all come across websites that throw up some puzzles [choose all bikes in the picture] or challenges [2+3=?]. These are essentially present to ascertain not measure how sharp our eye sight is but to identify that the person using web site is a human being. This identification can then help prevent bot engineered DoS attacks and deprive legitimate users from using the service. Google reCAPTCHA is one such security tool that can accomplish this. In fact, reCAPTCHA and others of its ilk are important weapons in the security arsenal when it comes to sustaining application availability at internet scale. It provides insights into traffic patterns, provide a score on the live traffic, and on demand dashboard on historic data.

reCAPTCHA comes in the multiple versions. It has gone through multiple iterations to provide a friction free customer experience while not compromising on the overall aspect of security and service availability. While version v1 is deprecated, v2 and v3 represent next generations.

reCAPTCHA v2 presents challenge/puzzle to the user when he/she is performing important activities. For eg. password management, checking out to items from online store, commenting on a social media website, websites that handle financial transactions. While doing so it tries identify and eliminate traffic coming from internet bots.

reCAPTCHA v3 is the next version that is intended to work silently behind the scenes to give a friction free experience to consumers. Behind the scenes it assigns a score to each interaction [that is instrumented with reCAPTCHA] on the website. The scores range from 0 to 1. a score closer to 1 is deemed to be a genuine interaction while scores closer to the other half of the spectrum are deemed risky and unauthentic. The scores are presented in an admin console of reCAPTCHA.

In this write up, my intent is to quickly go over wiring up of Google reCAPTCHA v3 with a sample use case in a web app. As always, the code is available on github.

As before we would be using the same react app from the previous installments. For the purpose of simplicity , we would not be using any database in this case. However, all our app data is contained within an in memory map like data structure. As part of this exercise, we will develop a feature that accepts user feedback, wire reCAPTCHA to this feature, so when a user interacts this feature, reCAPTCHA puts a score on this interaction. Following is the app architecture diagram. We will have separate section to discuss the deployment.

Setting up reCaptcha

  1. Head over to https://developers.google.com/recaptcha/intro to sign up and set up the ‘keys’ for using the ‘reCAPTCHA’ service.
  2. We get two keys. A SITE_KEY used to wire the client[browser centric] with the client and a SECRET_KEY that is used to integrate the server component with the ‘reCAPTCHA’ service. The service provides JavaScript hooks for client side integration and verification APIs for server side integration.

Below is a quick glance of the wiring on the client side. Note the reference to the JavaScript api in the <head> section.

Post this, the browser should now display the sliding ‘reCAPTCHA’ logo on the bottom left.

Now, on the react component design.

We have a ‘Feedback’ feature that integrates with ‘reCAPTCHA’ at run time, and generates the token that we can send over to the server component that save the user feedback.

The key above is the code snippet below that invokes reCAPTCHA programmatically.

Post generating the token, it is sent to the server where it is validated using the ‘reCAPTCHA’ api.

the token is sent by the react client while the secret is the ‘SECRET_KEY’ we created at the beginning.

Once validated, the ‘reCAPTCHA’ sends the response like below:

The score can then be interpreted to define the next course of action. As indicated earlier, a score closer to 1 is a legitimate interaction while score closer to ‘0’ is not a human interaction. Any thing in between can be subjected to further scrutiny by possibly presenting the user with a v2 ‘reCAPTCHA’.

Deployment

Let’s now see how we deploy this in the wild. The react app is deployed on ‘vercel’ (www.vercel.com)while the server side component is deployed on Heroku (www.heroku.com). The app can be accessed on https://social-auth-v2.mprkatti.vercel.app/feedback .

The source code can be referenced from the following git repos.

client: https://github.com/mprkatti/social-auth-v2

server: https://github.com/mprkatti/recaptcha-validator

So what are you waiting for? Are you ready to put the bots firmly in their place? I hope you enjoyed going through this discussion. Are you game for more? In the next [last for 2020] on app security I will dive into another important app security aspect. As the saying goes, I have reserved the best for the last.

--

--

Prasad Katti
Prasad Katti

Written by Prasad Katti

Architect and engineer with a passion for emerging technologies and trends across cloud, data, serverless and modern distributed systems.

No responses yet