如何保护点击聊天 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>