通过前端动态拼接邮箱元素的方式，无需使用图片/文本拆分等粗糙方法，能否可靠防范爬虫抓取邮箱并发送垃圾邮件？

先说结论：这种方法能拦住入门级的静态爬虫，但对付会执行JS的现代爬虫/无头浏览器完全没用，称不上“可靠”。

为啥能防住基础爬虫？ #

大部分初级爬虫只会爬取静态HTML源码，根本不会去执行页面里的JavaScript。你把邮箱的用户名和域名拆成data-user和data-domain存在标签里，静态源码里根本没有完整的test@email.com字符串，这类爬虫拿到的只是分开的两段内容，没法直接拼凑出可用的邮箱。

为啥挡不住高级爬虫？ #

现在做垃圾邮件的那帮人用的爬虫早就升级了——比如用Headless Chrome、Puppeteer这类工具，它们完全模拟真实浏览器的行为：加载页面、执行所有JS脚本、渲染出最终的DOM。只要你的代码在正常浏览器里能显示出完整邮箱，这类爬虫就能轻松抓到拼接后的结果。

额外提几个更实用的防护方向 #

如果真的想降低邮箱被垃圾邮件骚扰的概率，可以试试这些思路：

• 人机验证锁邮箱：比如只有用户通过验证码/点击按钮后，才渲染出邮箱（适合不需要公开邮箱的场景）
• 字符混淆+交互触发：比如把邮箱字符转成Unicode编码，或者插入一些无意义的干扰字符，再通过用户的交互（比如hover、点击）来清理并拼接成真实邮箱
• 用表单代替直接展示：让用户通过站内表单发送消息，你后台再转发到邮箱，全程不暴露真实邮箱地址

你的代码实现分析 #

你给出的这段代码是很规范的前端动态渲染方式：

<p id="at" data-domain="email.com" data-user="test"/>
<script>
 var element = document.getElementById('at');
 element.innerHTML = '<a href="mailto:' + element.dataset.user + '@' + element.dataset.domain + '">' + element.dataset.user + '@' + element.dataset.domain + '</a>';
</script>

这种写法既保证了正常用户能看到可点击的邮箱链接（符合无障碍要求），又避免了静态源码里出现完整邮箱。但正如前面所说，这只能过滤掉不会执行JS的初级爬虫，对高级爬虫无效。

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