Webnomads - Resources - Email obfuscation in Webflow

Why you should obfuscate emails on your website

Sharing your email address on your website enables visitors to contact you directly for support or assistance. However, it also gives a perfect opportunity for all the spambots and email harvesters to collect your contact details from source code and overflow your inbox with spam. The biggest thread though it a phishing attacks.

Theoretically, deleting all the contact details and mailto links from your website might do the job for the bots, but maintaining a website where there are no contact details to you seems like a bit counterintuitive way to run a profitable business.

‍

So, what you need is a technology that makes it easy for real people to see email addresses and prevents bots from collecting them.

‍

Enter email obfuscation.

How does email obfuscation work?

Email obfuscation protects your company from phishing attacks and stealing sensitive data from you (or at least makes it much harder).

From a technical point of view, you need to add dummy emails to your website’s HTML code so that bots who want to scrap email addresses from your page are going to see invalid ones. Then, you add the right addresses in JavaScript so that your users are going to see the correct emails.

Who can make use of it?

The bigger the company, the easier it is to find its vulnerabilities. It probably doesn’t make much sense to implement email obfuscation for all your minor Webflow projects, but you can do it for bigger organizations, where you pay extra attention to cyber security.

You should obfuscate all email addresses you have in your project, so it’s worth adding the code to the project settings and using it globally.

By the way, if you’re currently focusing on improving your cyber security in your Webflow projects, you can also read this useful article about form protection with honeypot.

Implementation in Webflow

Find all the email addresses on your website (in terms of use and privacy policy pages as well).
Replace them with dummy emails (e.g. dummy-1@example.com used as a replacement to contact@example.com).
Add a custom code from the next section to your page/project settings. Keep in mind that the addresses in the code section are placeholders and you need to replace them with your real ones.

Code

Below you’ll find an example of a code I generated to build this tutorial (it’s a complete code I added to an embed element on my end)

‍

$(document).ready(function(){
//my email in reverse :)
            var s = 'moc.sdamonbew@olleh';
            var e = s.split("").reverse().join("");
            $('#email-link').html('<a href="mailto:'+e+'">'+e+'</a>');
    });

‍

Are there any more techniques to protect your team from phishing?

If you feel like this method does not work for your business, keep in mind that there are other methods you can use to hide your email addresses from bots.

You could use emails in the form of images instead of text. However, it can also make it more difficult and frustrating for users to copy and paste email addresses.
Instead of displaying an email address on the website, you can use a contact form to allow users to send emails to the website owner. This can be more secure than displaying an email address, but it can also be less convenient for users.

‍

Email obfuscation in Webflow