Book Image

Instant CloudFlare Starter

By : Jeffrey Dickey
Book Image

Instant CloudFlare Starter

By: Jeffrey Dickey

Overview of this book

Ensuring your website is up, fast, and secure is a difficult yet crucial task. Learning how to protect and safeguard your web presence from malicious attackers whilst also making sure that it is optimized is important for any website administrator. CloudFlare helps you augment your website with additional security, as well as provide the extra bit of speed that will set you apart from the competition."Instant CloudFlare Starter" will show you how to leverage the power of the cloud to ensure that your website is running at its very best. It will also tell you exactly what CloudFlare is doing when you enable various features, and guide you through the entire setup and configuration process.After learning about what CloudFlare actually is, you'll be shown how to fully optimize and secure your own website - using the latest that CloudFlare has to offer.As well as ensuring that your own site is protected with CloudFlare, you'll learn exactly how it actually secures your website from malicious attackers. This is in addition to making sure that you can send and receive emails effectively from your own domain, as well as learning how CloudFlare can enable your site’s static assets to load quickly, with little effort on your part.You'll be guided through the whole optimization process - with additional tips and guidance that help you avoid common mistakes and pitfalls, alongside coverage of optional modules that can additionally improve the speed of your website, add analytics, or even entirely new functionality.With detailed explanations of things to look out for and how CloudFlare can solve your problems on your website, "CloudFlare Starter" will ultimately show you how to optimize and secure your website effectively with minimum hassle.
Table of Contents (7 chapters)

So, what is CloudFlare?

CloudFlare is a service that webmasters can use to provide better performance and higher security on their websites. High performance websites lead to higher visitor engagement, retention, and conversions. CloudFlare has various tools to help speed up your website. Usually the best way to increase a website's performance is with a Content Delivery Network (CDN). In order to understand how CloudFlare optimizes the performance, it's important to first understand how a CDN works.

A CDN is a distributed network of servers that is generally used to deliver static content. A CDN will be distributed on servers throughout the world. CDNs are also optimized to provide static content with proper software and network topologies. A common way in which this is leveraged in many web applications to deliver a dynamic HTML page is through an application server, then deliver the images, CSS, and JavaScript through a CDN.

This allows the content to be served up quickly as the servers are located closer to the end user. It also helps distribute the load off the application servers, thus making the experience for end users better as well as saving server resources. It's an important part of any website. If you want your website to load fast and scale well, then it's a necessity.

In order to understand the difference between CloudFlare and a traditional CDN, you should know that CloudFlare is not a traditional CDN. A more traditional CDN would be a service such as CloudFront, EdgeCast, or Akamai. In these systems, you would have a CDN to mirror your content. Unfortunately, this approach requires the CDN to know when the content is updated, and be able to separate the dynamic content from the static content.

Typically, the way this works is when a file is requested through the CDN (say an image), the browser will request it from the CDN. If the CDN does not have a copy of the file, it will request it from the origin host (your web server). It is then cached for all future requests. If the file changes, it needs to be explicitly invalidated either manually or as a deploy process. Otherwise it will eventually expire. This requires a fair amount of backend programming to use effectively.

CloudFlare handles this problem for you by running all content through the CDN and it internally figures out what needs to be cached through the CDN and what doesn't. This means CloudFlare is very easy to set up.

The biggest difference between CloudFlare and other CDNs is that CloudFlare serves every request through the site. Other CDNs only serve static content. This allows CloudFlare to optimize much further.

The analytics and apps are able to do this because they act as a proxy between the application server and the user. After the server generates a response, CloudFlare will alter it to include the new functionality that you've added. For example, if you wanted to add Google Analytics through CloudFlare.

Google Analytics requires a bit of JavaScript on the page. CloudFlare can insert this automatically without any server changes through its app functionality.

Before the Google Analytics app is enabled, the server might respond with a page like the following :

  <title>My site</title>
  <p>This is my content</p>

After enabling Google Analytics through CloudFlare, it will modify the response to be like the following:

  <title>My site</title>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-00000000-1']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  <p>This is my content</p>

