CloudFlare Universal SSL & WordPress – the definitive guide

Last year, CloudFlare made a bold move and introduced free SSL certificates to everybody using their cloud DNS service. This is damn good news for website owners: you can now encrypt all your website traffic for free! (Free, as in free beer)

Setting it up is easy enough once you know all the steps and pitfalls. To avoid running into the same problems as everybody else, here is our definitive guide to setting up free Universal SSL with CloudFlare.

I’ll start by explaining what SSL is, and why you should want it. Feel free to skip this part if you just want the practical details!

1. How does it work?

1.1 SSL

Normal internet traffic is unencrypted. This means that anybody between you and the website you’re visiting can (quite easily) read what you are requesting and what you are sending to the website. Really anybody: not only your ISP, but also snooping government agencies, or neighbours listening in on your wifi.

However, whenever you see the green lock in your browser bar, it means you are connected with SSL encryption and that your connection is safe.

Simplified, what happens is this: your browser and the server agree on a secret password (in a way that makes it impossible to steal) and use this secret password to encrypt everything you request from the server and everything the server sends back. So if you have to send your credit card details to the server (for example..) somebody listening in on your connection will just see garbage. Without the password they will never be able to retrieve your credit card details!

At the same time, your browser is able to verify that the server it’s talking to is who it says it is by verifying the server certificate. That is why you normally have to buy SSL certificates from a Certificate Authority (a ‘CA’).

A Certificate Authority is a company that is trusted to issue certificates. Your browser will come installed with a list of authorities it trusts by default. Verifying your SSL certificate is basically checking that is was issued by a trusted CA. Because trusted CAs will make sure that you are actually the owner of the domain before issuing a certificate, nobody can pretend that they are your server and steal credit card details, because they won’t be able to get a trusted certificate.

Getting a trusted certificate, however, costs money. (Sometimes as little as $9 / year though..) This is where the free CloudFlare SSL comes in.

1.2 CloudFlare

Even without the free SSL, CloudFlare is pretty awesome. They have a superstable network of servers all over the world that will sit between your visitors and your website. If you have set up CloudFlare for your website, whenever somebody visits your website, they will actually visit the CloudFlare server that is closest to them. The CloudFlare server then looks if it has a stored a version of your website or your images on their own servers and sends that to the visitor if it does.

It also checks if the visitor is on a known spammer list and checks the request may be a targeted attack of sorts. You can see how this makes life for your own server a lot easier!

1.3 CloudFlare + SSL

CloudFlare offers to generate a free SSL certificate for you. They can do this, because to get your website to work with CloudFlare, you need to let them take care of your domain name administration, and somebody with access to your domain name can get an SSL certificate.

However, they only sit between your visitors and your server. This means that with this set up, the connection between the visitor and CloudFlare is encrypted, but the connection between CloudFlare and your server is not. Read that again, and make sure you get the distinction!

At the very least, this rules out the snooping neighbour, as well as the wifi hackers in coffee shops. But not the sophisticated hackers at levels between CloudFlare and your server.

If you want, you can fix this with either a paid certificate (the easy way) or with a self-signed certificate (the free way). Self-signed means that the certificate is not trusted by a Certificate Authority, but generated by yourself. Because the certificate is only used to encrypt the connection between CloudFlare and your server, the risk in manageable. Somebody would really need to hijack that bit of the connection to pose a risk. How relevant this is depends on your site. If you are processing credit card details, you need to secure the lot. If you just want to offer your visitors an encrypted connection out of their homes, flexible SSL is enough.

2. Setting it up

Enough with the theory, let’s get our websites secured! First step is getting your website on CloudFlare. If you have done this already, skip on ahead to the next step.

Note: If you have already set up CloudFlare through your host’s cPanel, Free SSL is not going to work (at the time of writing). Unfortunately, the only way is to disable CloudFlare through cPanel again and going through the steps below. (I know, it sucks!)

2.1 Setting up CloudFlare

Note: Because CloudFlare operates on the DNS level, getting on CloudFlare takes the same amount of time as a DNS change: 12-24 hours until the change has propagated everywhere.

The first step is signing up for CloudFlare. Head on over to CloudFlare.com and click the “Sign up now!” button. Create an account and fill in your website’s domain. CloudFlare will scan your DNS settings and ask you to verify that they are correct. If you have any subdomains set up, make sure they are all in there! If not, add them manually.

After this, CloudFlare will tell you to change your nameservers and what to change them to. Take note of the new nameserver records.

Before you go and change your nameserver, go into the CloudFlare settings for your domain and make sure that ‘Flexible SSL’ is selected. This will get CloudFlare onto generating an SSL certificate for you. This can take up to 24 hours.

Next, we will make the nameserver change. For this you will need to identify your domain name registrar. You registrar is the company you are paying for your domain name. Got it? Good!

How to change the nameserver depends on your registrar. Some have a nice web interface for it, some don’t. Log into your registrar’s admin panel and look for your domain settings. There you should find a ‘Change Nameservers’ setting somewhere. Search their knowledge base if you can’t find it.

