如何保護點擊聊天 Whatsapp 按鈕免受機器人網路抓取？

Question

我正在經營一個分類網站，人們可以在其中發布他們的物品，其他人可以透過 Whatsapp 與他們聯繫以獲取更多詳細資訊。今天我的網站受到了攻擊，我在谷歌分析中的 Whatsapp 按鈕上看到了大量的連結點擊，這不可能是人為的。我認為這是一些機器人從按鈕連結中抓取電話號碼。

$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>

我將其用於 Whatsapp 按鈕。如您所見，電話號碼很容易顯示在連結 href 中。我看到一些網站，如“www.mubawab.ma”，使用 Whatsapp 按鈕，但您無法在檢查代碼中第一次看到該數字。我想實現類似的功能，這樣我就可以保護我的用戶電話號碼免於機器人網路抓取。

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>