CSS vs. Tables… really?

Wednesday, April 1st, 2009 | Web & Computers | No Comments

This site cracks me up… HEY Stupid! It is a pro <table> rant against CSS.

I remember being pissed back in the day that I was going to have to unlearn <table> based design in favor of some new standard, CSS. That was, like 2000, when there was no reason to trust that standards would mean anything to the browser makers. Yahoo! and most respectable sites back then still used <table>s. In fact there was a time when it was cutting edge. This was about the same time animated GIFs were rocking the internet and onMouseOvers were taking surfers into the new age of interactivity. Jump forward to today, when CSS and clean XHTML are a reality, albeit with occasional <!– IE 6 sucks –> conditional comments.

<table> designer whack-a-mole

<table> designer whack-a-mole

Everything about that HEY Stupid! page is awful… it is an .asp page, the design is terrible - I assumed it was a minimal overjustification of CSS by the look of it, the rant is obnoxious, and the site is trying to sell you web development software!

Sorry for the harsh site review, but when you get arrogant about being wrong, you pop up like a whack-a-mole.

Tags: , , , ,

Simple Email Obfuscator

Wednesday, February 18th, 2009 | Web & Computers | No Comments

After receiving complaints that members of a site I inherited were receiving spam, I began looking into email obfuscation tools. The site runs on a proprietary content management system written in ASP. The only place to enter code is in the “Source” box of the WYSIWYG editor, FCKeditor. Assuming I will be able to insert css and javascript into the head element of pages on the site, I developed a simple email obfuscation script to derail spambots using a combination of techniques.

The techniques I used were based in part on these sites:

This code obfuscates email addresses from spambots using HTML numeric character references, JavaScript and CSS.

The JavaScript <head> include is as follows:

// Encode strings as HTML numeric character references
function charEncode( theString ) {
  var encodedString = '';

  for ( i=0 ; i < theString.length ; i++ ) {
    encodedString = encodedString + '&#' + theString.charCodeAt(i)
      + ';';
  }

  return encodedString;
}

// Linked email address
function emailLink( name, domain ) {
  var mailto = '&#109;&#97;&#105;&#108;&#116;&#111;&#58;'; // 'mailto:'
  var nospam = 'nonexistentemailaddress.com ';
      // or 'NOSPAM' or '@#$)(*' or 'anystring'

  document.write( '<a rel="\"nofollow\"" href="\">' +
    charEncode(name) + '@<span class="\"nospam\"">' + nospam +
    '</span>' + charEncode(domain) + '</a>' );
}

The CSS class for the hidden <span>

.nospam { display: none }

And the javascript function call from HTML

<script type="text/javascript">
<!--
  emailLink( 'name', 'domainname.com' );
//-->
</script>
<noscript>Firstname Lastname</noscript>

It’s important to note the <noscript> for browsers without JavaScript. Obviously, do not include the email address in here, or all of that obfuscation code would go to waste as the spambot can just yank the email address from here. Instead, just include a plain text description that makes sense. This is better than the user seeing nothing at all.

In the browser this code would look like: name@domainname.com

To a spambot it would look like: &#110;&#97;&#109;&#101;&#64;&#110;&#111;&#110;&#101;&#120;&#105;&#115;&#116;
&#101;&#110;&#116;&#101;&#109;&#97;&#105;&#108;&#97;&#100;&#100;&#114;&#101;
&#115;&#115;&#46;&#99;&#111;&#109;&#32;&#100;&#111;&#109;&#97;&#105;&#110;
&#46;&#99;&#111;&#109;

The spambot would see this after converting the HTML numeric character codes and not hiding the .nospam <span>:
name@nonexistentemailaddress.com domainname.com

A spambot would have to:

  1. Be able to parse JavaScript
  2. Decode HTML numeric character references to regular characters
  3. Remove the hidden <span>
  4. …And still recognize it as an email address

Additional functions

In the javascript include, there are two additional functions beyond emailLink(’name’,'domain’);

  • emailNoLink(’name’,'domain’); - for a plain text, unlinked email address, with the hidden <span>
    Outputs: name@domain.com
  • emailLinkText(’name’,'domain’,'John Doe’); - for a linked email address with different text in the link, hidden <span> is not needed
    Outputs: John Doe

The Files

It would be a good idea to rename the file names, the CSS class name of the hidden <span> and the nospam variable in the JavaScript, that way spambots will not experience this code the same way repeatedly.

I’ve tested this code with success in the biggies: Windows - IE6, IE7, FireFox 2.0, Firefox 3.0, Google Chrome 1.0, Opera 9.6; Mac - Safari 3.1.2, Firefox 3.0. For a joke, I tested it in IE 5.2 for the Mac and it works. Talk about a horrible browser, that garbage program mangles its own default page of MSN.com, lol. I’d be interested to see if this bugs out in any other browsers, so let me know how this code works out for you and whether there should be any modifications and or enhancements.

Issues:

  • If JavaScript is not enabled, the email address is not accessible.
  • With a screen reader or no CSS support, the NOSPAM <span> will appear. Hopefully this text is obvious as a spam deterrent and end users will delete the extraneous text.

Potential enhancements:

  • Encode to numeric character references at random
  • Integrate with server side language and add auto <noscript>

Tags: , , , ,

Categories