CloudFlare is an interesting service that offers many performance improvement settings such as its famed Rocket Loader tool. In addition to performance the service is also capable of securing your website via a WAF (Web Application Firewall). CloudFlare was the first to offer a free SSL that it dubbed the “universal SSL” this feature would allow every website to have an SSL for their users securing the users connection to CloudFlare (and indirectly your website).
The advantage of this is it allows websites to receive bonuses such as HTTP 2, an encryption scheme to secure your website, and not to get hurt in rankings from Google. However, setting the Flexible SSL up can be confusing and its known to cause problems.
For instance, if you have a website on CloudFlare ATM chances are is you have the Flexible SSL service enabled go to your URL but try visiting to it over HTTPS. If you visited the page and you notice how the appearance is broken this is because of the nature of Flexible SSL while there is a secure connection you aren’t telling your site to serve your resources over HTTPS as well. This can’t be solved via a traditional htaccess rewrite either because your server doesn’t have an SSL on it therefore to fix this you need a couple of things.
Step 1: Enabling the Flexible SSL
The first step is to make sure the Flexible SSL is enabled on your website (don’t enable Full or Strict unless you have an SSL certificate on your server). To do this simply login to your CloudFlare panel, and click on the Crypto box at the top of the header and make sure under the SSL section it looks like the picture below.
Step 2: Downloading The Plugin
There is a plugin that you need to download to solve a redirect issue when using the flexible SSL. If you were to simply try to access the website over SSL at the moment you would be stuck in a redirect loop on the wp-login.php page. The reason this is happening is because your server is being told that page is HTTPS but the receiving page (when you submit your data) is not being served in that same matter. To fix this download and activate the plugin titled CloudFlare Flexible SSL after the plugin has been installed and activated you should be able to login in over HTTPS.
Step 3: Setting The Redirect And Fixing Mixed Content Errors
The final step is to enforce the HTTPS for your website and to solve any potential Mixed Content Errors. To solve the Mixed Content Errors simply scroll down on the Crypto page in your CloudFlare admin panel and find the section titled automatic HTTPS rewrites and enable it.
After you have enabled the rewrites head over to your page rules section and setup a page as follows.
For the URL set the following: http://*yourwebsite.com/*
Then set the settings to “Always Use HTTPS” and your website will automatically have a 301 redirect from the HTTP version to the new HTTPS version.
Some important notes that the automatic HTTPS rewrites will not fix external scripts (if there is an SSL on the external server then it will work however, it can’t fix the mixed content error unless there is an SSL for that website).
Also SSL can be slightly slower so make sure that your website is optimized properly and is fast loading. If you are in need of services than please feel free to contact me VIA the contact form of the website as I do offer a service to optimize your website.