As you can see, the Google Analytics code is injected straight into the response. This allows CloudFlare to be very flexible in changing the location of assets as well. CloudFlare has a variety of other techniques that can be enabled to optimize a website, such as the following:

  • SPDY support: SPDY is a new protocol designed to be much faster than HTTP at transporting web content.

  • Railgun: This is a compressor used to reduce the data needed to deliver content.

  • Preloading: CloudFlare can be configured to preload content that's used often before the user reaches a page that requires it.

  • Rocket Loader: This ensures that loading external resources doesn't pause the loading of the rest of the page. It can also be configured to combine multiple JavaScript and CSS files into one.

  • AutoMinify: This compresses HTML, CSS, and JavaScript to reduce file size and improve client-side performance.

  • Local storage caching: This leverages the browser's local storage to be used as a local cache for objects.

  • Cache header optimization: This adjusts cache information on request, so browsers will correctly cache the content.

  • Aggressive GZIP: GZIP compresses data across a network. Some gateways and firewalls will incorrectly notify upstream servers that GZIP is not supported. CloudFlare works despite this and ensures that GZIP is supported where it is available.

  • Browser optimization: This ensures that images and content are served in the most efficient way possible. For instance, serving images specific to mobile only when accessed by a mobile device.

  • Page prerendering: This starts loading a new page when hovering over links to them.

It's a long list, but it's important to understand that these optimizations are what CloudFlare does to make your site faster.

CloudFlare watches over many websites across the Internet; if it detects malicious traffic from certain places, it will work to protect sites from attackers in those locations:

  • Denial of Service protection: When a web server is sent a request, the web server will work on a response and then deliver it to the user. Attackers can take advantage of this by requesting the same content over and over again without listening to the response. This can cripple a system very easily. If CloudFlare detects that this is happening, it will require the user to enter a captcha to continue browsing the website (which a bot will be unable to pass). Since CloudFlare is between the user and your website, this traffic will never hit your site.

  • Other threats: CloudFlare also monitors for cross-site scripting and SQL injection attacks. There are extensions that we can enable to protect against comment spam and e-mail harvesters as well. CloudFlare can check against browser integrity. This means they will analyze the HTTP requests to see if the headers contain headers associated with malicious actions. There can also be explicit IP address blocks in order to ban some ranges or countries from accessing a website.

  • SSL: Any website that uses logins/sessions needs to be behind SSL. Without using SSL security, it is easy to hijack a user's session on a public Wi-Fi network, by allowing an attacker to pretend to be a different user. CloudFlare has some tools to easily enable some basic SSL protection for your users. For more information on how this attack is done, read up on the Firesheep exploit at

  • Blacklisting: CloudFlare has a database of IP ranges that are known to be harmful traffic. CloudFlare can be enabled to prevent users from these IP addresses from reaching your site without passing a captcha.

CloudFlare allows you to see some analytics information that would be difficult to see otherwise. Analytics services such as Google Analytics, Piwik, or Clicky work by executing JavaScript in the browser. After a page loads, some JavaScript code on the page will send a notification to the analytics service informing about the traffic view. This can easily be blocked by the user and also won't function if JavaScript is disabled. It also will not show bot traffic as they rarely have JavaScript enabled.

There are also tools available to track traffic without JavaScript, such as Webalizer and AWStats. These work by analyzing server logs to report traffic data, and require some software installation on your server.

Often, it can be cumbersome to have engineers add in services to an application such as Typekit or Google Analytics. CloudFlare has a marketplace of apps that can be installed to an application without deployment or changing code on the servers.

Not having to change the code to put an app onto a site lets you to easily try out new analytics, advertising, and social tools.

It's also safe because CloudFlare ensures that the apps are safe and won't cause issues on your site. If you try to enable two conflicting apps, the console will protect you from making that change.

As you can see, CloudFront is more than a traditional CDN. This does not mean that it will solve all scaling problems, but it will solve many of the easier scaling issues with little effort. The security, analytics, and apps functionality are some nice additions to enhance your website as well.