Running WordPress Behind an SSL/HTTPS Terminating Proxy

Posted on

When creating Feliciano.Tech, I decided to go HTTPS only. Nowadays there’s no reason not to, the cost is negligible (both in server resources & money). I started to build the site first in a virtual machine (VM) then on my actual server. Everything done over HTTP. Preparring to publish my site, I imported my old post, installed Jetpack, and set the WordPress & Site URLs to ‘https://’. I immediately broke everything.

The problems that I ran into were due to how my WordPress website was being run. In the spirit of high-availability my server architecture is three web-backends behind a load-balancer (LB). With this setup, I am terminating SSL on the LB itself. This means public traffic comes in to the LB on port 443, gets decrypted, then gets forwarded to one of my backends on port 80 via the private network. This confused WordPress and caused several issues. You’ll run into these same issues if you terminate SSL on a proxy rather then with the web server WordPress is running. This can be a load-balancer or even CloudFlare. I’ll review how to fix them below.

Issues That Cropped Up

Missing CSS and Images

When I changed the ‘WordPress Address’ and ‘Site Address’ URLs to https://Feliciano.Tech, things immediately broke. Visiting the frontend of my website (the non-admin site) presented a page with text but absolutely no images, color, layout, etc. Basically, the CSS stylesheet and my images failed to load.

Redirect Loop

In my virtual host file, I put in a RewriteRule that redirects HTTP request to HTTPS request. This is so I can force the use of SSL for browsing my site. This caused a redirect loop with Apache eventually crapping out.

Jetpack “Connect to WordPress.com” Error

When trying to connect Jetpack to my WordPress.com account, I got the following error:

site_inaccessible Error Details: The Jetpack server was unable to communicate with your site [IXR -32300: transport error: http_request_failed SSL certificate problem: unable to get local issuer certificate]

Visiting https://Feliciano.Tech clearly showed that my website was indeed working via HTTPS. Hmm.

Jetpack -> Publicize Errors

I got several problems here. Facebook was having trouble authorizing and Twitter authorization flatout failed and caused an error. Here are the two Jetpack errors I was getting:

Error Details: The Jetpack server could not communicate with your site’s XML-RPC URL.

Something which should never happen, happened. Sorry about that. If you try again, maybe it will work. Error: -32601

Both of these errors stem from WordPress not being aware that it should be sending and processing request via HTTPS/port 443. Let’s fix that.

Solutions

Jetpack not recognizing my SSL certificate was my fault. For my LB, instead of building my own I am using a NodeBalancer (NB) from Linode. When terminating SSL on the NB, you’re presented with text areas to paste your SSL private key and your SSL certificate. Turns out you need to also paste any intermediate and root certificate authority (CA) certificates as well. I never did that. My website worked fine in my browser because Google Chrome already had the immediate certificate and went about it’s business. Jetpack on the other hand doesn’t make any assumptions and expects the entire certificate chain in order for it to connect to your website via SSL successfully.

To fix all of the other issues, we simply need to let WordPress know what protocol and port to use. For many LBs including NBs, when they forward traffic they will add some ‘X-FORWARDED-*’ headers. We just need to tell WordPress that when the “HTTP_X_FORWARDED_PROTO” is set to “https”, use SSL. We do this by editing `wp-config.php`. Before the line, “/* That’s all, stop editing! Happy blogging. */”, add the following:

if($_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https'){

    $_SERVER['HTTPS'] = 'on';
    $_SERVER['SERVER_PORT'] = 443;
}

These two changes fixed all of the issues I was having with WordPress, Jetpack, and HTTPS.

Conclussion & Discussion

I don’t work for Automattic (the company behind WordPress and Jetpack), however I am always happy to help. If you have any questions or suggestions please comment 🙂 Do you have a better way to solve this problem? I’d love to hear it.

Also, while it’s not my specific setup, Linode has a great guide on how to create a highly available WordPress website.

comments powered by Disqus
Share
Share