如何允许用户复制我的电子邮件地址而不是爬虫？

Question

我遇到了一些爬虫从我的网站爬取电子邮件地址并发送垃圾邮件的问题。

有没有办法让普通用户复制邮件而不是爬虫（在html源代码中检测不到xxx@xxx.com格式）？

我尝试了以下解决方案，但在复制电子邮件地址时它们都不起作用：

解决方案 1

尝试复制这个不会复制@和.com

.name::after {
  content: '@';
}

.mail::after {
  content: '.com';
}

<span class="name">foo</span><span class="mail">gmail</span>

解决方案 2

尝试复制这会使 foo 和 @gmail.com 反转。

.mail {
  display: inline-flex;
  flex-direction: row-reverse;
}

<div class="mail">
  <span>@gmail.com</span>
  <span>foo</span>
</div>

Answer 1

您可以尝试在电子邮件之间添加 HTML 注释。

<div class="mail">
  <span>foo<!--not an email-->@gmail.com</span>
</div>

但是，正如 OP 所述，爬虫可以轻松过滤 HMTL cmets。如果您也通过压缩器运行原始代码，则可以过滤掉 cmets。

您也可以尝试使用 Javascript 将您的电子邮件注入 DOM。

<div id="mail"></div>
<script>
  document.querySelector("#mail").innerText = ["foo", "gmail.com"].join("@")
</script>

这使得不运行 Javascript 的爬虫无法查看您的电子邮件。不过，为了使其对您的用户更有用，您还可以实现 copy-on-click。

<input type="text" readonly id="mail">
<script>
  let email = ["foo", "gmail.com"].join("@")
  let element = document.querySelector("#mail")
  element.value = email
  element.addEventListener('click', e => {
    element.select()
    element.setSelectionRange(0, 99999)
    document.execCommand("copy")
  })
</script>
<style>
   #mail{
     appearance: none; 
     border: 0; 
     outline: 0;
     font-family: inherit;
     font-size: inherit;
   }
</style>

输入的样式可以像普通的行内块文本一样。您可以添加复制后出现的瞬时工具提示。

Answer 2

您可以强制用户单击按钮让 JavaScript 为他们复制电子邮件。

document.querySelector('button').onclick = () => {

  const span = document.querySelector('span');
  const before = window.getComputedStyle(span, ':before').getPropertyValue('content').replace(/"/g, '');
  const after = window.getComputedStyle(span, ':after').getPropertyValue('content').replace(/"/g, '');

  const input = document.createElement('input');
  document.body.append(input);
  input.value = before + after;
  input.select();
  input.setSelectionRange(0, 99999);
  document.execCommand('copy');
  input.remove();
}

span:before {
  content: 'foo';
}

span:after {
  content: '@bar.com';
}

<span></span><button>Copy!</button>