如何添加混淆邮箱链接以避免网站出现「选择应用」提示

一、关于跳过「选择应用」提示 #

mailto: 链接的应用选择提示是系统级行为，前端代码无法直接跳过：

• 如果用户系统中没有设置默认邮件应用，或者存在多个邮件客户端，系统必然会弹出选择框；
• 唯一能避免这个提示的方式，是引导用户在操作系统的默认应用设置里，指定某一个邮件客户端作为默认的邮件处理程序。

二、邮箱地址的混淆方法（防止爬虫抓取） #

如果要隐藏原始邮箱地址避免被爬虫识别，同时保持正常的mailto跳转功能，可以用以下几种方案：

1. JavaScript动态生成链接 #

通过拆分邮箱字符串再拼接的方式，让原始HTML中不出现完整邮箱地址，页面加载后再生成可点击的链接：

// 拆分邮箱的用户名和域名
const username = 'xxxx';
const domain = 'xxxxx.com';
const fullEmail = `${username}@${domain}`;

// 找到要插入链接的容器
const linkContainer = document.getElementById('email-link-wrap');

// 创建a标签并添加到页面
const emailLink = document.createElement('a');
emailLink.href = `mailto:${fullEmail}`;
emailLink.textContent = '发送邮件';
linkContainer.appendChild(emailLink);

对应的HTML只需预留容器：

<div id="email-link-wrap"></div>

2. HTML字符实体转义 #

把邮箱中的特殊字符（比如@、.）转成HTML实体编码，爬虫难以直接识别，但浏览器渲染后会正常显示：

<a href="mailto:xxxx&#64;xxxxx&#46;com">发送邮件</a>

（注：@是@的实体编码，.是.的实体编码）

3. CSS视觉反转法 #

把邮箱文字反向书写，再用CSS翻转回来，用户看到正常文字，但爬虫抓取到的是反向内容：

<style>
.email-reverse {
  display: inline-block;
  transform: scaleX(-1);
}
.email-reverse a {
  display: inline-block;
  transform: scaleX(-1);
}
</style>
<div class="email-reverse">
  <a href="mailto:xxxx@xxxxx.com">moc.xxxxxx@xxxx</a>
</div>

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