Skip to main content

Disable CloudFlare email obfuscation in CSS code blocks

01 Jun, 2014

On RoaringApps.com I've used CloudFlare for a couple of years to add an additional layer of security, as well as to reduce server load.

CloudFlare has a feature to obfuscate email addresses, protecting them from bots with malicious intentions. I've had this featured enabled from the get go, and it has been working in the background (I hope) ever since.

However, today I looked at the blog post on retina images I made a couple of weeks ago and noticed this:

span {  
  background-image: url('/img/hamburger.png'); 
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
  span {
    background-image: url('/img/hamburger@2x.png
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
');  
    background-size: 20px 14px; 
  }
}

At first I couldn't work out how that javascript had made its way into the SASS code snippet. Looking at the source code revealed nothing and everything was normal in the Ghost writer. It was the getAttribute('data-cfemail') that finally tipped me off. obfuscate

Turns out CloudFlare's email obfuscation was catching the "hamburger@2x.png" in the SASS snippet, and was trying to hide it from bots.

So how do we get around this? Thankfully CloudFlare have an option to disable obfuscation for only a particular section of code using the following HTML comments.

<!--email_off-->  
... SASS code snippet ...
<!--/email_off-->  

And with that, the SCSS snippet containing "@2x.png" displays properly again.

Comments
comments powered by Disqus

RoaringApps crowd-sources real-time application compatibility information for macOS, iOS and Windows.

Recent blog posts