本教程旨在解决网站上whatsapp点击聊天按钮电话号码被机器人抓取的问题。通过介绍一种在服务器端使用base64编码隐藏电话号码、并在客户端使用javascript动态解码并构建链接的方法，有效提升用户隐私保护，减少机器人活动，为网站运营者提供了一种简单易行的防抓取策略。
引言：WhatsApp按钮电话号码泄露的风险
在许多分类信息或电商网站中，为了方便用户沟通，通常会集成WhatsApp“点击聊天”按钮。然而，如果电话号码直接暴露在链接的href属性中，例如：
More Details
这种做法极易被网络爬虫或机器人抓取。一旦电话号码被大量抓取，不仅可能导致用户面临骚扰电话或垃圾信息，还会使得网站的分析数据（如Google Analytics中的点击量）被非人类行为污染，影响数据分析的准确性。因此，保护用户电话号码，防止其被机器人直接抓取，成为网站运营者需要关注的重要问题。
解决方案概述：编码与解码的策略
为了有效规避机器人直接从HTML源代码中抓取电话号码，我们可以采用一种“编码-解码”的策略。其核心思想是在服务器端将电话号码进行编码处理，使其在HTML中不可读；然后在客户端，利用JavaScript对编码后的数据进行解码，并动态地构建出完整的WhatsApp链接。这种方法能够阻止大多数不执行JavaScript的简单爬虫。
服务器端实现：使用PHP进行电话号码编码
在服务器端，我们可以使用PHP的base64_encode()函数对电话号码进行编码。编码后的字符串将存储在一个自定义的HTML data属性中，而不是直接暴露在href属性里。href属性可以暂时设置为#!或javascript:void(0)，以确保链接在JavaScript加载前不指向任何有效地址。
以下是PHP代码示例：
在这段代码中：
- obfuscatePhone函数接收原始电话号码并返回其Base64编码版本。
- 标签的href属性被设置为#!，避免在JavaScript执行前暴露链接。
- data-whatsapp-phone是一个自定义的data属性，用于存储编码后的电话号码。例如，+212612345678编码后可能显示为KzIxMjYxMjM0NTY3OA==。
客户端实现：使用JavaScript动态构建链接
当页面加载到客户端浏览器后，JavaScript将负责获取这些编码后的电话号码，使用atob()函数对其进行解码，然后动态地设置标签的href属性，使其成为一个可用的WhatsApp链接。
这段JavaScript代码的工作流程如下：
- document.querySelectorAll("[data-whatsapp-phone]")：选择页面上所有带有data-whatsapp-phone属性的元素（即我们的WhatsApp按钮）。
- forEach((button) => { ... })：遍历这些按钮。
- button.dataset.whatsappPhone：获取当前按钮的data-whatsapp-phone属性值，即编码后的电话号码。
- atob(encodedPhone)：将Base64编码的字符串解码回原始电话号码。
- button.href = "..."：将解码后的电话号码与WhatsApp链接前缀和消息文本拼接，然后赋值给按钮的href属性。
完整代码示例与解析
将PHP和JavaScript结合起来，完整的实现如下：
当这段代码在浏览器中渲染时，HTML源代码中标签的href属性将是#!，而电话号码则以Base64编码的形式存在于data-whatsapp-phone属性中。只有当浏览器执行了JavaScript代码后，真实的WhatsApp链接才会动态生成并赋值给href属性。这样，不执行JavaScript的机器人将无法直接从HTML源代码中提取到电话号码。
注意事项与局限性
- 有效性范围：这种方法对于大多数不具备JavaScript执行能力的简单爬虫是有效的。然而，对于使用无头浏览器（Headless Browser）或能够模拟完整浏览器环境的复杂爬虫，它们依然可以执行JavaScript并获取到最终的链接。因此，这是一种有效的“防御第一线”，但并非绝对的防御措施。
- JavaScript依赖：此方案完全依赖于客户端JavaScript的执行。如果用户的浏览器禁用了JavaScript，或者JavaScript文件未能成功加载和执行，那么WhatsApp按钮将无法正常工作，用户也无法点击联系。
- 用户体验：在JavaScript加载和执行完成之前，按钮可能无法立即点击或显示正确的链接。对于快速加载的网站，这种延迟通常微乎其微。
- 更高级的防御：对于需要更高安全级别的场景，可以考虑结合使用reCAPTCHA或其他验证码机制。在用户点击WhatsApp按钮前，要求用户完成一个验证码挑战，以进一步区分人类用户和机器人。这种方法虽然会增加用户操作步骤，但能提供更强的机器人防护能力。
- 电话号码格式：确保PHP中$phone变量包含完整的国际区号（例如+212...），以便wa.me/链接能够正确识别。在JavaScript构建href时，应避免重复添加国家代码，除非原始电话号码不包含。
总结
通过在服务器端对WhatsApp电话号码进行Base64编码，并在客户端使用JavaScript进行解码和动态链接构建，我们可以显著提高网站上电话号码的防抓取能力。这种方法简单易行，对于抵御大多数非目标性机器人爬虫非常有效，有助于保护用户隐私并维护网站数据的准确性。虽然它并非万无一失，但作为一种基础的防御策略，它提供了一个良好的起点。对于更高级的威胁，则需要结合更复杂的验证机制来应对。
