It’s not often that you learn something from spam, besides that there are an extraordinary number of generous Nigerians (replete with theme song) and amazing number of variations in the spelling of viagra. Yet, I recently got spam where the offer was written in pristine English: no numbers replacing letters, no images, and no misspellings. How had such a brazen piece of spam got through my filters? The answer, it turns out, was some clever CSS that caused the HTML markup to be garbled but its visual rendering to be readable. I’ll show you how to use this for both good and evil.

The Good

Using CSS to obfuscate HTML can be used to protect your email address in a quick-as-you-type way. No need for unwieldy inline images or arcane Javascript functions. For example, here’s my email address:

azSPAMa@moREMOVEzilla.com This email address cannot be copy and pasted. Try it.

Notice that it appears to be in normal, selectable text. Don’t be fooled by appearances. Copy and paste it. You’ll get the following: azSPAMa@moREMOVEzilla.com, which is easy for a human to fix but difficult for a bot. How does it work? Here’s the sample code:

<style>
.z{
  float:right;
  font-size:.001px;
  color:transparent;
  display:inline-block;
  width:0px;
  }
</style>

...

az<span class="z">SPAM</span>a@mo<span class="z">
REMOVETHIS</span>zill<span class="y">a.c</span>om

This takes anything marked with the class z and visually hides it, leaving only the email address rendered as if nothing was amiss. When you go to copy my email address, however, the browser doesn’t see the garbage text as hidden and so it gets selected along with my email address. This is the same way that your DNA protects itself, by hiding the real information in a huge amount of noise. It would be difficult for a scraper to even know that there was an email address there, let alone implement a program that understands CSS well enough to parse it out: there are a semi-infinite number of ways to use CSS to make text visually disappear. If you wanted to get really tricky, you can add multiple classes to each little span; because CSS cascades and inherits it becomes very hard to know, without just looking at the results, what the text will end up saying.

Foiling spammers with a bit of their own medicine brings a smile to my lips.

The Bad & Evil

Besides spammers using this trick to get around your Bayesian spam filters, there are other bad things for which this can be used. This first is for that misguided holy-grail of publishers: copy-protection for their words. A publisher could generate, on the server side, a new random mess of HTML and CSS that would render their text uncopyable. This also has the side-effect of making your pages impossible for search engines to index sensibly; it’s an easy way to keep your information human-readable but cloaked from Google’s all-seeing Sauronic eye.

Here’s a simplified example of how a publisher might use this:

mTheIismM trpexsmt aEiscy uexnc nopiNyanxblaie.vk KnAeiLAthev Roaup zerant dwMutnrde.oc‘mh eswaaIs svbo LrnsB inyn .MehMlbilou Crnnae wGineo 1gx93 z1.oC Advt vothlae pBtiavmefI, rGhi rs fkfaizthsherld, nGKetxitarh MMuourdlyoc rh,es wdkasle avE rryegdlioblna ml iFnelzwsTEpaaqpe ar eomaezgnrvathbe robaBfseasd cmou yt aIof P MizelrwbopIursOneih a vndhO ayNs rIa Hrel.suoPltun tiphegt ftnameGilrLy kvwaozs lMwedfalevthtMy. n Reeupeuerost fwa hs oAgrmdooomme Ed npbyul hisis F fhwattFhecHr uzfrdAombM a Jn eneaiqrleOy eMag ze,yp apwndlx w.venest msofrof sptoaL scatueudy b piGhinploaasovqphnFy,Ld peNolotit Micads dkant d etec‘LoneHomazicsas natsp Onyxf .orhrd ieUn civnPerwksieytygF i vn owEndnglvcanlcd.p

The other evil thing this could be used for is phishing attacks. Sometimes you run across a URL unlinked on a web page. To go there, you copy and paste it into your location bar. In fact, we are often told that the only way to really trust a website’s location is to put it there yourself. Try copy and pasting this URL into your location bar:

http://facebook.com.evil.comThis URL will phish you if copy-and-pasted into the location bar.

While you think you copied one url, it directs you to an entirely different, evil URL. While this particular example is easy to detect for pedagogical reasons, you can use all of the standard phishing methods of disguising a URL to make it look more legitimate.

Brainstorm

I’m sure there are other good and bad things you can do with this technique—these are the ones I came up with in a couple minutes. What are your ideas?

RT @azaaza How To Phish, Protect Your Email, and Defeat Copy-And-Paste with CSS | Follow @azaaza on Twitter | All blog posts

No related posts.