Protect contact email from bots

Internet in 2025 is a wild place. A few months before writing this, I analyzed server logs and found that up to 80% of my traffic came from bots. I blocked the most aggressive by creating a web application firewall (WAF) using Netlify Edge Functions.

Make firewall rules too strict, and it will hurt legitimate visitors. So, I accept the objective reality: some bad actors will slip through.

At this point, I had to decide: let machines to be trained on my knowledge without consent or keep it private. But what if I want to make some parts of that public information less accessible to data scrapers?

Obfuscation

Keeping communication channels open comes with challenges. Adding a mailto link to your website is like welcoming spam. I don’t want to be distracted by another “quick follow-up”.

I decided to build a second layer of defense around public contact information. The web application firewall is the first layer. And on top of that, Netlify provides its default protection.

Requirements

• People can copy email
• Works in popular browsers
• Easy to implement
• Confuses rogue bots

Algorithm

1. Split the email address into random-length chunks.
2. Mix it with noise.
3. Hide noise using CSS.

Solution

I use Vue and render this part as static HTML at build stage.

<template>
  <div>
    <template v-for="chunk in address">
      {{ chunk }}<span class="ciao">{{ randomLetter() }}</span>
    </template>
  </div>
</template>

<script setup lang="ts">
// "[e-mail]"
const address = ["con", "tac", "t@", "e", "xam", "ple.o", "rg"]

function randomLetter() {
  return "abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random() * 25)]
}
</script>

<style scoped>
.ciao {
  display: none;
}
</style>

Try it on StackBlitz

Result

This email is shown as copy-paste friendly text in the browser. You can apply the same technique to obscure your address or phone number.

It works well at my scale. Sure, contact scrapers may evolve in the future, but interpreting CSS requires more computing resources, making it less attractive than HTML parsing.

Thanks to Spencer Mortensen for comparing email obfuscation techniques.

Support

If you like this article, consider supporting my knowledge sharing efforts and open-source work, thank you!

• Become a sponsor
• Donate via PayPal