Protect Email Addresses from Bots with Email Obfuscator

Email Obfuscator is a lightweight JavaScript utility that hides email addresses on web pages to prevent spam bots from harvesting.

It takes a standard email address, encodes it on the client side, and generates an HTML link that is only decoded when a real user clicks on it.

Features:

• Supports base64, hexadecimal, and numeric character encoding options.
• Configure link text, CSS classes, and styling to match your site design.
• Performs all encoding and decoding operations client-side using vanilla JavaScript.
• Maintains standard mailto functionality without compromising user experience.

How to use it:

1. Install Email Obfuscator with NPM and import it into your project.

# NPM
$ npm install gtmrobox/email-obfuscator

import EmailObfuscator from '@gtmrobox/email-obfuscator';

// OR
import EmailObfuscator from './src/emailObfuscator.js';

2. Create a DIV container in your HTML where the obfuscated link will be placed.

<div id="email-container"></div>

3. Call the obfuscate method with your email and any options, and then inject the results into the DOM.

// 1. Call the obfuscate method
const result = EmailObfuscator.obfuscate('[email protected]', {
  linkText: 'Contact Us',
  encodeType: 'base64',
  cssClass: 'obfuscated-email',
});
// 2. Add the generated link to your HTML container
document.getElementById('email-container').innerHTML = result.html;
// 3. Inject the decoding script into the document body
const script = document.createElement('script');
script.textContent = result.script;
document.body.appendChild(script);

4. The obfuscate method returns an object containing the original email, the encoded string, the complete HTML link, and the decoding script. You have to inject both the html and the script for it to work.

5. Available configuration options.

• linkText (string): The text displayed to the user. Default: 'Contact'.
• encodeType (string): The encoding method. Can be 'base64', 'hex', or 'numeric'. Default: 'base64'.
• cssClass (string): A CSS class to apply to the generated <a> tag. Default: 'obfuscated-email'.

6. Our take is that the base64 encoding is sufficient for most use cases. It’s clean and widely supported. Hex and numeric are good alternatives if you have specific requirements or want to vary your approach.

How it works:

When implemented, the library creates a link that looks like this in your HTML:

<div id="email-container">
  <a href="#" class="obfuscated-email" data-email="aXFxODAwQGdtYWlsLmNvbQ==" data-encoding="base64">Contact Us</a>
</div>

When a real user clicks this link, our injected JavaScript decodes the email and redirects to the proper mailto: link. Spam bots scraping your site will only see the encoded string, which is much harder to convert back to a usable email address.

FAQs

Q: Is this 100% bot-proof?
A: No client-side technique is. A sophisticated bot that can fully render a page and execute JavaScript might be able to defeat this. However, this library effectively stops the vast majority of simple, automated email harvesting bots.

Q: Does this affect SEO?
A: The email address itself is not present in the HTML as crawlable text. Search engines that execute JavaScript are able to decode it, but your primary goal here is user interaction, not having the email indexed. The visible link text (Contact Us) is still indexed as normal.

Q: Can I use multiple encoding types on the same page?
A: Yes, you can mix different encoding types across multiple email addresses on a single page. Each obfuscated link includes its own encoding type in the data attributes, so the decoding script handles each link appropriately regardless of the encoding method used.