Alternatively, you can just send an email to your registrar, saying that you want to change your nameserver. Send them the CloudFlare nameserver details, they should be able to change it over directly.

This is the point where you sit back and relax. Have a look at the other settings in your CloudFlare domain settings and change whatever seems appropriate. Set yourself a notification for tomorrow morning, when the nameservers have propagated and the SSL certificate has been generated.

2.2 Set up Flexible SSL

With CloudFlare active on your domain, you can start getting your website on SSL. First, make sure your nameservers are set up correctly using Pingdoms DNS health test. Especially take note that the CloudFlare servers (and only the CloudFlare servers) are listed under Nameserver.

Then, log into CloudFlare and open the CloudFlare settings for your domain again. Make sure that SSL is active.

Next, you need to install and activate the CloudFlare Flexible SSL plugin in WordPress. The plugin is just a one-liner, but it makes sure that your website ‘knows’ when it is loaded using CloudFlare Flexible SSL.

Time to take it for a spin! As a first test, go to the login page for your website. Now, edit the URL in your browser address bar and change http:// to https:// and press enter. Your login page should reload and the browser bar should show a green lock. Congratulations, your can now log in over an encrypted connection!

2.3 Make your website work correctly over HTTPS

Now that everything is set up at the server level, we just need to get things working on your front-end. Try visiting your website using https://your-url.com/. You’ll probably see that the green bar is now crossed out, or red, depending on your browser. This means that the connection is encrypted, but that resources like images and scripts are loaded over an insecure connection.

This is because all your image urls are still using http. Now it’s decision time.

1. Use HTTPS optionally, or only on a subset of pages

If you want your website to use HTTPS optionally, or only on a subset of your pages (for example your checkout), install the WP HTTPS plugin and set it up to redirect those pages you want loaded over HTTPS.

2. Use HTTPS only for your admin area

If you only want your wp-admin to be loaded over HTTPS, add the following line to your wp-config.php file:

define('FORCE_SSL_ADMIN', true);

Add it just above the “Stop editing” line:

/* That's all, stop editing! Happy blogging. */

3. Use HTTPS everywhere

If you want to secure your entire site with SSL, there’s a few ways of doing it. I personally think that the steps below are the most durable. It also doesn’t involve running a plugin to fix SSL problems, which is nice.

We are basically going to replace all instances of http://your-site.com/ with https://your-site.com/ in your database. So make sure that you have backed up your website first and are able to restore instantly! Also, be absolutely sure that SSL is working (see above).

Install the Search and Replace plugin for WordPress and activate it. Open the Search & Replace page, and put your current site URL in the ‘Replace’ box. In ‘With’ put your site URL again, but this time with https instead of http.

Let the plugin do a dry-run first. Check some of the results to make sure that you have entered your URL correctly.

If it all checks out, it is time for the big change-over! Put the URLs in the ‘Replace’ and ‘With’ boxes again and do the real replacement.

If you go to the https url of your site, you should now have a green lock!

If you still don’t have a green lock, right-click your site, and select ‘View Source’. In the source search (Ctrl + F) for http://. If it’s an external image in your post or page, download the image and upload it to your site again, so it can be loaded over SSL. If it is a script or style from a plugin or theme, contact the plugin or theme developer – there is most likely something wrong with the coding there!

Optional: upgrading to Full SSL

With Full SSL, also the connection between CloudFlare and your server will be encrypted. This can be using a certificate issued by a CA (Full SSL strict), or self-signed (Full SSL). To use full SSL in strict mode, you can contact your web host and order an SSL certificate with them, or Google around for a cheap SSL certificate.

To generate a self-signed certificate, you can either do it yourself on the command line or by using this website. When you have the certificate, installation depends on your host. Check their knowledge base or contact support. Most often you have to email them the certificate and they will take care of the installation.

Once the certificate is installed, you can go into your CloudFlare settings panel once again, and change your SSL setting from Flexible SSL to Full SSL for self-signed certificates or Full SSL (Strict) for CA issued certificates.

Conclusion

That was it! You WordPress website is now protected by CloudFlare and encrypted using SSL. Are you running into any problems along the way, or know of easier ways of going through some of these steps? Let us know in the comments!

8 Comments

When I set this up, the cPanel redirects the HTTPS version of the website to the default server page on the cPanel server rather than the directory that’s intended for the website. Any idea on what I need to change?

I followed all the instructions and installed a flexible SSL in my domain but I have a question: – Why in Chrome the green lock doesn’t appear? If you enter across Mozilla, the website appear with green lock. I tested some websites using Cloudflare SSL certificates (like this one for example) and the green lock doesn’t appear in URL bar in Chrome. Why?

I did what you said about having this ssl for my wordpress website. I installed Search and Replace plugin too but doesn’t work well. I had to revert back to my backup unfortunately. Can you please give another idea about installing this SSL to the site? I really need this as my stripe requires me to force SSL!