• Dreamhost Banner Ad

How To Setup SSL on WordPress Admin Using Cloudflare Flexible SSL

Disclaimer: This works for me. I’m not sure if it will work for you. Try at your own risk. I will not be held liable if your server stopped responding, OK?

Cloudflare SSL Options
Image Credit: Cloudflare

See TLDR below if you are in a hurry. 😉

Now, let’s start first with my story…

The past few days, I’ve been trying to setup SSL on BatangasToday.com for extra security using Cloudflare’s Flexible SSL. After several days of trial-and-error, I finally nailed it!

The instruction on the WordPress.org website is simple. Just add the following code on wp-config.php file and it will work.

define(‘FORCE_SSL_ADMIN’, true);

Well, it will work if you have a Full SSL setup. (Refer to the image on the right to know the difference, ok?) But for a Flexible SSL on Cloudflare, setting it will result in infinite redirect loop error.

However, according to that same instruction, you need to put additional code on wp-config.php if you are on Reverse Proxy, just like Cloudflare. The code looks like this:

define(‘FORCE_SSL_ADMIN’, true);
define(‘FORCE_SSL_LOGIN’, true);
if ($_SERVER[‘HTTP_X_FORWARDED_PROTO’] == ‘https’)
$_SERVER[‘HTTPS’]=’on’;

Tried the code. The result is the same infinite redirect loop error. That’s because maybe, Cloudflare is not setting up HTTP_X_FORWARDED_PROTO properly.

When I contacted Cloudflare asking them to check if they are setting up HTTP_X_FORWARDED_PROTO properly, they instead suggested me to go the Full SSL route.

So I asked them, “Can’t you fix this without advising us to go to the Full SSL route?” In which their support replied, “I can most certainly have us check it out. I am curious, however, if choosing the full option gets rid of the loop.”

Well, I don’t know if choosing the full option can get rid of the loop, since I don’t have the ability to go Full SSL since I don’t have SSL setup on my host. Setting up my own SSL on my host costs $3.95/month for self-signed certificate. I’m a cheap a$$ so I insisted that they set HTTP_X_FORWARDED_PROTO properly. 🙂

Then, after some more googling, I found this forum post. Analyzing the code there made me think that Cloudflare might not be setting up HTTP_X_FORWARDED_PROTO properly, but they are sending HTTP_CF_VISITOR with “https” substring on its value when the site is being accessed on https.

So, instead of checking for HTTP_X_FORWARDED_PROTO, I checked HTTP_CF_VISITOR on wp-config.php file. I added the code below instead of the code suggested above:

define(‘FORCE_SSL_ADMIN’, true);
define(‘FORCE_SSL_LOGIN’, true);
if( isset($_SERVER[‘HTTP_CF_VISITOR’]) && strpos($_SERVER[‘HTTP_CF_VISITOR’], ‘https’) )
$_SERVER[‘HTTPS’]=’on’;

And bang! No more infinite redirect loop. And I can access all admin pages on https. And everything works fine! Except for the mixed content error, which simply means that I am showing pages on http and https, mixed, since some CSS files are taken from the http.

To fix that, I installed the WordPress HTTPS plugin, to remove the mixed content error and see the “green lock” on the browser when I’m on the WordPress Admin panel.

Everything works fine now.

=======

TLDR. If Flexible SSL is already setup on your Cloudflare account, you just need to add the following code on wp-config.php file.

define(‘FORCE_SSL_ADMIN’, true);
define(‘FORCE_SSL_LOGIN’, true);
if( isset($_SERVER[‘HTTP_CF_VISITOR’]) && strpos($_SERVER[‘HTTP_CF_VISITOR’], ‘https’) )
$_SERVER[‘HTTPS’]=’on’;

You can optionally install WordPress HTTPS plugin to remove mixed content warning on your browser and see the “green lock”.

That’s all folks!

BTW, I’m using Dreamhost’s Cloudflare Plus option, cheaper than the Cloudflare Pro option.

Marhgil Macuha

Marhgil Macuha is a Computer Engineering graduate of Batangas State University. He is currently a Senior Solutions Developer at a Canadian IT company.

Leave a Reply