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

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注释。如果您也通过扫雷器运行原始代码，则注释可以被过滤掉。

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

​

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

​

这使得不运行Javascript的爬虫不可能看到您的电子邮件。但是，为了使它对您的用户更有用，您还可以实现复制-点击。

​

<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>

​