How to protect email address from being easily scraped by bots

I received a request from a client to protect their email address, which was displayed in several places on their website. Using AI tool (Claude), I successfully protected the client’s email from being scraped by bots, helping to reduce spams.

CSS Breakdown:

This CSS is used to obfuscate an email address to protect it from being easily scraped by bots. Here’s a breakdown of the code:

				
					.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}
  • attr(data-website): Takes the value of the data-website attribute.
  • "\0040": Inserts the "@" symbol (Unicode for '@').
  • attr(data-user): Takes the value of the data-user attribute.
  • unicode-bidi: bidi-override;: This property ensures that the text direction is overridden, useful for manipulating how the text appears when rendered.
  • direction: rtl;: This sets the text direction to right-to-left (RTL), reversing how the email is displayed.

HTML Breakdown:

				
					<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#101;&#98;&#114;&#97;&#104;&#105;&#109;&#64;&#112;&#114;&#111;&#110;&#116;&#111;&#109;&#97;&#114;&#107;&#101;&#116;&#105;&#110;&#103;&#46;&#99;&#111;&#109;">
    <span class="e-mail" data-user="miharbe" data-website="moc.gnitekramotnorp"></span>
</a>
  • <a href="& # 109;....">: The email in the href attribute is obfuscated using character entities, just like in the original example. When decoded, this becomes mailto:ebrahim@prontomarketing.com. you can also use this tool to generate the hex code of the email address.
  • data-user="miharbe" is the reversed version of the user part (ebrahim).
  • data-website="moc.gnitekramotnorp" is the reversed version of the domain (prontomarketing.com).

Purpose:

This technique dynamically renders the email address in reverse order, making it harder for bots to scrape it while still displaying it correctly to human users. Based on the answer from the AI this technique reduce the spams from the bots by  ~40%-60% .

That’s it. hope you find value in it!

Happy Developing! ✌️