Stop Email Spam with Obscure.js (Hide Your Email Address From Spammers)

Did you know that spambots scan websites looking to harvest emails all the time. I didn’t. At least, not starting out.

When I first started programming, I didn’t know that it was a bad idea to hardcode email addresses into my HTML. Needless to say, I got a lot of spam. Lots and lots of it.

When I first started looking around for a solution, this was what I found:

    
<script>

	let user = 'name';
	let site = 'domain.com';
	document.write('<a href="mailto:' + user + '@' + site + '">');
	document.write(user + '@' + site + '</a>');
  
</script>
    
  

It worked great. Or, so I thought.

If you’re paying attention, you may immediately spot what’s wrong.

It’s document.write.

And since, it’s a common solution still offered today, I didn’t have much options.

So, I wrote a plugin…

Obscure.js

Obscure.js is a lightweight script that obscures — or hides — email addresses and telephone numbers from spammers.

How Does It Work?

Obscure.js uses data-attributes on the <template> tag to generate email addresses and telephone numbers.

This is a great approach because the <template> tag is a non-semantic element designed specifically to render it’s content with Javascript. When Javascript isn’t available, the content in our <template> tag isn’t rendered and we get a quiet fail.

Attributes

The obscure data-attribute is required on the <template> tag in order to work.

Values for email addresses and numbers utilize the data-pX data-attribute, wherein X represents an integer (i.e. data-p1="val",data-p2="val").

ID and class attributes can also be added to <template> tags.

    
<template id="val"  class="val" data-p1="val" data-p2="val" obscure></template>
    
  

Patterns

Patterns are determined by the content configuration nested in the <template> tag.

To call a value in a pattern use %X wherein X represents a corresponding integer (i.e. %1, %2).

    
%1@%2
    
  

To add an email address, create a <template> tag with the following attributes:

• data-p1
• data-p2
• obscure

The data-p1 data-attribute will contain the username and data-p2 the relevant domain (i.e. “hotmail.com” or “mycustomurl.com”).

    
<template obscure data-p1="hello" data-p2="example.com">
  <a href="mailto:%1@%2">%1@%2</a>
</template>
    
  

This will render the following:

    
<span><a href="mailto:hello@example.com">hello@example.com</a></span>
    
  

Adding telephone numbers

There’s not only a need to hide emails, but phone numbers, as well.

To add a US pattern telephone number, create a <template> tag with the following attributes:

• data-p1
• data-p2
• data-p3
• data-p4
• obscure

The data-p1 data-attribute representing the country code, data-p2 the area code, data-p1 the prefix code and data-p4 the line code.

    
<template obscure data-p1="+1" id="test2" class="test1" data-p2="481" data-p3="914" data-p4="1124">
	(%2) %3-%4
</template>
    
  

This will render the following:

    
<span>(481) 914-1124</span>
    
  

If not already apparent, Obscure.js allows numbers to be rendered in any pattern, as well.

    
<template id="france" class="french pattern" data-p1="+33" data-p2="1" data-p3="22" data-p4="33" data-p5="44" data-p6="55" obscure>
  <a href="tel:%1%2%3%4%5%6">%1 %2 %3 %4 %5 %6</a>
</template>

<span id="france" class="french pattern"><a href="tel:+33122334455">+33 1 22 33 44 55</a></span>
    
  

Initialize Obscure.js

Just before the closing </body> tag, include the obscure.js external script and initialize:

    
<script src="/path/to/obscure.min.js"></script>

<script>
  var obscure = new Obscure();
</script>
    
  

Special Thanks

A special thanks to Jordin Brown over at Cognetif for his help on this project.