DEV Community

Oleksandr Bystrikov
Oleksandr Bystrikov

Posted on • Originally published at softbeehive.com

1

Protect contact email from bots

Image descriptionInternet 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">
// "contact@example.org"
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>
Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay