Restrict access to only traffic from Cloudflare

After finding it confusing and difficult to find clear information on this, even after checking Cloudflare’s own documentation, I’ve decided to put this post together in the hope of helping others.

The issue:

You have a website you protect (among other things) using Cloudflare. However, it’s still possible for traffic to reach your website directly, ie going around Cloudflare. This is quite easy if you do manage to find out the IP address a website is running on.

Side point: Cloudflare offer solutions such as Cloudflare Access which allow you to have VPN level protection for your website (or a section of it if you choose). These are great solutions, but only work properly if you can ensure that ALL traffic is forced to go via Cloudflare (and the protection they offer).

The solution:

After wasting days with keywords like: cloudflare restrict access, lock down traffic to only Cloudflare, restrict access to only Cloudflare IP addresses etc etc.. I stumbled on this post: Stop Cloudflare bypassing on shared hosting unfortunately the title is not as intuitive as it could be, however the solution is excellent (bar one small technicality which I will explain later). And I quote:

With a very simple Cloudflare Worker, we can add a request header, a header that will be sent from the edge (any of Cloudflare’s 180+ data centers) to the origin (your server), and therefore won’t be visible to site visitors. As long as the header name and value are kept secret by the site admin, any requests not coming through Cloudflare will not have this header, and will therefore trigger a rewrite condition at the origin server, and be redirected back to, well, Cloudflare – where a Firewall Rule will block it.

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Send header to origin, allowing for
 * .htaccess to block requests
 * not coming from Cloudflare
 */

async function handleRequest(request) {
  // Make the headers mutable by re-constructing the Request.
  request = new Request(request)
  request.headers.set('Secret-Header', 'SeCrEt-kEy')

  return await fetch(request)
}

# Route visitors not coming from Cloudflare to, well, Cloudflare
<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /
	# Both the header and the value should be kept secret
	RewriteCond "%{HTTP:Secret-Header}" "!SeCrEt-kEy"
	# Uncomment and edit w/ IP of services such as certs, cron, Softaculous etc
	# RewriteCond "%{REMOTE_HOST}" "!^xxx\.xxx\.xxx\.xxx$"
	RewriteRule .* "accessdenied.php" [R,L]
</IfModule>

While the concept of restricting access to IP addresses and/or blocking access to some (via .htaccess) is fairly well documented, using Cloudflare (and I do recommend it) makes some of this quite complex when wanting to restrict access to ONLY traffic via Cloudflare. The solution above is elegant in that it adds a header to each request (via Cloudflare Worker) and then the .htaccess file checks to make sure that header is present (ie did it come from Cloudflare), if not, traffic is blocked or redirected to a file of your choosing (or even a 404 if you wish). Sadly not enough airtime is given to this solution, perhaps due to the wrong keywords being used. Hopefully this post help with that.

PS If you wish to avail yourself of our services for things like this (securing your existing or new website, website hosting that ensures your site is always kept up to date and secure along with regular off-site backups (which we can automatically send to you each time) be sure to get in touch with us to find out more.

Edit: For a simpler solution to this problem, but only if you have full server access it explained here: https://xyzuluhosting.com/further-cloudflare-security-authenticated-origin-pulls/