本文旨在解决网站上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属性。
<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中文网其它相关文章！