Published

In this tutorial I will show you how to use DreamHosts Let’s Encrypt with CloudFlare on your website. This will encrypt the connection between CloudFlare and your website visitors as well as the connection between CloudFlare and Dreamhost. CloudFlare calls this Full SSL (Strict) and is available under their free plan. We will also set up a CloudFlare Page Rule to redirect all HTTP requests to HTTPS.

If you’re a DreamHost user you probably know that you now have access to a free SSL certificate courtesy of Let’s Encrypt. This allows you to serve your website over HTTPS (as opposed to plain old HTTP) encrypting the connection and boosting your Google page rank.

You probably also know about CloudFlare and their free plan which provides caching, optimization and security boosts. So why not use both, eh?

A few things to note before we proceed:

  1. I did not enable CloudFlare through the DreamHost web panel. DreamHost makes it easy to enable CloudFlare on your domains but I did not go that route because as of 15th June 2016 these domains are required to use www. Call me petty but I have been removing www from domains under my control. And I’m well-versed enough with DNS settings that I am comfortable signing up with CloudFlare myself and using their control panel.
  2. I enabled Let’s Encrypt from the DreamHost web panel. I do not want to go through the trouble of generating my own Let’s Encrypt certificate and then renewing it every 90 days.
  3. Redirecting HTTP to HTTPS requires 1 Page Rule in CloudFlare. I mention this because CloudFlare’s free plan only allows 3 Page Rules. If you do not want to give up a Page Rule, there are other ways to do the redirect (.htaccess rules, CMS plugins etc…) but I prefer CloudFlare handle it.
  4. Your website may break if it is using HTTP anywhere in it’s code. Because we are using HTTPS, any HTTP requests may be blocked. That includes images, stylesheets, JavaScript files etc… that are not linked with https://. In the worst case scenario, you may have to update your code manually (hint: use a double forward slash // instead of http:// or https://) but if you are using a CMS like WordPress there are some workarounds. I include a section specifically on WordPress.

Pause CloudFlare and switch off SSL

If you’re already running this website through CloudFlare, I suggest pausing CloudFlare and temporarily switching off SSL This will allow us to test that the Let’s Encrypt SSL certificate (which we will be generating later) has been installed on the website.

Log into your CloudFlare account and select the domain. In the Overview tab, click the Advanced link to display the Pause and Delete buttons. Click Pause.

The option to pause (and delete) CloudFlare is found in the Advanced section of the Overview tab

Switching off SSL can be done under the Crypto tab. Under SSL, open the dropdown menu and select Off.

cloudflare_ssl-settings

Enable Let’s Encrypt from the DreamHost Web Panel

