Introduction

Sharing email address as a plain text is not the best idea as it can be parsed by web crawlers. Unfortunately our email inboxes get bombarded with spam every day, often because we share our email address on so many places. So why would I make it easier for spamers. I will show you quite simple way how to make it harder to steal your email address programatically.

Solution

Solution is to write email backwards and then revert it with css direction property so it renders normaly. On top of that I use javascript to write this reversed email, because basic crawlers do not support javascript 😉

In snippet bellow you can see css class, that reverses text and because the reversed text is just rendered backwards, but "physically" is still writen backwards, it’s good to disable user from selecting or right clicking our email address using user-select: none.

In followning html snippet I write our email address link using javascript document.write. As I sad it’s just protection againts bots. Bot without js or user with javascript disabled browser would see message enclosed in <noscript> tags: Email address is protected by javascript. Please activate javascript in your browser..

Output in Chrome DevTools:

file

Enable email copiing

One problem with email protected like this is that user can’t copy it. Solution is again very simple. I’ve used cotext menu and bit of a javascript to "unreverse" my email address.

Example output(you can see it live on tomasbouda.cz):

file

First you need to install jQuery and jQuery contextMenu, here are instructions – https://swisnl.github.io/jQuery-contextMenu/#getting-startedOptionaly you can install toastr to show notifications to user – https://github.com/CodeSeven/toastr.

After that you need to add following javascript to your website. It registers context menu on reversed email address link a.reverse. When user clicks context menu, it reverses given email address and copies it into clipboard. See code comments for further info.

Full example:

Last modified: February 27, 2022
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments