Naseki/writings/encoded-email
  • Light
  • Solar
  • Dark
  • OLED
  • Remedy
  • JetBrains Mono
  • IBM Plex Sans

TIP: Never leave your email address raw in the mailto link! Here's what to do instead

It's a common beginner's pitfall to simply insert your email and leave it at that. Let's talk about how to do it the right way!

TIP: Never leave your email address raw in the mailto link! Here's what to do instead

You can also read this post on dev.to.

Usually, when you leave your email address on your website for people to click on, you may do something like this:

HTML
<a href="mailto:name@example.com">name@example.com</a>

Right?

This is, however, the perfect recipe to get spam into your email!

This is how email harvesting works

In order for spambots to get a nice long list of emails to annoy people to click their suspicious-looking links, they use email harvesters to curate these lists. Emails are typically found on websites where people leave theirs to be contacted.

Some people think this is easy to solve simply by masking the email like name[AT]example[DOT]com. This, however, doesn't solve anything due to two things:

  1. The mailto link still contains the actual email address as you can't replace it with the one above. Since email harvesters look into the source code of your website, they'd still be able to get your email.
  2. Most email harvesters are advanced enough to detect common patterns like [AT] and (AT) and such, so they won't do much.

So, what now?

Encode your email address

Fortunately, there's a way to make your email address unreadable for email harvesters!

You may have seen characters like &amp; and &gt; in HTML before. These are called HTML entities. These are symbols that have been encoded so they won't be mistaken for HTML tags.

However, what not many people know is that you can encode every single character into an HTML entity. And even better, putting these into your hrefs will convert them back into regular text for normal visitors that are visiting your website rather than looking at the source code. It's perfect for this situation!

HTML entities for regular letters are made of HEX encoding. The HTML entities would look like like &#HEXCODE;

Let's do it!

Use this handy toolto convert! Make sure to copy the entire href link, not just your email address!

Example screenshot of how to convert the link
Example screenshot of how to convert the link

After that, copy-paste that string into your href and you're done! Here's how it should look like:

HTML
<a href="&#x6d;&#x61;&#x69;&#x6c;&#x74;&#x6f;&colon;&#x6e;&#x61;&#x6d;&#x65;&commat;&#x65;&#x78;&#x61;&#x6d;&#x70;&#x6c;&#x65;&period;&#x63;&#x6f;&#x6d;">My email</a>

This makes the whole thing a lot harder to decypher for most email harvesters. That, while still keeping the link clickable for others! On top of that, using inspect element to check the HTML gives you the decoded email, even though the source code has it encoded!

Comparison of devtools and source code
Comparison of devtools and source code

This means that it still ends up being readable for humans.

It's even better if you use some non-traditional way of masking your email address in the actual text, or just don't use your email at all (like in the sample above).

We're all good now! No more disappointments that you think you just got a client but it turns out to be spam!

Thanks for reading! 💻

If you wanna stay up to date with dev, subscribe to my newsletter! I send a couple of articles and resources once a week and will let you know when I've written a new article as well.

Not sure if it's for you? Read a sample newsletter here!

image
image

If you wanna stay up to date with dev, subscribe to my newsletter! I send a couple of articles and resources once a week and will let you know when I've written a new article as well.

Not sure if it's for you? Read a sample newsletter here!