lojjic.net

Friday, January 23, 2004

Accessible Email Obfuscation in XBL

I've been fooling around a lot with XBL recently, and have converted my Accessible Email Obfuscation script into an XBL binding. Here's the binding, which would be saved as an XML file such as EmailLink.xml:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:h="http://www.w3.org/1999/xhtml">
   <binding id="email-address">
      <implementation>
         <field name="email">
            var txt = this.firstChild;
            if(txt.nodeType!=3) txt=txt.firstChild; //if anon. content not supported
            txt.nodeValue.replace(/[ \[\{\(\|\/\\]at[ \]\}\)\|\/\\]/i, "@")
               .replace(/[ \[\{\(\|\/\\](dot|period|point)[ \]\}\)\|\/\\]/gi, ".");
         </field>
         <constructor>
            var lnk = document.getAnonymousNodes(this)[1];
            lnk.setAttribute("href", "mailto:"+this.email);
            lnk.firstChild.nodeValue = this.getAttribute("title") || this.email;
         </constructor>
      </implementation>
      <content>
         <h:span style="display:none"><children /></h:span>
         <h:a href="">-</h:a>
      </content>
   </binding>
</bindings>

Then in your HTML page you would insert the email address in obfuscated form:

<span class="mail">jj/at/lojjic\period\net</span>

And then you attach the XBL binding to that element using CSS:

.mail {-moz-binding:url(EmailLink.xml#email-address)}

The advantage of this approach is that you don't have to include any script in your page, and since it's attached using CSS you have the full power of CSS selectors for choosing which elements it applies to. Of course, it only works in Mozilla (for the time being...)

Posted by Jason at 11:41:23 - [ 5 Comments ]