Close the CloudFlare SSL gap

Close the CloudFlare SSL gap

Hi there, if you've read up on how to use CloudFlare for free SSL but were put off by the part about 'it is not secure from CF to your hosting provider', fret not. Let's close that gap (and it's still free).

Before we get started, I dropped some code on to my base templates to illustrate how we can measure success. First let's look at the code we'll use:

 

@* probably not the best code for production, but you get the idea *@
@{
    var isSecure = HttpContext.Current.Request.IsSecureConnection;
    var yepNope = isSecure ? "yep" : "nope";
    var port = HttpContext.Current.Request.Url.Port;
}

<body id="body" port="@port" isSecure="@yepNope">

 

If you're using the free SSL from CloudFlare you'll see the lock and https in the browser. But the last leg of your trip from CF to your host will be on port 80 (non-SSL). When adding the code above to my base template (using Umbraco in this case) and view the source, it looks something like this:

What we WANT is it to look like this:

To close the gap between CF and your host, you simply need to get a free SSL cert from CloudFlare, and install it. However we need to jump thru a few hoops. For this example, we'll be using Azure as our host.

Let's begin...

1) Open up IIS, go into the certs (use the IIS on your machine, don't look for it on Azure) :)

2) Create Certificate Request.

I chose 4096 for the bits. Thinking you should not pick anything lower.

3) Save the CSR to a file named 'request.txt' or whatever you want.

4) Go to CloudFlare, login and go to Crypto.

Scroll to 'Origin Certificates'.

Click Create Certificate.

(You probably want to turn on the 'Always use HTTPS' while you're here.)

5) Choose 'I have my own private key and CSR'.

6) Paste in the CSR text verbatim from your 'request.txt' file we created.

Choose PKCS#7.

Copy the reply from that to a file named 'response.cer' (or whatever).

7) IIS -> Complete Certificate Request.

Fill it out, choose the new file you created.

8) Export as 'whatever.pfx'.

Put a password on it.

Now you have your final PFX file which is what Azure will want.

9) Go to Azure > SSL Click Upload.

Put in your password.

10) After import, bind to your domain.

11) Test it out!

You'll need to check your port\IsSecureConnection at runtime, but you should be good to go at this point.

I do believe you will also want to set the SSL to 'Full (Strict)' in the CloudFlare panel.

You should also know that Azure used to charge for using SNI SSL but it doesn't seem to be the case anymore (buyer beware).

SNI SSL makes it so you don't have to have a dedicated public IP for each cert.

Summary

Yea, it takes some time but is totally worth making your site end-to-end secure for free!

And of course thanks to Dan Booth and Troy Hunt for nudging me in the right direction: