Comment protéger le bouton Click to Chat Whatsapp du scraping Web des robots ?

Question

Je gère un site Web de petites annonces sur lequel les gens peuvent publier leurs articles et d'autres peuvent les contacter via Whatsapp pour plus de détails. Aujourd'hui, mon site Web a été attaqué et je constate une énorme quantité de clics sur les liens sur le bouton Whatsapp dans Google Analytics, cela ne peut pas être artificiel. Je pense que c'est un robot qui récupère le numéro de téléphone à partir du lien du bouton.

$phone= $row_posts['phone'];
// par exemple $phone="+212612345678"
<div class="contact">
  <a class="btn btn-success" target="_blank" rel="noopener noreferrer" href="https://wa.me/212$phone?text=TextMessage">
Plus de détails
 ≪/a>
</div>

Je l'utilise pour les boutons Whatsapp. Comme vous pouvez le constater, le numéro de téléphone s'affiche facilement dans le lien href. J'ai vu certains sites Web comme "www.mubawab.ma" utilisant le bouton Whatsapp mais vous ne pouvez pas voir ce numéro la première fois en inspectant le code. Je souhaite implémenter des fonctionnalités similaires afin de pouvoir protéger mes numéros de téléphone d'utilisateur contre le scraping Web des robots.

Answer 1

Il existe de nombreuses façons de procéder. L'utilisation d'un intercepteur de style reCaptcha est probablement la meilleure option. Cependant, voici une implémentation simple qui arrêtera la plupart des robots non ciblés.

En PHP, j'ai encodé le numéro de téléphone via base64_encode puis je l'ai décodé en JavaScript en utilisant 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>

Le code génère ce contenu en 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>