Obfuscate your email

I really like that Bear doesn't have comments, and that implementing them requires manual effort. I also like the "reply via email" approach that I've been seeing around more and more lately, so I've decided to switch my blog to do the same. However, I've had trouble with email addresses visible on the public web getting snatched by bots and peppered with endless spam. Fastmail is really quite good at catching spam email (a little too good, sometimes!), but I still want to reduce my exposure to it. You never know when a more sophisticated attack might sneak through! So I want to do this in way that is more likely to protect from getting snatched by a bot, and I thought I'd share the process.

It turns out that most spam bots aren't all that sophisticated, and if you wanted to write something on your page like: Send an email to me at evie[DOT]fae[AT]mydomain[DOT]com then you don't have much to worry about when it comes to email harvesters. I don't actually like this solution because it introduces too much friction into the communication process. If someone isn't familiar with this kind of syntax then they'll just look absolutely mystified at it, and you won't get your reply. If someone is familiar, then it means that they have to open a new tab or app, and manually type your email address which might end up typoed. And you still may not get your reply. In linguistics terms, this is not compatible with the principles of relevance, and is bad communication practice.¹

Imperfect gives a good rundown of how to add a reply link to the bottom of your post, by using the mailto: URI. This is the way I want to go as well. It's more courteous to my readers, and in my view is more in-keeping with the principles of relevance. Having your email available in plain HTML is not a good idea, though. Bots work by grabbing a copy of the HTML of your website, and scanning it for email addresses. You can do this yourself; just right click on your (or any) webpage, click "View Page Source" (or whatever your browser's equivalent thereof is), and search the code for the @ symbol. Your email address is there, ripe for the harvesting.

So how do we add a <a href="mailto:"> tag to our posts without using plaintext HTML? Well, here's where the obfuscation comes in. I roamed around the web a while, trying to find an elegant solution, before I stumbled onto this post by Spencer Mortensen. It's a list of a bunch of different ways of masking your email address, and a report of how effective they are at preventing spam from getting through. It's a good read, and technically interesting as well, if you're so inclined. You might find there's a solution there that works better for you, but I think that HTML entities (part 2.2 in the contents) is the approach I want to use. It uses no JavaScript, doesn't rely on having access to the web server (which we Bear users definitely do not have), and is apparently 100% spam-proof despite its rudimentary nature.

So we just need to take our email address, and run it through an HTML entity converter, such as this one here. It will spit out an absolute mess of characters like so:

Hi! This isn't my email address, but I did want to say that you're looking nice today :)

Then all we need to do is add it to the HTML like this: <a href="mailto:&#x48;&#x69;&#x21;...?subject=re:%20{{ post_title }}">Reply by email</a> and we're off! If you hover your mouse over this link, then you can see in the tooltip that your browser has translated it correctly. But viewing the page source shows that you've still got that mess of characters in your HTML code, preventing email scanners and harvesters from snapping up your address and spamming you with endless "business opportunities."

Happy blogging, and happy obfuscating!

💬 I don't have comments on my blog, but you can reply by email instead!