How to Encrypt Your Website’s Data for Free

Wednesday, May 20, 2015 @ 3:56 pm

In this blog post, I will provide a walkthrough on how to set up encryption (HTTPS) on your webhost using CloudFlare’s Free SSL service. As it is something I am currently teaching myself (I never took a formal web security course, but I like to think I’ve made good progress) and as I couldn’t really find any guide on this, I will try my best to provide definitions and step-by-step overviews with the understanding that there may be some gaps that I haven’t taught myself yet.

The first question is: Why should I consider an HTTPS (aka encrypted) version of my site?

The simplest analogy widely used in the security community is: anything sent over regular HTTP connections are like a postcard. Anyone, if they wanted to, can read it while its happily travelling. If you log in or post a message on a site that doesn’t offer HTTPS on public wifi (e.g. Starbucks), a person logging wireless signals and data could pick it up and get your username/password or message.

Encrypting it would make it more like a sealed envelope. The contents are hidden and just its sender/destination/size visible. If you’re a TOR user, you can see how vital HTTPS is: https://www.eff.org/pages/tor-and-https

A good thing about modern Internet browsers is that they make it easy to tell whether a site is encrypted or not: all you need to look out for is a (usually green) lock icon in the address bar. Here’s a nice overview of HTTP vs HTTPS.

So a summary of why one would be interested in considering an HTTPS version of their site:

  • in business terms, it’s low-effort for high-return
  • respect your site’s visitors and uphold their integrity by safeguarding their data as much as possible
  • in addition, you are maintaining the integrity and reputation of your website (especially if users interact with it in a high degree (e.g. a message board, eCommerce site))
  • if you create websites professionally, saying that you know how to implement HTTPS encryption is a definite value-add to yourself/your organization
  • and this will probably sound really nerdy, but it’s pretty cool stuff

The second question is: How hard is it to encrypt my site traffic? How long does it take?

The basic components of running a website are:

  1. having a domain name that points to one or more nameservers (most commonly provided by your webhost)
  2. these nameservers allow you to set up settings (aka DNS records) that point traffic to destinations you set
  3. your webhost is in most cases what these nameservers would be pointing to

For this specific guide on using CloudFlare’s Free SSL service, we will be touching upon the above three areas.

Another free option is looking into getting a StartSSL Free certificate (http://www.startssl.com/?app=1) and Namecheap offers some of the cheapest paid options, but if you’re on a shared web host this may not work too well.

A summary of what we would be accomplishing:

  1. pointing your domain name(s) to CloudFlare’s nameservers
  2. creating a self-signed SSL certificate on your webhost if you do not have a valid SSL certificate already (optional: I would highly recommend doing this to achieve the “Full” SSL encryption from CloudFlare, but it’s only possible if your webhost allows you to create self-signed SSL certificates)
  3. configuring CloudFlare
  4. forcing users to use the encrypted version of your site (optional)

Without creating a self-signed SSL certificate, you are limited to only using the “Flexible” SSL option from CloudFlare, where data from your webhost to CloudFlare is sent unencrypted, CloudFlare encrypts it and sends it to your site visitor. To your site’s visitors, your site will seem to be encrypting traffic, however when they submit data, it will pass unencrypted from CloudFlare back to your webhost.

A comparison of the SSL options

(courtesy of CloudFlare)

With the “Full” SSL option from CloudFlare, data will be encrypted to/from CloudFlare and your webhost, which is why I’d recommend creating a self-signed SSL certificate on your webhost if possible. For more information on this: https://support.cloudflare.com/hc/en-us/articles/200170416-What-do-the-SSL-options-Off-Flexible-SSL-Full-SSL-Full-SSL-Strict-mean-

Some members of the security community are put off by the idea of CloudFlare being involved in the flow of data from your webhost to visitors and vice-versa; personally, their services (e.g. caching, DDoS protection, code minifying, and attack mitigation) in addition to providing a valid security certificate are worth it.

0) Prepare Your Site/Systems

Please note that some web software require CloudFlare-specific plugins in order to avoid issues around logging the user’s IP (and not CloudFlare’s) and to avoid redirect loops. For example, they highly recommend you install their WordPress plugin. You may need to create a CloudFlare account in order to set up these plugins, so be sure to do that if necessary.

