How to protect click to chat Whatsapp button from bot web scraping?

Question

I am running a classified website where people can post their items and others can contact them via Whatsapp for more details. My website was attacked today and I'm seeing a huge amount of link clicks on the Whatsapp button in Google Analytics, it can't be artificial. I think it's some bot grabbing the phone number from the button link.

$phone= $row_posts['phone'];
// for example $phone=" 212612345678"
<div class="contact">
  <a class="btn btn-success" target="_blank" rel="noopener noreferrer" href="https://wa.me/212$phone?text=TextMessage">
More Details
 </a>
</div>

I use it for Whatsapp buttons. As you can see, the phone number is easily displayed in the link href. I saw some websites like "www.mubawab.ma" using Whatsapp button but you can't see that number first time in inspecting the code. I want to implement similar functionality so that I can protect my user phone numbers from bot web scraping.

Answer 1

There are many ways to do this. Using a reCaptcha style interceptor is probably the best option. However, here is a simple implementation that will stop most non-targeted bots.

In PHP I encoded the phone number via base64_encode and then decoded it in JavaScript using atob.

<?php
    function obfuscatePhone($phone){
        return base64_encode($phone);
    }
?>

<div class="contact">
  <a class="btn btn-success" data-wakey="<?php echo obfuscatePhone("+212612345678");?>" target="_blank" rel="noopener noreferrer" href="#!">
More Details
 </a>   
</div>

<script>
    const wa = document.querySelectorAll("[data-wakey]");
    wa.forEach((e) => {
        const p = atob(e.dataset.wakey);
        e.href = "https://wa.me/212" + p + "?text=TextMessage";
    });
</script>

The code generates this content in HTML:

const wa = document.querySelectorAll("[data-wakey]");
wa.forEach((e) => {
  const p = atob(e.dataset.wakey);
  e.href = "https://wa.me/212" + p + "?text=TextMessage";
});

<div class="contact">
  <a class="btn btn-success" data-wakey="KzIxMjYxMjM0NTY3OA==" target="_blank" rel="noopener noreferrer" href="#!">
More Details
 </a>
</div>