This post discusses troubleshooting CloudFlare and WordPress on websites that are not using SSL. You should know that there is another layer of complexity if you install SSL on your website, which we address in another blog post.
CloudFlare has given our website an incredible performance boost as shared in Part One of our CloudFlare series.
In the weeks since setting up CloudFlare on our WordPress site, however, we’ve had a few technical issues. This post will explain the problems and solutions as we look at how to troubleshoot CloudFlare and WordPress.
Let’s start with the initial errors received within 24 hours of activating CloudFlare.
CloudFlare 522 or 523 Errors
When you first set up CloudFlare for your website, it can take awhile for the nameservers to propagate and you might find yourself receiving CloudFlare errors.
For example, when trying to load a web page you may receive 522 or 523 errors and your website appears offline. This can be an indication that CloudFlare is having problems connecting to your server, but that is not always the case.
For example, our site appeared offline and the following message would display at the top of the home page:
This was an interesting problem because neither CloudFlare nor A2 Hosting could see any reason for the error messages being thrown. Even after the propagation had happened, there were some connectivity issues.
This took a bit of trial and error to troubleshoot, but finally after running traceroute we learned that the issue was with our Internet Service Provider (ISP) — not our hosting company or CloudFlare. However, after a few days everything settled down, and CloudFlare has been very stable since then.
Disqus Comments not Showing
Even though Disqus comments were approved, they weren’t appearing. If you simply clear the page cache, the comments will appear. This was not an issue prior to CloudFlare, and it’s quite simple to resolve.
Changes not Showing Up Immediately
If page additions or edits are not showing up, again simply clear the cache. This is probably something that you do anyway when you work on your website.
That setting is in your CloudFlare dashboard as shown below:
So if you can’t see your changes by refreshing the page cache from WordPress, try using the development mode setting in CloudFlare’s dashboard to see the changes immediately.
403 Forbidden Error
After setting up CloudFlare you may be locked out of your website with a 403 Forbidden Error. Many WordPress owners set up their .htaccess file to stop brute force attacks by blocking access to the WordPress login page.
Our .htaccess was configured to deny wp-login access to all IP addresses but a few (including my own). However, this tactic wasn’t working under CloudFlare.
These attempts failed to resolve the 403 error:
2. Adding our IP as trusted under CloudFlare’s Threat Control Panel.
We finally submitted a support request to CloudFlare. Keep in mind that if you are on CloudFlare’s free plan, you are last on the list for support.
Understandably, technical support priority is given to Enterprise, Business and Pro customers in that order followed by customers on the free plan. So it can take between 24-48 hours and beyond to receive a response from CloudFlare Support.
CloudFlare support responded to our request with 3 questions which we answered as follows:
1. What IP address is triggering the 403? Our IP.
2. Are you using any security plugins that restrict access to specific IPs? No, WordFence whitelists our IP.
3. Do you have mod_cloudflare installed on the server to restore visitor IP? Since A2 Hosting is a CloudFlare partner, mod_cloudflare most definitely was installed.
Finally, there was a breakthrough. As suspected all along, the 403 error was coming from the origin server directly (A2 Hosting) and was related to the .htaccess code set up. Because CloudFlare acts as a reverse proxy, it appeared that all connections were coming from their IPs thus blocking requests from our IP.
To correct this issue, the following code needed to be added to the .htaccess file with the actual IPs replacing the placeholders “184.108.40.206” and “220.127.116.11”:
Deny from All
SetEnvIF X-Forwarded-For "18.104.22.168" AllowIP
SetEnvIF X-Forwarded-For "22.214.171.124" AllowIP
Allow from env=AllowIP
Allow from 126.96.36.199
Allow from 188.8.131.52
With this code, the IPs are taken from the X-Forwarded-For header, thus eliminating the 403 error.
To give a further explanation as to how this works:
Once a CDN is enabled, a page request is not sent directly to the hosting provider but to CloudFlare. CloudFlare now serves the content on behalf of the hosting provider.
Similarly, from the hosting provider’s point of view, all requests appeared to be coming from the CloudFlare server IPs, and not from the users that are reading a blog post or web page.
But there is a way to find out what the originating IP address is instead of the “mock” IP address that CloudFlare is giving out to the general public. That is where X-Forwarded comes in; it pinpoints who the real originating IP address is.
SetEnvIF is the abbreviation for “set environment if”.
So the line ‘SetEnvIF X-Forwarded-For “184.108.40.206” AllowIP’ is translated (very loosely) to “If the REAL sender’s address matches the address 220.127.116.11, please feel free to do whatever you want.”
Unable to Post Comments on Other Blogs
CloudFlare integrates nicely with WordFence and most plugins. However, if you run into unexpected issues when supplying your website URL on other websites, it could very well be that CloudFlare’s IP is being blocked.
To solve this, once CloudFlare is activated for your site, make sure to install the CloudFlare plugin for WordPress. This plugin restores the original visitor IP instead of using CloudFlare’s proxy, which may be mistaken as a spammer by other servers. Until you install the CloudFlare plugin, your comment submissions on another’s blog may fail with a redirect loop.
CloudFlare Page Rules
On the free plan, you are allowed up to 3 page rules per domain. You may want to set up redirects or disable wp-admin page caching or wp-login page caching.
There really isn’t any reason to cache the admin page since only admin, authors, or editors have any business going to that page.
We had no issues accessing the login page, but did hear other people had problems logging into WordPress after activating CloudFlare. By disabling the wp-login for page caching, their problem was resolved.
Make sure you test your site adequately after enabling CloudFlare. Twice we have found all pages but the home page returning 404 errors once CloudFlare was activated. The first time we thought the website was hacked and had Sucuri do a malware check and clean-up. Sucuri couldn’t find any major issues with the site and did some minor maintenance.
But when the same issue occurred on a second website, it appeared to be more of a permalinks issue. We were able to resolve the 404 errors be simply saving the permalinks. Go to Settings>Permalinks and click Save Changes (even though you did not make any changes.) That did the trick.
All in all, the CloudFlare and WordPress integration went pretty smoothly for us and it should go well for you, too. You shouldn’t expect to run into any major issues especially if your hosting provider is a CloudFlare partner.
Even though you can activate CloudFlare in your cPanel, signing up directly with CloudFlare will simplify administrative tasks should you decide to change your hosting provider.
Remember that traceroute is a great tool to help you uncover where the bottlenecks or disconnects might be and is often required by CloudFlare support to help you resolve technical issues.
CloudFlare’s dashboard is easy to navigate. It allows you to put your site in development mode so that any uploaded files or images are seen immediately. You may or may not need to do this, but just be aware that the option is available for you.
CloudFlare support is superb; they will help you get to the bottom of any problems you may be having. Just keep in mind that on the free plan, you are the last type of account to be supported so don’t expect instantaneous support. Be patient and try to troubleshoot issues on your own; it’s a great way to learn!
Hopefully, you will find this troubleshooting guide useful. Have you encountered any other issues with CloudFlare and WordPress? We’d love for you to share them in the comments below!