Email obfuscation

Email obfuscation is a way to prevent various bots and crawlers from collecting email addresses from your website and using them to send spam. Mailtrap has a good article on this subject with a roundup of various techniques.

The Cloudflare way

My email on this blog is obfuscated by Cloudflare. When serving my website from CDN, they replace the email address I added in HTML with a string that looks like this:

<a href="/cdn-cgi/l/email-protection#4430212b6a203625232b322d27042329252d286a272b29" aria-label="Contact me">

And they inject small piece of JavaScript that converts it back into readable, clickable mailto link for visitors. I like it since I don’t have to change or do anything special on my end. It’s a one-click option to turn on in Cloudflare settings. And it’s available on their free tier!

The DIY way

The very first iterations of Hugo website featured "about us" section where each team member had their email listed. There I couldn’t use Cloudflare so I did my own obfuscation using some CSS, JS and Nunjucks magic.

First, the HTML/Nunjucks code:

<span class="visually-hidden">{{ email | replace( '@', ' at ' ) }}</span>
<a class="mail js-mail" aria-hidden>{{ email | reverse }}</a>

The first line is intended for assistive technologies. It’s visually hidden but gets read by screen readers. I use Nunjucks native replace filter to both obfuscate and split the email into human-readable parts.

The second line is an anchor for display. It will be hidden from screen readers via aria-hidden tag. Note that it doesn’t have href attribute and email is rendered in reverse (so [email protected] would be displayed as moc.emosewa@olleh).

To make it display normally on screen, I use this bit of CSS:

.mail {
unicode-bidi: bidi-override;
direction: rtl;

By combining unicode-bidi: bidi-override and direction: rtl mail address is reversed back to original. That solves the rendering but clicking the link wouldn’t do anything without the href. To solve that part, we need a bit of JavaScript:

function addMailToHref(selector) {
const links = document.querySelectorAll(selector);

links.forEach(link => {
link.addEventListener('click', event => {
const element =;

if (element.href === '') {
const mailAddress = element.innerText.split( '' ).reverse().join( '' );
return element.setAttribute('href', `mailto:${mailAddress}`);
}, { once : true });


This function finds all links with .js-mail class attached and adds a listener on each one so when clicking the link, inner text gets reversed and set as href value with mailto scheme. Returning this will automatically open default email program.

The { once : true } part is addEventListener option to make sure callback is only called on the first click. If a user clicks the same email link again, proper href would already exist and native behavior kicks in.

What’s missing from this approach is a fallback when JavaScript is disabled. In that case, doing copy/paste of the email will get you a reversed value. One solution is to use .no-js class and display visually hidden mail instead. Or use email encoder.