Skip to main content

Setting up CloudFlare's Universal SSL and Origin CA on Plan 28

Although I work for CloudFlare there are some products that I haven't experienced as a customer and it's always fun and useful to actually behave as a customer and try them out. I like to do this to make sure the experience is good and try to spot bugs.

CloudFlare recently released a feature called Origin CA that generates a certificate you can drop onto your web server to ensure that the connection between CloudFlare and the server is secure. CloudFlare also offers a feature called Universal SSL that offers free SSL connections for the connection between a web browser and CloudFlare. Put the two together and you've got SSL from browser to CloudFlare and CloudFlare to the origin web server. Neat.

One of my domains,, had a web site that was served over HTTP and I decided to SSL it using CloudFlare. I'd seen it demoed but there's nothing like trying it out for yourself. It was really quick to get set up. is on CloudFlare's free tier.

Here are the steps I took starting from logging into my account and verifying that I didn't have any SSL set up for this web site:

Then I clicked the Crypto button to get to the settings for Universal SSL and Origin CA.

And I enabled SSL for the site by clicking the SSL button from Off to Full (Strict). That makes CloudFlare issue a certificate for and start serving it publicly and at the same time ensure that it will secure the connection from CloudFlare to my web server by using SSL and checking the validity of the certificate that my web server presents.

Boom. was now available over http:// and https:// (although the latter wouldn't work until I had a valid certificate on the server). Next stop was a quick scroll down to find the Origin Certificates settings on the same page.

Clicking Create Certificate gave me a pop up where I could select the certificate type (RSA or ECDSA), validity period and add SAN names as needed.

With those selected hitting Create resulted in the very fast creation of a certificate and the corresponding private key.

I copy and pasted them over to the server, configured NGINX for SSL, restarted NGINX and... it worked!

Total time: 10 minutes (most of which was messing around getting NGINX configured correctly). Now you can visit securely.


Unknown said…
Cool. Now you need to add the right header to upgrade HTTP connections to HTTPS. See
Grumble said…
"configured NGINX for SSL"


Great tutorial but the people who need this level of help (me) now get half the job done because you assume we know how to configure nginx. If we were that clever, this tutorial would be beneath us. Please complete the tutorial for us noobs.

Popular posts from this blog

Your last name contains invalid characters

My last name is "Graham-Cumming". But here's a typical form response when I enter it:

Does the web site have any idea how rude it is to claim that my last name contains invalid characters? Clearly not. What they actually meant is: our web site will not accept that hyphen in your last name. But do they say that? No, of course not. They decide to shove in my face the claim that there's something wrong with my name.

There's nothing wrong with my name, just as there's nothing wrong with someone whose first name is Jean-Marie, or someone whose last name is O'Reilly.

What is wrong is that way this is being handled. If the system can't cope with non-letters and spaces it needs to say that. How about the following error message:

Our system is unable to process last names that contain non-letters, please replace them with spaces.

Don't blame me for having a last name that your system doesn't like, whose fault is that? Saying "Your last name …

All the symmetrical watch faces (and code to generate them)

If you ever look at pictures of clocks and watches in advertising they are set to roughly 10:10 which is meant to be the most attractive (smiling!) position for the hands. They are actually set to 10:09.14 if the hands are truly symmetrical. CC BY 2.0image by Shinji
I wanted to know what all the possible symmetrical watch faces are and so I wrote some code using Processing. Here's the output (there's one watch face missing, 00:00 or 12:00, because it's very boring):

The key to writing this is to figure out the relationship between the hour and minute hands when the watch face is symmetrical. In an hour the minute hand moves through 360° and the hour hand moves through 30° (12 hours are shown on the watch face and 360/12 = 30).
The core loop inside the program is this:   for (int h = 0; h <= 12; h++) {
    float m = (360-30*float(h))*2/13;
    int s = round(60*(m-floor(m)));
    int col = h%6;
    int row = floor(h/6);
    draw_clock((r+f)*(2*col+1), (r+f)*(row*2+1), r, h, floor(m…

The Elevator Button Problem

User interface design is hard. It's hard because people perceive apparently simple things very differently. For example, take a look at this interface to an elevator:

From flickr

Now imagine the following situation. You are on the third floor of this building and you wish to go to the tenth. The elevator is on the fifth floor and there's an indicator that tells you where it is. Which button do you press?

Most people probably say: "press up" since they want to go up. Not long ago I watched someone do the opposite and questioned them about their behavior. They said: "well the elevator is on the fifth floor and I am on the third, so I want it to come down to me".

Much can be learnt about the design of user interfaces by considering this, apparently, simple interface. If you think about the elevator button problem you'll find that something so simple has hidden depths. How do people learn about elevator calling? What's the right amount of informati…