Now you will need to enable Let’s Encrypt from your DreamHost Web Panel. You’ll receive an email confirming the that the Let’s Encrypt certificate will be installed on your domain. Wait a few minutes and navigate to the HTTPS version of the domain (e.g. https://caveenasolutions.com. Yes, you have to type in https://)

Note that if you check too early you may see a browser warning and a certificate self-signed by DreamHost.

DreamHost’s self-signed certificate

This is because DreamHost is still installing your Let’s Encrypt certificate and in the meantime it is using this self-signed certificate.

A DreamHost confirmation message saying it will use a temporary self-signed certificate

Just wait a while and you’ll get your own SSL certificate along with (depending on your browser) a nice, green security padlock.

Browser notification of Let’s Encrypt SSL Certificate

Enabling Full SSL (Strict) and redirecting HTTP to HTTPS in CloudFlare

CloudFlare has an article explaining the different SSL options available to the free plan. If you enabled CloudFlare on your website without changing anything, chances are your website is using Flexible SSL which encrypts the connection between CloudFlare and your website visitor but leaves the connection between CloudFlare and your origin server (DreamHost in our case) unencrypted. Both versions of Full SSL require an SSL certificate be installed on the origin server and therefore encrypts the connection between the two points. However, only the Strict version checks that the SSL certificate is valid. It’s just some added security.

The different types of SSL options on CloudFlare Free Plan

To set SSL to Full (Strict), go back to the Crypto tab in CloudFlare and select it from the dropdown menu under SSL. Easy peasy.

Now we’re going to do something new: we’re going to add a Page Rule to redirect all HTTP requests to HTTPS. This way people won’t have to type in https:// everytime (hooray!) Go to the Page Rules tab and click the Create Page Rule button. In the modal window that appears, click Add a Setting. In the new dropdown menu that appears, select Always use HTTPS. For Order you are free to select what you wish but I select First.

Remember that if you do not want to give up a Page Rule there are other ways to redirect HTTP requests to HTTPS. I won’t cover them here but you can search online for them.

Once you have set up Full SSL (Strict) as well as your Page Rule, go ahead and Unpause CloudFlare.

Why use CloudFlare to redirect HTTP to HTTPS?

There are a couple reasons I do this:

  • CloudFlare is the point closest to the website visitor. Using an .htaccess rule or a CMS plugin requires the request to go all the way to the origin server first. Why waste the time?
  • It fits my own development process better. I sometimes copy websites onto a development server that does not have an SSL certificate installed. Using an .htaccess rule or a CMS plugin means I would have to disable the code/plugin before development and re-enable it when I want to push the changes to the live website.
  • I try to limit the number of CMS plugins used on a website.

And for you SEO junkies, CloudFlare’s Always use HTTPS Page Rule uses a 301 redirect as suggested by Google.

Fix HTTP requests in your website code

If there are any HTTP requests in your website code (coming from images, stylesheets or JavaScript files), they may be blocked from loading which will break your website. Update your code to use double forward slashes. This will cause the browser to fetch the resource using either HTTP or HTTPS depending on the protocol used to serve the website.

So instead of this:

<img src="http://caveenasolutions.com/wp-content/uploads/2016/06/cloudflare_pause-cloudflare-300x183.png" />

Use this:

<img src="//caveenasolutions.com/wp-content/uploads/2016/06/cloudflare_pause-cloudflare-300x183.png" />

Crazy voodoo magic, huh?

WordPress and HTTPS

Using WordPress to power your website? This section is for you.

Use the WordPress HTTPS Plugin to re-write HTTP requests as HTTPS

If you’ve done any reading on using HTTPS with your WordPress website chances are you stumbled accross the WordPress HTTPS plugin. The plugin has a few features including forcing the WordPress Admin to use HTTPS (so you won’t have to set define('FORCE_SSL_ADMIN', true); in your wp-config.php) and selecting which Posts/Pages should be served over HTTPS. However, one function I discovered that I heard little about is that WordPress HTTPS will re-write HTTP requests in your code as HTTPS. This will save you the headache of updating your code (especially since WordPress saves the http:// or https:// when images are inserted in Posts/Pages).

Use // instead of HTTP/HTTPS when inserting images into Posts/Pages

Let’s take it one step further and replace the http:// and https:// with // every time an image is inserted into a Post/Page. Add this code to your functions.php.

function remove_thumbnail_protocol( $html ) {
  $html = preg_replace( '/(http:|https:)/', "", $html );

  return $html;
}

add_filter( 'post_thumbnail_html', 'remove_thumbnail_protocol', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_protocol', 10 );

Updating WordPress Address (URL) and Site Address (URL) to use https://

Pretty much all the tutorials I read on using HTTPS with WordPress advised to update the WordPress Address (URL and Site Address (URL) to use https://. Except now that I’ve got a CloudFlare Page Rule, this step is redundant because CloudFlare will already re-direct HTTP to HTTPS anyway. Furthermore, keeping the http:// in both variables again allows me to copy the website onto a server that does not have an SSL certificate installed.

In fact, the only time when I saw using http:// or https:// made a difference is the permalink that is displays when I am creating or editing a Post/Page. Here is what the permalink for this Post looks like:

WordPress Permalink

Of course, clicking the link still redirects the page to the HTTPS version thanks to the CloudFlare Page Rule. So I guess at the end of the day changing the URLs is entirely up to you.

References