Hide Email Address from Bots - Keep mailto:
<h2>tl;dr</h2>
<p>Hide email address from bots without using scripts and maintain <code>mailto:</code> functionality. Method must also support screen-readers.</p>
<hr />
<h2>Summary</h2>
<ul>
<li><p>Email <strong>obfuscation without</strong> using <strong>scripts</strong> or contact forms</p>
</li>
<li><p>Email address needs to be <strong>completely visible</strong> to human viewers and <strong>maintain <code>mailto:</code> functionality</strong></p>
</li>
<li><p>Email Address <strong>must not be in image form</strong>.</p>
</li>
<li><p>Email address <strong>must be &quot;completely&quot; hidden from spam-crawlers and spam-bots</strong> and <strong>any other harvester type</strong></p>
</li>
</ul>
<hr />
<h2>Desired Effect:</h2>
<ul>
<li><p><strong>No scripts</strong>, please. There are no scripts used in the project and <strong>I'd like to keep it that way</strong>.</p>
</li>
<li><p>Email address is either <strong>displayed on the page</strong> or can be easily displayed after some sort of user interaction, like opening a modal.</p>
</li>
<li><p>The <strong>user can click on on the email address</strong> which in turn would trigger the <code>mailto:</code> functionality.</p>
</li>
<li><p>Clicking the email will open the user's email application.</p>
<p><em>In other words, <code>mailto:</code> functionality must work.</em></p>
</li>
<li><p>The email address in not visible or not identified as an email address to bots <strong>(This includes the page source)</strong></p>
</li>
<li><p>I don't have an inbox that's full of spam</p>
</li>
</ul>
<hr />
<h2>What does <em>NOT</em> Work</h2>
<ul>
<li>Adding a contact form - or anything similar - instead of the email address</li>
</ul>
<p><em><strong>I hate contact forms</strong>. I rarely fill up a contact form. If there's no email address, I look for a phone number, and if that's not there, I start looking for an alternative service. I would only fill up a contact form if I absolutely have to.</em></p>
<ul>
<li>Replacing the address with an image of the address</li>
</ul>
<p>This creates a <strong>HUGE</strong> disadvantage to someone using a screenreader (<strong>please remember the visually impaired in your future projects</strong>)</p>
<p>It also <strong>removes</strong> the <code>mailto:</code> functionality unless you make the image clickable and then add the <code>mailto:</code> functionality as the <code>href</code> for the link, but that <strong>defeats the purpose</strong> and now the email is visible to bots.</p>
<hr />
<h2>What might work:</h2>
<ul>
<li><p>Clever usage of <code>pseudo-elements</code> in <code>CSS</code></p>
</li>
<li><p>Solutions that make use of <code>base64</code> encoding</p>
</li>
<li><p><strong>Breaking up</strong> the email address and spreading the parts across the document then putting them back together in a modal when the user clicks a button (This will probably involve multiple <code>CSS</code> classes and the usage of <code>anchor tags</code>)</p>
</li>
<li><p>Alterting <code>html</code> attributes via <code>CSS</code></p>
</li>
</ul>
<p>@MortezaAsadi gracefully brought up the possibility in the comments below. This is the link to the full - The article is from 2012:</p>
<p><a href="http://andydavies.me/blog/2012/08/13/what-if-we-could-use-css-to-manipulate-html-attributes/" rel="nofollow noreferrer">What if We Could Use CSS to Alter HTML Attributes?</a></p>
<ul>
<li>Other creative solutions that are beyond my scope of knowledge.</li>
</ul>
<hr />
<h2>Similar Questions / Fixes</h2>
<ul>
<li><a href="http://joemaller.com/js-mailer.shtml" rel="nofollow noreferrer">JavaScript: Protect your email address by Joe Maller</a></li>
</ul>
<p>(This a great fix suggested by Joe Maller, it works well but it's <strong>script based</strong>. Here's what it looks like;</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;SCRIPT TYPE="text/javascript"&gt;

  emailE = 'example.com'

  emailE = ('yourname' + '@' + emailE)

  document.write('&lt;A href="mailto:' + emailE + '"&gt;' + emailE + '&lt;/a&gt;')

&lt;/script&gt;

&lt;NOSCRIPT&gt;

  Email address protected by JavaScript

&lt;/NOSCRIPT&gt;</code></pre>
</div>
</div>
</p>
<ul>
<li><p><a href="https://stackoverflow.com/questions/12592363/looking-for-a-php-only-email-address-obfuscator-function">Looking for a PHP only email address obfuscator function</a></p>
<p>(A Clever solution using both <code>PHP</code> and <code>CSS</code> to first <strong>reverse</strong> the email using PHP then <strong>reverse it</strong> back with CSS) A very promising solution that Works great! But it's <strong>too easy to solve</strong>.</p>
</li>
<li><p><a href="https://stackoverflow.com/questions/4098408/is-it-worth-obfuscating-email-addresses-on-the-web-these-days">Is it worth obfuscating email addresses on the web these days?</a></p>
</li>
</ul>
<p>(JavaScript fix)</p>
<ul>
<li><a href="https://stackoverflow.com/questions/748780/best-way-to-obfuscate-an-e-mail-address-on-a-website/748805#748805">Best way to obfuscate an e-mail address on a website?</a></li>
</ul>
<p><strong>The selected answer works</strong>. It actually works really well. It involves encoding the email as <code>html entities</code>. Can it be improved?</p>
<p>Here's what it looks like;</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;A HREF="mailto:

&amp;#121;&amp;#111;&amp;#117;&amp;#114;&amp;#110;&amp;#097;&amp;#109;&amp;#101;&amp;#064;&amp;#100;&amp;#111;&amp;#109;&amp;#097;&amp;#105;&amp;#110;&amp;#046;&amp;#099;&amp;#111;&amp;#109;"&gt;

&amp;#121;&amp;#111;&amp;#117;&amp;#114;&amp;#110;&amp;#097;&amp;#109;&amp;#101;&amp;#064;&amp;#100;&amp;#111;&amp;#109;&amp;#097;&amp;#105;&amp;#110;&amp;#046;&amp;#099;&amp;#111;&amp;#109;

&lt;/A&gt;</code></pre>
</div>
</div>
</p>
<ul>
<li><a href="https://superuser.com/questions/235937/does-e-mail-address-obfuscation-actually-work">Does e-mail address obfuscation actually work?</a></li>
</ul>
<p>(The selected answer to this SuperUser question is great and it presents a study of the amount of spam received by using different obfuscation methods.</p>
<p>It seems that manipulating the email address with <code>CSS</code> to make it <code>rtl</code> does work. This is the same method used in the first question I linked to in this section.</p>
<p>I am uncertain what effects adding <code>mailto:</code> functionality to the fix would have on the results.</p>
<ul>
<li>There are also many other questions on <a href="https://stackoverflow.com/search?tab=newest&amp;q=Email%20Address%20Obfuscation">SO</a> which all have similar answers. I have not found anything that fits <strong>my desired effect</strong></li>
</ul>
<hr />
<h2>The Question:</h2>
<p>Would it be possible to <strong>increase the efficiency</strong> (ie as little spam as possible) of the email obfuscation methods above by <strong>combining two or more of the fixes (or even adding new fixes)</strong> while:</p>
<p><strong>A- Maintaining <code>mailto:</code> functionality; and</strong></p>
<p><strong>B- Supporting screen-readers</strong></p>
<hr />
<p>Many of the <strong>answers and comments below</strong> pose a very good question while indicating the impossibility of doing this without some sort of <code>js</code></p>
<p>The question that's <em>asked/implied</em> is:</p>
<blockquote>
<p>Why not use <code>js</code>?</p>
</blockquote>
<p>The answer is that I am allergic to <code>js</code></p>
<p>Joking aside though,</p>
<p>The three main reasons I asked this question are:</p>
<ul>
<li><p>Contact forms are becoming more and more accepted as a replacement
for providing an email address - which they should not.</p>
</li>
<li><p>If it <strong>can be done</strong> without scripting then it <strong>should be done</strong> without
scripting.</p>
</li>
<li><p><strong>Curiosity:</strong> (as I am in fact using one of the <code>js</code> fixes currently) I wanted to see <em>if discussing the matter would lead to a better way of doing it.</em></p>
</li>
</ul>