Bagaimana untuk melindungi butang klik untuk berbual Whatsapp daripada pengikisan web bot?

Question

Saya menjalankan tapak web terperingkat di mana orang ramai boleh menyiarkan item mereka dan orang lain boleh menghubungi mereka melalui Whatsapp untuk mendapatkan butiran lanjut. Hari ini laman web saya telah diserang dan saya melihat sejumlah besar klik pautan pada butang Whatsapp dalam Google Analitis, ia tidak boleh dibuat secara tiruan. Saya fikir ia adalah beberapa bot yang merebut nombor telefon daripada pautan butang.

$phone= $row_posts['phone'];
// contohnya $phone="+212612345678"
<div class="hubungi">
  <a class="btn btn-success" target="_blank" rel="noopener noreferrer"https://wa.me/212$phone?text=TextMessage">
Maklumat lanjut
 </a>
</div>

Saya menggunakannya untuk butang Whatsapp. Seperti yang anda lihat, nombor telefon mudah dipaparkan dalam pautan href. Saya melihat beberapa laman web seperti "www.mubawab.ma" menggunakan butang Whatsapp tetapi anda tidak dapat melihat nombor itu kali pertama dalam memeriksa kod. Saya mahu melaksanakan fungsi yang serupa supaya saya boleh melindungi nombor telefon pengguna saya daripada pengikisan web bot.

Answer 1

Terdapat banyak cara untuk melakukannya. Menggunakan pemintas gaya reCaptcha mungkin merupakan pilihan terbaik. Walau bagaimanapun, berikut ialah pelaksanaan mudah yang akan menghentikan kebanyakan bot tidak disasarkan.

Dalam PHP saya mengekod nombor telefon melalui base64_encode dan kemudian menyahkodnya dalam JavaScript menggunakan 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>

Kod menjana kandungan ini dalam 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>