April 18, 2017, Obfuscating Email Addresses
Hide Those Email Addresses from the Spammers!
This post discusses two concepts:
A: For viewer convenience, when you absolutely must have a ‘mailto:..’ email link visible on your website
B: Remove all email addresses and use forms only
A: email addresses on website, how to protect them?
If your email address is visible on a website, then it is scrapable – where the hacker robots crawl the web looking for any email address and adds it to a list to be sold to the spammers.
Trying to outsmart the scrappers is a challenge and a cat & mouse game with pros and cons for every possible solution.
There are ways to “obfuscate” the address – i.e. disguise it to the scrappers, but still keep it visible and user friendly to the end user. The effectiveness of these techniques is debatable. Maybe they help somewhat, but nothing is 100% secure.
When a viewer sees a link to email someone, they expect that on-click, their email client will open with the recipient’s email address already in the “To” field. This is user-friendly as the viewer has the least amount of hassle. However, techniques to hide the email address from scrapers invariably make it harder for the viewer (or potential customer) and they may balk and just think “forget it”.
Tricks that require the viewer to do something:
- Spelling out the address:
avo@avo.com becomes avo[at]avo[dot]com
Many viewers might not bother to open their email client and rewrite the address by hand. They have to work! - Modify the email address and include instructions for the viewer to end up with the correct address:
avo@avo.com becomes avo@myshirtavo.com. Instructions might be “Email me, but remove my shirt first”! - Simple instructions without any link:
“To email me simply use my first name at this website”. This is assuming your first name is obvious, and viewers know not to include any “http” or “www” after the @ sign. - Use an image file of the email address, with or without distorting the letters:
Not foolproof as sophisticated scrappers can OCR the image. Also not user-friendly if the distortion is excessive, and not readable by screen reading software used by the visually impaired.
None of these solutions look professional, and are not really recommended!
Using a CSS to ‘display none for part of the address:
The CSS:
<style type=”text/css”>
p span.displaynone {
display:none;
}
</style>
The HTML:
avo@<span class="”displaynone”">null</span>avo.com
(Doesn’t work in WordPress! Although the CSS idea is interesting, it’s not fool proof.)
Using character entities to replace the letters. avo@avo.com is coded as:
<a href=’mailto:avo@%61vo.com’>avo@avo.com</a>
Live example:
avo@avo.com
Using character entities with Javascript:
<script>document.write(‘<‘+’a’+’ ‘+’h’+’r’+’e’+’f’+’=’+”‘”+’&’+’#’+’1’+’0’+’9’+’;’+’a’+’i’+’l’+’&’+’#’+’1’+’1’+’6’+’;’+’&’+
‘#’+’1’+’1’+’1’+’;’+’&’+’#’+’5’+’8’+’;’+’a’+’v’+’o’+’&’+’#’+’6’+’4’+’;’+’&’+’#’+’3’+’7’+’;’+’6’+’1’+
‘v’+’&’+’#’+’1’+’1’+’1’+’;’+’&’+’#’+’4’+’6’+’;’+’&’+’#’+’9’+’9’+’;’+’o’+’m’+”‘”+’>’+’&’+’#’+’9’+’7’+
‘;’+’v’+’o’+’&’+’#’+’6’+’4’+’;’+’a’+’&’+’#’+’1’+’1’+’8’+’;’+’o’+’&’+’#’+’4’+’6’+’;’+’c’+’&’+’#’+’1’+
‘1’+’1’+’;’+’&’+’#’+’1’+’0’+’9’+’;’+'<‘+’/’+’a’+’>’);</script><noscript>[Turn on JavaScript to see the email address]</noscript>
Although these obfuscation methods will block a lot of scrappers, nothing is guaranteed.
WordPress plugins:
- https://wordpress.org/plugins/obfuscate-email/
- https://wordpress.org/plugins/email-address-encoder/ (Look at FAQ)
- https://wordpress.org/plugins/wp-mailto-links/ (look at shortcodes)
- https://codex.wordpress.org/Function_Reference/antispambot
- https://developer.wordpress.org/reference/functions/antispambot/
B: Forms:
Using “Contact Us” forms is currently the preferred method to invite viewer interaction. However, there can be reluctance to “bother with” filling out a form, and clicking the ‘submit’ button. If the website is built on a CMS system such as WordPress, many form plugin’s are available. If the website is made with static HTML files, then a programmed form will need to be used. All forms require some customization.
WordPress form plugins:
- wordpress.org/plugins/search/forms/
- wordpress.org/plugins/ninja-forms
- wordpress.org/plugins/contact-form-7
Hand coded:
Other useful links:
- https://blogsitestudio.com/protect-email-address-hackers-spammers/
- http://wbwip.com/wbw/emailencoder.html (Generate code)
- http://www.email-obfuscator.com/
- https://superuser.com/questions/235937/does-e-mail-address-obfuscation-actually-work
As seen on wordpress.org:
There are some plugins that do this work automatically in posts and pages. For instance Pixeline’s Email protector provides a human-friendly solution that protects any mailto: link of plain email addresses inside posts and as a theme function, or Email Address Encoder which converts all plain email addresses and mailto links into decimal and hexadecimal entities. Another one is CryptX. There are some drawbacks as if it’s not properly configured, they might mess with contact form where users introduce email addresses (if they make some mistake and the form is refilled and re-filtered). A less automated approach is that of Slash Admin, which has an option for including disguised email addresses in posts and pages via shortcodes (using the antispambot() function).
Unrelated but Interesting info about fishing attacks
https://www.wordfence.com/blog/2017/04/chrome-firefox-unicode-phishing/