242Studios's avatar

E-Commerce Bot Protection?

So I have a problem I'm not sure how to solve.

I've created an online form that allows an organization's clients to make payments online. This form allows the clients to enter their account number, specify the amount they'd like to pay, enter their payment details and submit the payment.

However, this form has now been hit multiple times by bad actors trying to verify stolen credit cards by processing hundreds of cards through our website which inevitably results in the third party payment processor blocking our IP until we fix the issue.

For clarity purposes, this is a Vue frontend that hits a Laravel API for the transaction.

I've tried rate limiting and Google Recaptcha. Google Recaptcha worked for a few months but now it seems that somehow the bots are getting through the Google Recaptcha.

I'm looking for any suggestions that would help in this case. I'd prefer a simple solution that doesn't cause too much friction with users. I'd thought of requiring users to sign up/in before being able to use the service but there are lots of instances in which the client uses this as a method for one off payments for specific services in which requiring that may cause a loss of business.

Can anyone help? Thanks in advance for any suggestions you could provide.

0 likes
6 replies
LaryAI's avatar
Level 58

It sounds like you've already implemented some common defenses against bots, such as rate limiting and Google Recaptcha, but these measures are not always foolproof. Here are a few additional strategies you could consider to enhance your bot protection without causing too much friction for legitimate users:

  1. Honeypot Technique: This is a simple and effective method to trap bots. You can add a hidden form field that is invisible to human users but might be filled out by bots. If this field contains any data upon form submission, you can silently reject the request.
<!-- In your Vue component template -->
<form @submit.prevent="handleSubmit">
  <!-- ... other form fields ... -->
  <div style="display:none;">
    <input type="text" name="honeypot" v-model="honeypot" />
  </div>
  <!-- ... submit button ... -->
</form>
// In your Vue component script
export default {
  data() {
    return {
      honeypot: ''
    };
  },
  methods: {
    handleSubmit() {
      if (this.honeypot) {
        // It's a bot
        return;
      }
      // Proceed with the actual form submission
    }
  }
};
  1. Behavioral Analysis: Analyze user behavior on the client-side to detect bot-like interactions. For example, bots may not move the mouse or may fill out the form too quickly. You can track these behaviors and flag suspicious activities.

  2. Device Fingerprinting: Use a service that provides device fingerprinting to identify and block suspicious devices based on their unique characteristics.

  3. Challenge Questions: Implement simple challenge questions that are easy for humans but difficult for bots. For example, "What is the color of the sky on a clear day?" This can be an additional step if the system detects suspicious activity.

  4. Dynamic Recaptcha: Instead of showing Google Recaptcha on every request, you can display it based on certain triggers, such as multiple payment attempts from the same IP or unusual form submission speed.

  5. Server-Side Analysis: On the Laravel backend, analyze the submission patterns. If you detect multiple failed payment attempts from the same IP or session, you can temporarily block further attempts or require additional verification.

  6. Third-Party Fraud Detection Services: Consider integrating with a third-party service that specializes in detecting and preventing online fraud. These services often use advanced algorithms and global fraud data to identify and block malicious activities.

  7. User Account Verification: As a last resort, if the problem persists, you might need to consider requiring users to create an account and verify their email or phone number before making a payment. This adds friction but is a very effective way to deter bots.

Remember that no single method is foolproof, and a layered approach is often the best defense against bots. Monitor the effectiveness of each strategy and be prepared to adjust your defenses as bots evolve.

Snapey's avatar

I got so annoyed at bots bypassing google recaptcha that I came up with my own puzzle. So far 100% effective, but possibly not fully developed from an accessibility point of view which might be important to your client. https://talltips.novate.co.uk/create-a-sliding-puzzle-captcha

Since you are gathering data client side and then accessing Laravel with an API call, don't overlook the fact that the bots could be hitting the API endpoint directly and not going through inertia at all.

A foolproof way would be to accept the user details, including their mobile number, and then text them a code. Entering the code on the page would 'authorise' the payment from your side, and you can then proceed to payment. No need to create a login system for this. Only problem is that there is a cost to send the message.

242Studios's avatar

@Snapey I imagine they still have to go through the frontend to get the token from recaptcha so that they can make a request to the api. However, I was under the impression that if you use inertia, you won't have a publicly accessible API. Doesn't it work just like a traditional Laravel app in that respect? I'll have to do some more research.

Please or to participate in this conversation.