Cloudflare Review: A Comprehensive Guide

Cloudflare Review: A Comprehensive Guide

Since the launch in 2010, there are multiple Cloudflare reviews. Over the years they have introduced new features however many of the reviews were not updated. So the aim of this post is to (hopefully) provide you with the latest information about Cloudflare. However, do note that the post will be written from the point of view of a free user and hence if you’re here for the review on their web application firewall or other paid features, this post is not for you.

What does Cloudflare Offer

Content Delivery Network

A Content Delivery Network (CDN) is a network of caching servers located around the world. We first need to understand why are CDNs needed. A website is made up of many resources such as your texts, images, CSS files and javascript files. When you visit a site, the contents don’t magically appear, instead, your browser has to fetch these content which is located somewhere on the internet.

Here is an example of the resources for the homepage of this blog:

As you can see there are quite a number of resources for your browser to fetch before you could view this site as intended. For this blog, most of the files are located on the web server itself, therefore, every time you reload the site, your browser fetches all these resources from the server itself (assuming you do not have cache version on your browser).

Imagine you are from the United States and everytime you browse this blog, your browser has to go through the effort of getting the resources from the web server which is located in Singapore. The time it takes for the data to transmit from the web server to your browser is known as latency.

The objective of a CDN is to reduce the latency by bringing the resources closer to you.

Source: https://www.incapsula.com

In order to achieve that, caching servers are located in different locations around the world also known as points of presence (PoPs).

Here is an image of Cloudflare’s PoPs:

A typical CDN requires you to push your resources to these caching servers. However, Cloudflare is not a traditional CDN. It acts as a proxy which allows their server to cache your resources.

Domain Name System

As mentioned earlier, Cloudflare acts as a proxy between your browser and the web server, therefore, Cloudflare must be the one handling your DNS queries. With that said, you should note that since they act as a proxy, they are able to read all your traffic.

Nevertheless, they provide a beautiful interface which is easy to use and it updates almost instantly.

Security

Secure Sockets Layer(SSL)

Secure Sockets Layer (SSL) is a tunnel which ensures that your traffic is encrypted. In 2014, Cloudflare launched their universal SSL which provides security for their user.

There are 3 types of options:

Flexible SSL:

Flexible SSL means that the encryption only occurs between Cloudflare’s edge server and your visitor’s browser. This gives your site the green padlock making your site “look” secure but in fact, the traffic between their server and your web server is fully unencrypted.

Full SSL:

Full SSL means that there is full encryption from your browser to Cloudflare’s edge server to your web server. However, when this option is enabled Cloudflare will not verify the authenticity of your SSL certificate. Hence you could have a self-sign certificate in the web server and no error will be prompted.

If you were to host your site on a shared web server, then anyone sharing that server with you is able to self-sign a certificate and theoretically decrypt the traffic.

Full SSL(Strict):

This option is the recommended as Cloudflare will validate your certificate. In order to have a valid certificate, you have to get it from a Certificate Authority(CA). Let’s Encrypt is one of the most popular CA which provides free SSL certificates. If you are using shared hosting, most service providers have also integrated Let’s Encrypt into their CPanel and you will be able to get the whole process done in a few clicks.

Why do you need SSL?

In the same year, 2014, Google announced on their webmaster blog that one of the ranking signals would be HTTPS. If you are a business then this should be something to take note of.

Here is the exact quote from Google:

For now it’s only a very lightweight signal — affecting fewer than 1% of global queries, and carrying less weight than other signals such as high-quality content — while we give webmasters time to switch to HTTPS. But over time, we may decide to strengthen it, because we’d like to encourage all website owners to switch from HTTP to HTTPS to keep everyone safe on the web.

-Google, 2014

In September 2016, Brian Dean, an SEO expert conducting an experiment in which they analyzed 1 million google search results and they found out that there is a correlation between high ranking sites and those using HTTPS. Here take a look at this graph from Backlinko:

Source: http://backlinko.com/search-engine-ranking

I’m Under Attack!

Cloudflare offers DDOS protection for free users with this I’m Under Attack! mode. What it does when this mode is activated, is that it directs the user to an interstitial page for approximately 5 seconds. During the 5 seconds, Cloudflare analyzes the traffic to determine if it is malicious. If determined as the latter, the user will be redirected to a captcha page to solve the challenge. Upon solving the challenge the user is given a cookie so that Cloudflare is able to let the user pass the check in the future.

With that said, it also means that javascript and cookies must be enabled in order or this mode to work.

Personally, I do not use this mode as it throws off services that monitor my website’s uptime (a sign that it is working). However, do note that you could whitelist IP addresses so they will be able to pass Cloudflare’s protection.

It is also important to note that there are articles and tools out there which demonstrate the bypassing of this mode.

Rate Limiting

Rate limiting was released as a beta before releasing to the public in April 2017. It aims to mitigate Layer 7 DDOS attack which is also known as the application layer. Application layer consists of the web application itself as well as additional services provided such as API endpoints.

You can enable Cloudflare’s rate limit by navigating to the Firewall option in the menu.

Even though this post was for free user, this is a feature I feel that requires attention and could be useful for real world application.

This is an example of the free rate limiting interface:

As you can see from the above image, free users can only block traffic. Anyone who exceeds the number of requests you specified will be shown this message:

IP Firewall

