如何保护网站WhatsApp点击聊天按钮免受机器人爬取手机号？

基础版：前端动态生成链接 #

核心是不让手机号直接暴露在HTML的href里，把手机号存到按钮的自定义属性中，用户点击时再动态拼接跳转链接。爬虫抓取静态HTML时，拿不到完整的WhatsApp链接。

PHP渲染按钮代码：

$phone = $row_posts['phone'];
// 去除手机号里的+号，存到data属性
$cleanPhone = str_replace('+', '', $phone);
?>
<div class="contact">
  <button class="btn btn-success wa-contact-btn" data-phone="<?php echo $cleanPhone; ?>">
    More Details
  </button>
</div>

JavaScript处理点击事件：

// 给所有WhatsApp按钮绑定点击逻辑
document.querySelectorAll('.wa-contact-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const phone = this.dataset.phone;
    // 动态生成链接并打开新窗口
    const waLink = `https://wa.me/${phone}?text=TextMessage`;
    window.open(waLink, '_blank', 'noopener noreferrer');
  });
});

进阶版：增加反爬防护 #

如果担心爬虫模拟点击，可以加两层防护：通过鼠标移动事件激活按钮（过滤纯脚本点击），同时对手机号做简单加密存储。

PHP代码：

$phone = $row_posts['phone'];
$cleanPhone = str_replace('+', '', $phone);
// 用Base64加密手机号
$encodedPhone = base64_encode($cleanPhone);
?>
<div class="contact">
  <!-- 初始按钮禁用，用户移动鼠标后才激活 -->
  <button class="btn btn-success wa-contact-btn" data-encoded="<?php echo $encodedPhone; ?>" disabled>
    More Details
  </button>
</div>

JavaScript代码：

// 监听鼠标移动，激活所有按钮（只触发一次）
document.addEventListener('mousemove', () => {
  document.querySelectorAll('.wa-contact-btn').forEach(btn => {
    btn.removeAttribute('disabled');
  });
}, { once: true });

// 处理点击事件
document.querySelectorAll('.wa-contact-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    if (this.disabled) return;
    // 解密手机号
    const encoded = this.dataset.encoded;
    const phone = atob(encoded);
    // 生成链接并跳转
    const waLink = `https://wa.me/${phone}?text=TextMessage`;
    window.open(waLink, '_blank', 'noopener noreferrer');
  });
});

终极版：后端生成临时链接 #

要是想彻底让前端碰不到真实手机号，可以用后端接口生成跳转链接，还能配合IP限流、验证码等措施，抵御批量爬取。

前端按钮代码：

$postId = $row_posts['id'];
?>
<div class="contact">
  <button class="btn btn-success wa-contact-btn" data-post-id="<?php echo $postId; ?>">
    More Details
  </button>
</div>

JavaScript代码：

document.querySelectorAll('.wa-contact-btn').forEach(btn => {
  btn.addEventListener('click', async function() {
    const postId = this.dataset.postId;
    try {
      // 向后端请求WhatsApp链接
      const res = await fetch(`/get-whatsapp-link.php?post_id=${postId}`);
      const data = await res.json();
      if (data.url) {
        window.open(data.url, '_blank', 'noopener noreferrer');
      } else {
        alert('无法获取联系方式，请稍后再试');
      }
    } catch (err) {
      alert('请求失败，请稍后再试');
    }
  });
});

后端get-whatsapp-link.php代码：

<?php
// 可选：添加IP限流、请求来源验证等防护
$postId = $_GET['post_id'] ?? '';
if (!$postId) {
  http_response_code(400);
  echo json_encode(['error' => '无效的帖子ID']);
  exit;
}

// 从数据库获取对应帖子的手机号（替换成你的实际查询逻辑）
function getPhoneByPostId($postId) {
  $pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'password');
  $stmt = $pdo->prepare('SELECT phone FROM posts WHERE id = ?');
  $stmt->execute([$postId]);
  return $stmt->fetchColumn();
}

$phone = getPhoneByPostId($postId);
if (!$phone) {
  http_response_code(404);
  echo json_encode(['error' => '未找到联系方式']);
  exit;
}

// 生成WhatsApp链接
$cleanPhone = str_replace('+', '', $phone);
$waUrl = "https://wa.me/{$cleanPhone}?text=TextMessage";

echo json_encode(['url' => $waUrl]);
?>

内容的提问来源于stack exchange，提问作者kevin roy