Setup CloudFlare CDN and Flexible SSL Certificate for WordPress Websites:
1. Add your domain to Cloudflare in Free Plan:
- Log in to your Cloudflare account.
- Click on Add site from the top navigation bar.
- Enter your website’s root domain (For example, if your website is www.example.com, type example.com) and then click Add Site. …
- Cloudflare attempts to automatically identify your DNS records. This process takes approximately 60 seconds to complete.
- Click Next. …
6. Select a plan level as Free Plan.
7. Click Confirm in the Confirm Plan window that appears.
2. Change your domain nameservers to Cloudflare:
1. Enter your domain at ICANN WHOIS field:
2. Log into the administrator account for your domain registrar.
3. Replace the current nameserver records in your registrar account with your domain’s Cloudflare nameservers. Allow up to 72 hours for nameserver changes to globally propagate.
4. Refresh the Cloudflare Overview app. If Complete your nameserver setup still appears, Perform the following steps:
- Ensure the Name Server output correctly spells the Cloudflare nameservers and confirm Cloudflare’s nameservers are the only nameservers listed.
- If the Name Server output is correct, click the Re-check now button in the Cloudflare Overview app.
5. If Complete your nameserver setup no longer appears in the Cloudflare Overview app, you have successfully updated your nameservers and your domain is active at Cloudflare.
Why SSL is Important?
When a person visits a secure website, the SSL certificate helps the browser to identify whether the server accessed is the correct one or not. Most importantly, this process happens in a fraction of a second. The main work of SSL is to secure sensitive information about the user which in turn decreases cyber-crimes. These days, with the release of Chrome 68, it is necessary to secure your site with SSL certification.
Benefits of SSL
SSL is necessary for protecting the websites that handle important details like credit cards, passwords, etc. SSL provides privacy, data integrity and critical security for both the website as well as the user’s personal information. From 2018 onwards Google is looking for SSL certificate when it crawls a website. This is done to secure the Internet which will make life easier for online users and people can enjoy the internet service without any fear of cyber-crime.
Step 1 – Create an Origin CA certificate
You can generate your own Origin CA certificate in the Cloudflare dashboard:
- Log in to Cloudflare.
- Select the appropriate account for the domain requiring an Origin CA certificate.
- Select the domain.
- Click the SSL/TLS app.
- Click the Origin Server tab.
- Click Create Certificate to open the Origin Certificate Installation window.
- In the Origin Certificate Installation window, choose either:
- Let Cloudflare generate a private key and a CSR – requires specifying whether the Private key type is RSA or ECDSA.
- I have my own private key and CSR – requires pasting the Certificate Signing Request into the text field.
- List the hostnames (including wildcards) the certificate should protect with SSL encryption. The zone root and first level wildcard hostname are included by default.
- Choose the certificate expiration. The default is 15 years and the minimum is 7 days.
- Click Next.
- Select the Key Format. Select the key pair format that best matches your environment. Most OpenSSL-based web servers such as Apache and NGINX expect PEM files (Base64 encoded ASCII), but also work with binary DER files. Windows and Apache Tomcat users must opt for PKCS#7.
- Copy the signed Origin Certificate and Private key details into separate files as instructed by the Origin Certificate Installation window.
- Click OK.
Step 2 – Install an Origin CA certificate at your origin web server
Adding an Origin CA certificate to an origin web server requires several general steps:
- Upload the Origin CA certificate (created above in Step 1) to your origin web server.
- Use the linked installation guides below to update your web server configuration to point to the certificate.
- (Optional for most origin web servers) Upload Cloudflare’s CA root certificate to your origin web server.
- Enable SSL and port 443 at your origin web server.
- Check that your origin server firewall doesn’t block connections to port 443.
Step 3 – Configure the SSL/TLS mode in the Cloudflare SSL/TLS app
Instruct Cloudflare to encrypt traffic to your origin web server after you install the Cloudflare Origin CA certificate at your origin web server. Set the SSL/TLS encryption mode in the Cloudflare SSL/TLS app to either Full or Full(strict)to enable encryption between Cloudflare and your origin web server.
Step 4 – Add Cloudflare Origin CA root certificates
Some origin web servers require uploading the Cloudflare Origin CA root certificate. See below for an RSA and ECC version of the Cloudflare Origin CA root certificate. Click on a link to download a file:
Alternatively, click to expand the root certificate contents for copy and paste into your origin web server configuration:
unlike a free public certificate from Let’s Encrypt, we’re not required to renew the certificate every few months. In fact, we can just leave it at the default, which is 15 years! Now, yes you can configure a chron job to auto-renew your Let’s Encrypt certificate but anytime we can keep from using additional server resources, that’s a good thing.
So we just click Next and move on to the next screen.
You can choose the key format depending on the type of web server that you’re using. For Apache and/or NGINX, the default PEM format will work just fine. So what we need to do is just copy and paste ALL the code from the Origin Certificate and paste it over into Certificate field in WHM.
Resolving mixed-content issues
By the time you get to this step, your site should automatically redirect the visitors to the HTTPS version of the site.
Redirecting a WordPress site can lead to mixed-content issues. This means that some resources (including links, images, scripts,etc.) are loaded over the insecure ‘HTTP’ protocol while the site is loaded over the ‘https’. Depending on the browser, the padlock might be missing from the address bar or your site will not be displayed as fully secured.
Hardcoded insecure URLs
The URLs which are hardcoded can be found in theme and/or plugin files. This happens because developers use absolute instead of relative paths (i.e. http://mywebsite.com/wp-content/image.png (absolute) vs /wp-content/image.png (relative)).
In this case, you will have to edit the problematic files manually. Since it is impractical to just search the theme/plugin files for the hardcoded links, the best thing to do is to use the String Locator plugin. It will help you locate the file and the exact line of code on which the insecure URL is located.
Verify that your site is resolving under HTTPS
If you followed these steps correctly, your site will resolve under HTTPS. In order to avoid any issues in the process, it is important to do everything in the same order. Bear in mind that some changes will take more time, therefore you might not be able to do this in one go.
If you are using a caching plugin, empty the cache. It is also a good idea to clear the cache from your browser before checking to see if it is resolving correctly.
2. Installing required WordPress plugins
- Really Simple SSL
- CloudFlare Flexible SSL Plugin
- HTTPS redirection plugin
- WordPress HTTPS (SSL)