保护WhatsApp点击聊天按钮免受机器人抓取的教程-js教程-PHP中文网

保护WhatsApp点击聊天按钮免受机器人抓取的教程

聖光之護

发布： 2025-11-08 20:22:18

原创

444人浏览过

保护WhatsApp点击聊天按钮免受机器人抓取的教程

本文旨在解决网站上whatsapp点击聊天按钮的手机号码被机器人抓取的问题。通过介绍一种简单有效的技术，即在服务器端（php）对手机号码进行base64编码，并在客户端（javascript）进行解码，动态构建whatsapp链接。这种方法能有效隐藏html源码中的敏感信息，阻止多数非高级爬虫的直接抓取，从而提升用户隐私保护。

一、问题背景：WhatsApp链接中的电话号码泄露风险

在分类信息网站或其他需要用户通过WhatsApp联系的场景中，开发者通常会直接将用户的电话号码嵌入到WhatsApp点击聊天链接的href属性中。例如：

<div class="contact">
  <a class="btn btn-success" target="_blank" rel="noopener noreferrer" href="https://wa.me/212612345678?text=TextMessage">
More Details
 </a>   
</div>

登录后复制

这种做法虽然方便，但存在严重的安全隐私隐患。当电话号码直接暴露在HTML源码中时，恶意机器人或爬虫可以轻易地通过解析页面来抓取这些敏感信息，导致用户数据泄露、垃圾信息骚扰甚至更严重的网络攻击。网站管理员可能会在Google Analytics中观察到大量非人类行为的点击，这通常是机器人进行数据抓取的迹象。

二、解决方案：基于Base64编码与JavaScript解码的电话号码混淆

为了有效防止机器人直接从HTML源码中抓取电话号码，我们可以采用一种简单但有效的混淆技术：在服务器端对电话号码进行Base64编码，然后将其存储在一个非href属性中（例如data-*属性），最后在客户端使用JavaScript对其进行解码并动态构建WhatsApp链接。

1. 服务器端（PHP）编码电话号码

首先，在生成HTML时，使用PHP的base64_encode()函数对电话号码进行编码。我们将编码后的字符串存储在自定义的data-*属性中，而不是直接放在href属性里。href属性可以暂时设置为#!或javascript:void(0);，以防止在JavaScript加载前点击无效。

<?php
    /**
     * 对电话号码进行Base64编码以混淆
     * @param string $phone 原始电话号码
     * @return string 编码后的电话号码
     */
    function obfuscatePhone($phone){
        return base64_encode($phone);
    }

    // 假设从数据库获取的电话号码为 $row_posts['phone']
    $phone = "+212612345678"; // 示例电话号码
?>

<div class="contact">
  <a class="btn btn-success" 
     data-wakey="<?php echo obfuscatePhone($phone);?>" 
     target="_blank" 
     rel="noopener noreferrer" 
     href="#!">
    More Details
  </a>   
</div>

登录后复制

代码解释：

obfuscatePhone() 函数接收一个电话号码字符串，并返回其Base64编码后的结果。
在<a>标签中，我们创建了一个名为data-wakey的自定义数据属性，并将编码后的电话号码赋值给它。
href属性被设置为#!，确保在JavaScript执行前，链接不会指向任何有效地址。

2. 客户端（JavaScript）解码并构建链接

接下来，在页面加载完成后，使用JavaScript来查找所有包含data-wakey属性的链接元素。然后，取出data-wakey属性的值，使用atob()函数对其进行Base64解码，最后将解码后的电话号码拼接到WhatsApp链接中，并动态设置到href属性。

Giiso写作机器人

Giiso写作机器人，让写作更简单

查看详情

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const waButtons = document.querySelectorAll("[data-wakey]");

        waButtons.forEach((button) => {
            // 获取Base64编码的电话号码
            const encodedPhone = button.dataset.wakey;
            // 使用atob()函数解码电话号码
            const decodedPhone = atob(encodedPhone);
            // 构建完整的WhatsApp链接
            button.href = "https://wa.me/" + decodedPhone + "?text=TextMessage";
        });
    });
</script>

登录后复制

代码解释：

document.addEventListener('DOMContentLoaded', ...) 确保脚本在DOM完全加载后执行，避免找不到元素。
document.querySelectorAll("[data-wakey]") 选取所有带有data-wakey属性的元素。
button.dataset.wakey 获取data-wakey属性的值。
atob(encodedPhone) 是JavaScript内置函数，用于解码Base64字符串。
最后，将解码后的电话号码拼接到WhatsApp的基础URL中，并更新<a>标签的href属性。

3. 页面渲染效果

经过上述PHP处理后，浏览器接收到的HTML源码将是：

<div class="contact">
  <a class="btn btn-success" data-wakey="KzIxMjYxMjM0NTY3OA==" target="_blank" rel="noopener noreferrer" href="#!">
More Details
 </a>
</div>

登录后复制

此时，电话号码+212612345678已经被编码为KzIxMjYxMjM0NTY3OA==，无法直接识别。只有当JavaScript执行后，href属性才会被动态填充为正确的WhatsApp链接。

三、注意事项与总结

1. 优点

阻止基础爬虫： 大多数简单的网络爬虫只会解析HTML源码，而不会执行JavaScript。这种方法可以有效阻止它们直接抓取电话号码。
提升用户隐私： 减少了敏感信息在HTML源码中的直接暴露，增加了用户电话号码的安全性。
实现简单： 只需要少量的PHP和JavaScript代码即可实现。

2. 局限性

非绝对安全： 对于能够模拟浏览器环境并执行JavaScript的高级爬虫（如使用Puppeteer、Selenium等工具），这种方法并不能完全阻止它们获取电话号码。它们可以等待JavaScript执行完毕后，再从DOM中提取href属性。
依赖JavaScript： 如果用户的浏览器禁用了JavaScript，则WhatsApp链接将无法正常工作。
用户体验： 在JavaScript加载和执行完成之前，链接可能无法点击或点击后跳转到无效地址。但由于现代浏览器加载速度快，通常用户感知不明显。

3. 进一步增强安全性

对于需要更高安全级别的场景，可以考虑结合以下方法：

reCAPTCHA或其他验证码： 在点击WhatsApp按钮前，要求用户完成验证码，以确认是真人操作。
后端API调用： 首次点击时，前端向后端发送请求，后端验证用户身份或进行其他安全检查后，再返回加密的电话号码或动态生成的短链接。
图片形式展示电话号码： 将电话号码渲染成图片，虽然不方便复制，但能有效防止文本抓取。

总结

通过在服务器端进行Base64编码并在客户端使用JavaScript解码动态构建WhatsApp链接，我们为网站上的电话号码提供了一层有效的保护。这种方法简单易行，能有效抵御多数非高级爬虫的直接抓取，从而提升用户隐私保护。虽然它并非万无一失，但作为第一道防线，对于提升网站的整体安全性具有积极意义。在实际应用中，开发者应根据具体需求和安全级别，权衡利弊并考虑结合其他安全措施。

以上就是保护WhatsApp点击聊天按钮免受机器人抓取的教程的详细内容，更多请关注php中文网其它相关文章！