IP Firewall is a way of controlling access to your website.

You can set the rules based on IPv4 addresses (range), IPv6 addresses (range), Country (either by name or by code) and ASN (autonomous system number).

In addition, you also have the ability to control users who are accessing your site using Tor.

There are 4 actions to be taken, Block, Whitelist, CAPTCHA as well as Cloudflare’s javascript challenge.

Automatic HTTPS Rewrites

Occasionally, you may get Mixed Content errors whereby the browser warns you that you are loading resources insecurely.

I intentionally force the browser to load an insecure resource by hard coding the URL as seen above (the small dot is an image file of 5×5). However, I wasn’t getting the expected result even after turning on this feature.

I contacted Cloudflare to clarify and it turns out that they rely on HTTPS Everywhere and Google Chrome’s HSTS preload list.

This means that in order for this to work, you will have to send a pull request to HTTPS Everywhere Github’s repository. Note that the above example is an insecure resource from my own domain hence I would be the one submitting the request. Should the insecure resource be from other domain, then the domain owner would be the one submitting the pull request.

Speed

Auto Minify

As mentioned in the CDN section, every resource has to be fetched before presented in your browser. This feature reduces the file size by removing whitespace in your Javascript, CSS and HTML files. It could be activated by clicking on the checkbox:

Rocket Loader™

The purpose of this feature is to bundle upload the javascript after window.onload. This way, your website will render as normal and only load the scripts after the website is rendered.

There are two options to this feature.

Automatic

Automatic allows Cloudflare to handle which scripts to load after window.onload and no configuration is required on the web master’s side. However, by selecting this option some people may encounter issues.

If you are able to single out the cause of the issue, then you could exclude the script from Cloudflare by adding this attribute data-cfasync=”false” to that script.

An example would be something like this:

<script data-cfasync=”false” src=”/javascript.js”></script>

with the option set to Automatic.

Manual

Manual, on the other hand, requires the webmaster to add this attribute data-cfasync=”true” into every script.

An example to include the script would be:

<script data-cfasync=”True” src=”/javascript.js”></script>

with the option set to Manual.

Mobile Redirect

Cloudflare offers the redirecting of your audience to a mobile friendly site if Cloudflare detects they are using a mobile device. According to Cloudflare, this is done on the edge server to prevent the request from reaching your origin server, and thereby increasing the speed.

This is useful if you have specially created a version for mobile devices.

However, you should note that web application these days should be developed to be mobile friendly and should resize based on device screen size. You can check this on your desktop by entering the developer console and clicking the icon shown in the image below.

You can check this on your desktop by entering the developer console and clicking the icon shown in the image below.

Your responsive website should resize to the phone’s resolution which can be set at the top.

Page Rules

Page rules is probably the best and versatile feature Cloudflare could offer. It includes forcing HTTPS to the different types of caching level.

Here is a list of options page rules offer:


Setting up Cloudflare

Setting up of Cloudflare is pretty straight forward. If you are using hosting sites, there is a chance that Cloudflare is integrated right into your hosting. All you have to do is head over to your Cpanel and look for the Cloudflare logo. If Cloudflare isn’t showing up in your Cpanel, you will have to do this manually.

Sign up and head over to https://www.cloudflare.com/a/overview. Click on +Add site located at the top right of the page.

Enter your domain

Add your DNS Records. Don’t worry this can be changed later so you can go ahead and skip it if you want.

Select your plan. I would say their free plan is sufficient for most people.

Point your Nameservers to Cloudflare.

For example, if my domain registrar is Namecheap, I would point their Nameserver to the ones given by Cloudflare so they will be able to proxy our requests.

After changing your Nameserver all you have to do is wait for the DNS to propogate.

How do I know if Cloudflare caches my content?

Head over to https://gtmetrix.com and enter your website.

Expand any resources with the extension CloudFlare supports:

css bmp tif ttf docx woff2
js pict tiff eot xlsx
jpg csv eps woff xls
jpeg doc ejs otf pptx
gif pdf swf svg ps
ico pls midi svgz class
png ppt mid webp jar

Check for the response header cf-cache-status and if it shows HIT then you’re good to go.

If it shows MISS then Cloudflare is not caching your resources. You can learn more about the other cache status here.

Does Cloudflare really speed up a website and save bandwidth?

Here are screencaps of before and after using Cloudflare. You be the judge.

What about saving bandwidth? Here is a case study.

Troy Hunt, wrote an article on how he handles huge traffic spikes. The background of this article was that HaveIBeenPwned, a service Troy created was featured on a British TV show. Here is the result of what happened:

Source: https://www.troyhunt.com/brief-lessons-on-handling-huge-traffic-spikes/

From the graph, you could see that in just 2 hours, Troy peaked at 10GB for cached content. If not for Cloudflare, these requests would be hitting the origin server.

Conclusion

Cloudflare’s free plan is sufficient for many as it provides excellent features ranging from SSL to improving site speed to reducing bandwidth.

However, all these metrics may vary and differ from others. One of the factors is how optimized your website is. An example would be serving unoptimized images, a website that serves images of the highest resolution will result in higher bandwidth compared a website serving a scaled down version of the image.

Play around with the settings and find the optimal result for your website.

I hope you find this post informative. Don’t hesitate to leave a comment below if you have any questions or if you have encountered any issues.

Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *