Category: How To

CloudFlare’s email protection butchered my code examples.

Just putting that out there.

What Happened?

I went, perhaps ironically, to a post about changing your git repo URLs after activating CloudFlare, and was confused. See, I knew the code was something like me@mydomain.com:/path/to/repo but when I visited the page, it was all gibberish like this:

/* <![CDATA[ */!function(){try{var t="currentScript"in document?document.currentScript:function(){for(var t=document.getElementsByTagName("script"),e=t.length;e--;)if(t[e].getAttribute("cf-hash"))return t[e]}();if(t&&t.previousSibling){var e,r,n,i,c=t.previousSibling,a=c.getAttribute("data-cfemail");if(a){for(e="",r=parseInt(a.substr(0,2),16),n=2;a.length-n;n+=2)i=parseInt(a.substr(n,2),16)^r,e+=String.fromCharCode(i);e=document.createTextNode(e),c.parentNode.replaceChild(e,c)}}}catch(u){}}();/* ]]> */

I quickly edited the post and saw the content there was just fine. The only content that was getting munged was code output. It was very confusing so I googled and found a surprising answer.

What Was Wrong?

Turns out it was “Email Address Obfuscation” — a feature in CloudFlare that munges your email address to protect it from being scraped. In and of itself, that is ultra cool.

I could wrap everything like this:

<!--email_off-->

<!--/email_off-->

Or I could filter all the shortcodes… Or I could turn off “Email Address Obfuscation”

I went with turning off the setting because it was faster, and it’s not like people cant deduce my email address. But if I was going to set it up, the fastest would actually be to filter all shortcodes, and that proved problematic.

Why All?

One of the problems is that I use Syntax Highlighter Evolved to handle my code chunks, and one of the things that plugin does is let me use a shortcode based on the programing language. That means the most efficient way would be to say “If this is a shortcode, wrap it in the email-off tags to tell it to shut up.”

Can You Code It?

This is theoretical and not fully tested. Use at your own risk.

With embeds, you can do things like this:

add_filter('embed_oembed_html', 'halfelf_embed_oembed_html', 99, 4);
function halfelf_embed_oembed_html($html, $url, $attr, $post_id) {
  return '<!--email_off-->' . $html . '<!--/email_off-->';
}

But sadly there isn’t a wrap around like that for shortcodes, which means we have to do some serious filtering. There’s a global array called $shortcode_tags that lists all shortcodes (as you register them, so shall they be added), so I’m going to take that and replace their callback functions with my own. Then in my callback, I’ll keep their callback but at the same time I’ll wrap around it:

function cloudflare_email_off_for_shortcodes() {
    global $shortcode_tags;

    $shortcode_tags[ $tag ] = 'cloudflare_email_off_html';
}
add_action( 'init', 'cloudflare_email_off_for_shortcodes', 99 );

function cloudflare_email_off_html( $attr, $content = null, $tag ) {
    global $shortcode_tags;

    return '<!--email_off-->' . call_user_func( $shortcode_tags[ $tag ], $attr, $content, $tag ) . '<!--/email_off-->';
}

But that struck me as a little expensive when I considered how rarely I put email addresses in things in the first place.