How to use CloudFlare’s Server-Side Exclude in WordPress

OVERVIEW

This article shows how to use the CloudFlare Server Side Exclude feature to hide data on your web site from bad actors.

BACKGROUND

WordPress adds a lot of information to the <head> … </head> section of your web site that you might not want falling into the hands of bad actors, malicious bots and data scrapers. This data could include your physical address, e-mail addresses, API endpoints, WordPress and plug-in version information, etc..

CloudFlare provides a Server-Side Exclude feature that, if enabled, will dynamically remove content from your web pages if the requester is suspicious. You can do this in the main content of any web page by switching to HTML code mode and enclosing sensitive information with the <!‐-sse‐-> and <!‐-/sse‐-> comment tags. For example:

<!DOCTYPE html>
<html>
	<head>
		<title>My Web Page</title>
	</head>
	<body>
		<!--sse-->Disreputable visitors won't see this<!--/sse-->
	</body>
</html>

But you can’t edit what is in the <head> … </head> section of your web pages using the WordPress editor. To hide almost everything in the <head> … </head> section we will use the methods that themes, plugins and WordPress itself uses to add things to the <head> … </head> section of web pages. This is done using the add_action( ) function and the ‘wp_head’ hook.

The function arguments for add_action( ) that we are interested in are the hook name, the callback function, and an execution priority for the callback function. A lower priority number moves the callback function toward the start of the list of registered callback functions. A larger priority number moves the callback function toward the end of the list. All we need to do then is set a wp_head action callback with priority of zero to output <!‐-sse‐-> close to <head>. Then set a wp_head action callback with large priority to output <!‐-/sse‐-> close to </head>.


HOW TO HIDE HEADER DATA WITH SERVER SIDE EXCLUDES

First, enable Server Side Excludes in your CloudFlare account. You will find this option by clicking on the Scrape Shield button.

Next, add the following code to your theme’s functions.php file.

/**
 * Enclose all header data in CloudFlare Server Side Exclude.
 * @link https://support.cloudflare.com/hc/en-us/articles/200170036-What-does-Server-Side-Excludes-SSE-do-
 */
add_action( 'wp_head', function () {
	echo '<!--sse-->';
}, 0 );

add_action( 'wp_head', function () {
	echo '<!--/sse-->';
}, PHP_INT_MAX );

HIDE IT ALL WITH SERVER SIDE EXCLUDES

What to hide it all from bad actors? We can add the opening <!‐-sse–> tag right after the <body> tag by using the ‘wp_body_open’ hook. Then add the closing <!‐-/sse–> tag right before the </body> tag by using the ‘wp_footer’ hook.

Note that this might not work in older unsupported or custom themes. Your theme must call do_action(‘wp_body_open’); after the <body> tag for this to work.

/**
 * Enclose all header data in CloudFlare Server Side Exclude.
 * @link https://support.cloudflare.com/hc/en-us/articles/200170036-What-does-Server-Side-Excludes-SSE-do-
 */
add_action( 'wp_head', function () {
	echo '<!--sse-->';
}, 0 );

add_action( 'wp_head', function () {
	echo '<!--/sse-->';
}, PHP_INT_MAX );

/**
 * Enclose all content between the <body> ... </body> tags in a CloudFlare Server Side Exclude.
 * @link https://support.cloudflare.com/hc/en-us/articles/200170036-What-does-Server-Side-Excludes-SSE-do-
 */
add_action( 'wp_body_open', function () {
	echo '<!--sse-->';
}, 0 );

add_action( 'wp_footer', function () {
	echo '<!--/sse-->';
}, PHP_INT_MAX );

TESTING

Unless you can use a web browser on an IP address that CloudFlare has designated as “disreputable” on their system, there really isn’t any way to verify that CloudFlare will remove the content between the <!‐-sse‐-> and <!‐-/sse‐-> comment tags.

However, if you view the source code of your web page, you might think that the code shown above isn’t working because you can’t find any <!‐-sse‐-> or <!‐-/sse‐-> comment tags. There is a simple explanation for this, CloudFlare is dynamically removing comment tags as part of it’s delivery optimization. To test your new code additions, disable the HTML Minify setting in your CloudFlare account.

You will find this option by clicking on the Speed button.  Then click the Optimization menu under the button bar.  Next, scroll down to the Auto Minify section.  Then clear the checkbox next to HTML.

Once HTML Minify is disabled, refresh your web browser and view the source again. You should find <!‐-sse‐-> and <!‐-/sse‐-> comment tags. Remember to re-enable HTML Minify when you are finished testing. This will help speed up your web site, which also helps improve your SEO score.

NOTES

The code provided will keep data and functionality from being shared with IP addresses that CloudFlare has judged as disreputable. This may prevent scrapers from collecting your data. But it does not guarantee that data on your web site can’t end up in the hands of bad actors. If you have data you don’t want to share with everyone, then don’t put it on any web sites.