Bloggers spend a lot of time in portraying quality content on their blogs. They resort to a variety of techniques to attract a larger audience. Over last year or two, websites using HTTPS have attained greater popularity due to their SSL security stamp. This added feature not only adds to the security but also boosts the site’s rank and traffic due to its reliability mark.
If you have not yet migrated your website from HTTP to HTTPS, then follow the below link to quickly initiate the free SSL with let’s encryt process.
Now that you have configured your server with a free SSL certificate from Let’s Encrypt, you need to complete the installation process by configuring few settings on the CloudFlare dashboard.
- Select the website in your CloudFlare –> click on Crypto–> Go to SSL tab
Here you will have 3 alternatives to choose from-
1. Flexible
For many websites that do not have an SSL certificate, they usually opt for “Flexible SSL”.
Flexible SSL creates a secure (HTTPS) connection between the website visitors and CloudFlare and then an in-secure (HTTP) connection between CloudFlare and the origin server. The data will be encrypted between the website visitor and CloudFlare but not between CloudFlare and the origin server. Website visitors will not see an SSL lock icon in their browser.
2. Full
For websites that have an SLL certificate but a free version from Let’s Encrypt opt for “Full”.
Full SSL creates a secure (HTTPS) connection between the website visitor and CloudFlare and also a secure (HTTP) connection between CloudFlare and the origin server. The data will be encrypted between the website visitor and CloudFlare and also between CloudFlare and the origin server. Website visitors will see the SSL lock icon in their browser but this SSL certificate is not signed by an authentic certificate authority as it a free version.
3. Full (Strict)
For websites that have a paid SLL certificate from vendors such as Comodo, DigiCert, GeoTrust ,etc.
Full(Strict) SSL creates a secure (HTTPS) connection between the website visitor and CloudFlare and also a secure (HTTP) connection between CloudFlare and the origin server. The data will be encrypted between the website visitor and CloudFlare and also between CloudFlare and the origin server. Website visitors will see the SSL lock icon in their browser and this SSL certificate is signed by an authentic certificate authority as it a paid version.
When we configured our website with the Let’s Encrypt Free SSL and opened our website we encountered with a bug name “Mixed Content”.
What Is This Mixed Content?
Mixed Content = Mixed Protocol (HTTPS + HTTP)
When we configure SSL and when the webpage is loaded over SSL (HTTPS protocol), most browsers expect all of the content (images, links, themes, etc.) to be loaded over the same protocol i.e HTTPS. Some browsers will display an error about loading “insecure content” while others will just block the insecure content outright. This happens when all the content is not migrated to HTTPS and some images or links still possess HTTP protocol.
This error only applies to pages loaded over SSL, since the browser is working to make sure that secure pages only load equally secure content.
How Did We Get Rid Of It?
STEP 1: Forcing All Pages to HTTPS
Login to the admin WordPress dashboard –> Goto Settings –> General and change the WordPress URL address to HTTPS
STEP 2: Edit the “wp-config.php” file
Open your wp-config.php file and add the below line to it. This will force all the HTTP traffic to HTTPS.
STEP3: Install Plugin and Adjust the Settings
You can also install the CloudFlare WordPress Plugin and make the necessary configurations.
There are few other plugins which help in identifying the insecure content. Some of them are-
- WordPress HTTPS (SSL) (mentioned above too)
- WordPress HTTPS Test
- SSL Insecure Content Fixer
The problem with these plugins is that it will display warning notification to not only the admin but all the website visitors as well which will dent the websites value.
Step 4: Make use of Tools that will identify the insecure content
Whynopadlock is a free tool that will help you find the list of images/links that are using the HTTP protocol. Once you identify them, you can manually take the actions in your theme/ plugins.
Step 5: Make use of Google console to identify the insecure content
Open you webpage in chrome–> Right click anywhere on the page–> Click on Inspect–> Select the console tab
This will display all the assets with insecure content and you can take necessary actions to rectify them.
After making these changes, if you refresh your web page you will see the secure page with no warnings.