Why do mailto links end up creating a crazy mess of javascript when published to the front-end?

created

Soapbox "cloaks" emails by breaking them up into Javascript statements, so that spambots aren't able to grab them and add them to spam lists.

Usually, the "cloaked" version of an email address will look something like this:

<script language='JavaScript' type='text/javascript'>
 <!--
 var prefix = 'm&#97;&#105;lt&#111;:';
 var suffix = '';
 var attribs = '';
 var path = 'hr' + 'ef' + '=';
 var addy38642 = 'x&#97;xb&#101;xtw&#111;xkpx&#97;c&#101;s' + '&#64;';
 addy38642 = addy38642 + 'xx&#101;&#97;xxx&#97;x&#101;t&#111;x&#111;rk' + '&#46;' + 'c&#111;m?s&#117;bj&#101;ct=ASK%20GPTW';
 var addy_text38642 = 'Ask GPTW';
 document.write( '<a ' + path + '\'' + prefix + addy38642 + suffix + '\'' + attribs + '>' );
 document.write( addy_text38642 );
 document.write( '<\/a>' );
 //-->
 </script><script language='JavaScript' type='text/javascript'>
 <!--
 document.write( '<span style=\'display: none;\'>' );
 //-->
 </script>This e-mail address is being protected from spambots. You need JavaScript enabled to view it
 <script language='JavaScript' type='text/javascript'>
 <!--
 document.write( '</' );
 document.write( 'span>' );
 //-->
 </script>

 

Crazy, right?  But Soapbox knows how to work with the browser to reassemble that into a sensible email address.

However, spambots don't!  So, the email address remains hidden from them, and they can't vacuum it up and add it to their spam lists.

However, you can run into a problem if you add any formatting to the html code *inside* of the <a> tag.

For example, if you have something like this:

<a href="mailto:youremail@awesomeorg.org"><strong>Ask GPTW</strong></a>.

The <strong> opening and closing tags are *inside* the <a> tag.  That confuses Soapbox when it tries to create the javascript cloaking code.

So if that's what is happening to you, take a careful look at your html.  You probably have something there either in or in-between the <a> tags that is causing the problem.

The correct way to format the above would be like this:

<strong><a href="mailto:youremail@awesomeorg.org">Ask GPTW</a></strong>

With the <strong> tags *outside* of the <a> tag.

Have more questions? Submit a request
Article is closed for comments.