Wie schützt man den Click-to-Chat-WhatsApp-Button vor Bot-Web-Scraping?

Question

Ich betreibe eine Kleinanzeigen-Website, auf der Leute ihre Artikel veröffentlichen und andere sie über WhatsApp kontaktieren können, um weitere Informationen zu erhalten. Heute wurde meine Website angegriffen und ich sehe eine große Anzahl an Linkklicks auf den Whatsapp-Button in Google Analytics, das kann nicht künstlich sein. Ich denke, es ist ein Bot, der die Telefonnummer über den Button-Link abgreift.

$phone= $row_posts['phone'];
// zum Beispiel $phone="+212612345678"
<div class="contact">
  <a class="btn btn-success" target="_blank" rel="noopener href="
Mehr Details
 </a>
</div>

Ich verwende es für WhatsApp-Buttons. Wie Sie sehen, wird die Telefonnummer problemlos im Link href angezeigt. Ich habe einige Websites wie „www.mubawab.ma“ gesehen, die den Whatsapp-Button verwenden, aber beim ersten Blick auf den Code kann man diese Nummer nicht sehen. Ich möchte eine ähnliche Funktionalität implementieren, damit ich die Telefonnummern meiner Benutzer vor Bot-Web-Scraping schützen kann.

Answer 1

有很多方法可以做到这一点。使用 reCaptcha 风格的拦截器可能是最好的选择。不过，这里有一个简单的实施方法，可以阻止大多数非针对性攻击的机器人。

在 PHP 中，我通过 base64_encode 对电话号码进行编码，然后在 JavaScript 中使用 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>

该代码在 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>