How to reverse an email address for obfuscation

In an attempt to obfuscate the email address, I would like to reverse the email address shown in the code.

The idea is to populate the page using the reverse email address and show the correct email address using CSS.

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

At the moment, I am at the stage where the code shows the correct email address and the browser shows the reversed address. What I need is to retrieve the reverse email address from the server.

This is what I envisage the outcome to be

This works in set value:


Siddhant, I was so close. I used double quotes, which did not work, and gave up.

Thank you for your input, much appreciated.

1 Like

I saw this post a while back and now is time to leverage it.
I tried to emulate your trick but I fail at the mailto: function.
Set value won’t accept {{'mailto:'}} whether i set it to text or html type.
But maybe I misunderstood the purpose of this email obfuscation system? Does it mislead bots to click on the button whose mailto returns the wrong reversed email?

That is one of the caveats. The html code for the email is reversed so the mailto won’t work.

I haven’t tried this but you could maybe add an onclick event with a prevent modifier on the anchor and run a window.location with the right mailto by reading the target attribute and reversing it again.

This may help:


1 Like

Thanks Ben I did try the syntax you shared in your first post but set value does not save the value in the right format:

I tried this input in ‘text’ , ‘html’ and ‘json’ code mode.
Ben didn’t you publish a video tutorial that shows this email setup?

How sweet of you buddy Jon…
But I’m no expert enough in php coding to follow what you’re recommending. I use wappler’s no code features to their full potential. Window.location (abt URL and redirect to new page?) is too foreign to me and I don’t understand its use in my current email setup.

1 Like

Hello @Teodor
Do you know the correct syntax for having Ben’s suggested {{'mailto:'}} in a setValue?

Weirdly I managed to get this by copying it like you have directly into the value (not going into the binds area etc) and then click away from the set value step

Just something to try

1 Like

We found out a way to do it. Let me share the method.

But first, the reasoning behind it.
We have our correct email address (fetched from a database or any variable…).
We want this email address to be reversed - via reverse() - and fed to mailto: so that bots get a wrong address value when they click on the email address.
But we also want our email address to be displayed correctly on the page, by using a css trick that reverses the reserved email value.

Create an API (named ‘emailReverse’ in our example) in server action to query the concerned email address (from a database in this example).

In your page or footer, create a server connect to call the emailReverse API.

Add this class to your style.css or to your footer if that works for you. This class will be applied to the email address later for the correct display (thanks @ben for this).

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

In your page or footer, double click inside the paragraph where your email is to be displayed and select the lightning bolt:

Select the email value fetched from your DB by the emailReverse API action, which you find in your server connect then click Select.

Right now your correct email address is displayed on the page.

Now is the key step: we need to reverse this email so that the mailto: function we are going to use returns a wrong email address value to bots.
With the email on the page selected:

  • split each letter contained in the email address so all letters are dissociated,
  • this creates an array of letters that enables us to do the reverse function (does not work on a single string of characters),
  • then once the split characters are reversed, we join them back so they become a unique string of characters again.

In order to do that, open Dynamic Attributes of your email link, select Links in the left submenu and click Link then Select. Then write mailto: in the Link field then click data binding.

and select the email value from your server connect:

Click the data formatter on the right:

And right click on the email value.

First select split from the Manipulation menu then Select button.

Switch to code view and add .reverse() at the end of the code.


Then data formatter on the right again where you right click on Reverse and select join from the array menu:

You end up with this code:

NOTE: If wappler asks you to specify the characters in the parameter properties when using split and join, then just write the following code instead in the code view window: 'mailto:''').reverse().join('')

Click select to validate and save. You see your final dynamic attribute value now:
Now the mailto: value is the reversed email address, which is the intended result so the bots that click the email get the wrong address. Mission accomplished.

But we do need to display the right email address to our genuine visitors. Scroll back up the properties panel where you add the reverse class we defined earlier:

Now your email address, whose value remains revered inside mailto: thanks to the dynamic attributes, has a normal display on your page thanks to the css reverse class.

I hope that is clear for everyone.

Lot easier way to do it here (not JavaScript either).

Newer spambots will see through the CSS method, infact some are remarkably advanced! We used CloudFlare to obfuscate E-mail address’s that were on public facing sites, never suffered spam, but for those who don’t use CloudFlare the above works really well. We have a Client who had constant issues with spam and the above link stopped it once a new address was used to replace the compromised address (we could not convince this Client to switch hosts, reference to my edited addition below).

I must add, don’t use an address like info@ or admin@ as most scripts, once they locate a site, have a list of common address’s that automate sending of unsolicited mail to… Therefore if these common address strings are used, regardless of what you do, you will get spammed!

Further. Most hosts implement multiple blacklists that stop the spam before it even gets to your mailbox… Standard practice. These lists are updated by the second, we know we incorporated them as a hosting provider. If your host does not do this then maybe its worth going with another…? If they can’t stop spam what else do they fail to stop…

1 Like

Thanks for this!
But Pls let me understand this

The email is “encrypted” isn’t it?
But why would a human get the right email address and not a bot when they would both do the same thing which is clicking on the email address?

Trouble is Fred there are many types of bots, some use OCR, others more akin to a harvesting approach, others just scan for domains and operate from a dictionary, some are simple, others very advanced, and now with AI I’d imagine some are utilising that approach too.

Regarding your above question, if the bot is seeking a mailto string it would find it, same as any other, but the address is far from plain text so would probably drop it (length of the subsequent address string being a factor, probably exceeds the length for storage). That is of course an assumption on my part, but from personal experience we know it works and works well. Sometimes its easy to over complicate things with little to no benefit over selecting the simple route in the first place. No need to hire a team of engineers, interior designers, and architects, to bang in a nail, when you can simply use a hammer.

My suggestion is simply an alternative approach. Not the de-facto solution. Entirely up to the individual as to what approach they select.

1 Like

But what about humans?
They’d get the same odd long string when they click the email address, no?

If they click on the address their mail client will open with the correct address. Try it, add it to a page, hover over the link, look in the bottom left and you’ll see the (or whatever address you entered).

1 Like

Using the reverse method and a bit of Wappler magic, this is what my email link looks like:

<button class="btn reverse" dmx-on:click="browser.goto(">{{}}&nbsp;<i class="fa fa-envelope-o"></i></button>

Using HTML entity numbers, the same looks like:

<a href="mailto:&#98;&#101;&#110;&#64;&#112;&#108;&#101;&#121;&#115;&#105;&#101;&#114;&#46;&#99;&#111;&#109;&#46;&#97;&#117;">&#98;&#101;&#110;&#64;&#112;&#108;&#101;&#121;&#115;&#105;&#101;&#114;&#46;&#99;&#111;&#109;&#46;&#97;&#117;</a>

There is still a mailto to be seen.

1 Like

Like I said not here to judge one way or the other, just the time it takes, and complexity, to implement a solution. I’m not one to try and overly complicate things. I simply don’t have enough time.

Also simple to use the Mailer component built in to Server Connect, with ReCAPTCHA, and have a contact page, thus removing the need for a public facing address all together. Lots of choices, which is always good, regardless…

1 Like

CAPTCHA is good but I saw here threads about honeypot along with the fields of a contact form.
So which is more efficient and better UX, captcha or honeypot?