1) Register a Free CloudFlare Account

  1. Head on over to CloudFlare’s registration page
  2. Enter your email twice, a password twice, agree to the terms then sign up
  3. (optional) Go through the tour of the dashboard if you wish
  4. Type in your domain name and click on Scan (in this step, CloudFlare will scan your existing domain’s DNS records to carry them over)
    CloudFlare Set-up Process
  5. Once it’s done, click on Continue
  6. Review the DNS records and if needed add records that weren’t copied (CloudFlare didn’t pick up my DKIM record (google._domainkey) so I had to manually add it)
  7. Click on Continue
  8. Select the “Free plan” in the next screen
  9. You’ll then see a list of two nameservers to update your domain name with!

2) Point Your Domain Name to CloudFlare

  1. Log into your domain registrar’s control panel
  2. Access your domain settings, and specifically the DNS setup
  3. You may see 2-4 textboxes; copy and paste the two nameservers from CloudFlare
  4. Save your settings

Note that because CloudFlare automatically migrates over your DNS records, the migration should be seamless.

3) Create a Self-Signed SSL Certificate on your Webhost (optional)

  1. Log into your webhost and access the control panel (in my case it is cPanel)
  2. Locate the SSL/TLS Manager (or equivalent) section
    cPanel SSL/TLS Manager
  3. Generate a new Certificate, paying special attention to the Domain box. You will definitely want to enter “yourdomain.com” at the very least. If you also want to implement HTTPS for specific subdomains (e.g. store.yourdomain.com), add it on a new line. If you have many subdomains, you have the choice of entering *.yourdomain.com (aka a wildcard entry).
    Generating an SSL Certificate
  4. Once the certificate has been generated, go to “Manage SSL Hosts”
  5. Under “Install an SSL Website”, browse for the certificate you just generated and click on Install

4) Configure CloudFlare

  1. Log into CloudFlare
  2. Access the domain you want to configure
  3. Click on the “Crypto” section
    CloudFlare Control Panel
  4. The first option “SSL (with SPDY)” may already be set to “Flexible”:
    1. If you created a signed SSL certificate (step 3 above), you can change this to “Full”.
    2. If not, set it as “Flexible”.
  5. For additional security, you can set “Authenticated Origin Pulls” to “On”. If you run into any errors, take note of this option and set it to “Off”.
  6. (optional) CloudFlare also offers two-factor authentication for your account so set that up if you’d like more security on your CloudFlare account overall (requires the free Authy app)

Hopefully by now the changes you made to your domain have finished propagating across the Internet and that it is pointing to CloudFlare (from step 2). It can take anywhere from 30 minutes to a couple of hours, so please be patient and wait a bit before checking in CloudFlare if it has been successfully activated.

Once it has been activated in CloudFlare (in the Overview section), we can now test it out! Go to https://www.yourdomain.com and hopefully you see something similar to this in your address bar:

A nice secure site

5) Force Users to use the Encrypted Version of Your Site

In additional to changing your site address in WordPress to use “https” instead of “http”, we can also bring users to the secure version of the site if they’re visiting the regular HTTP version.

To accomplish this, we have to configure the root .htaccess file with some rules to redirect the user to the https://www version of your site.

Create an “.htaccess” file in the root public HTML folder of your site if it doesn’t exist already, open it in your favourite text editor, then paste in the following:

RewriteEngine On
RewriteBase /
# Rule 1: If the webhost does not contain a subdomain (e.g. yourdomain.com), we need to prepend it with “www” (in order for CloudFlare to work!)
RewriteCond %{HTTP_HOST} ^[^.]+\.[^.]+$
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/$1 [L,R=301]
# Rule 2: If the user is accessing your site over regular HTTP connections, redirect them to the HTTPS version (this catches instances where people are accessing http://www.yourdomain.com/ which the above rule would miss, as well as instances where you have a domain name that consists of more than one segment (e.g. yourdomain.co.uk))
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R,L]

Save, upload the file. And you should be done 🙂 Note the above rules apply to all folders on your site.

You can also choose to try out CloudFlare’s Page Rules: https://blog.cloudflare.com/introducing-pagerules-fine-grained-feature-co/

You can test this out by going to http://yourdomain.com or http://www.yourdomain.com or even https://yourdomain.com. In all cases it should redirect you to https://www.yourdomain.com.