Fix Mixed Content Issue – How To Properly Configure SSL/ HTTPS On WordPress Site

24
14

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

 

WordPress General Settings

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-

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.

24
Leave a Reply

23 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
23 Comment authors
  Subscribe  
newest oldest most voted
Notify of

Hi keertan,
Your article is great tutorial for me and other website owners, because people want to visit secured site most. And your tutorial is really amazing and informative. I would say you’ve done a great job with this. You’ve described each and every point clearly and simply, yet effectively.
Thanks for sharing this precious information with us.

tq very much sir i got very hep from this article

Awesome !

Great Content
It helps me alot
Thanks for Sharing 🙂

Thank you very much for this article

I got same error on my blog its time to solve it

I went over this site and I think you have a lot of wonderful info, saved to my bookmarks (:
.

That type of extreme boozing has fueled a public
perception that Stagecoach is rougher and drunker than the apparently more teetotaling Coachella festival.

amezing post, ssl certificate a most important to website because ssl improve site PA, DA profamace thank you for this post

You got a very good website, Sword lily I discovered it through yahoo.

Finally, it got solved. Extremely lucky to reach this article…It’s lit bit tricky but you get the right solution at last.

Thanks a lot dear.

Thanks for sharing.

This for tutorial now my website enabled https

Thanks a lot. The post is of most help. I fixed the issue right away after implementing the quality steps included in this article. Once again thanks a lot.

This article very helping new blogger good

Great content I ? ed happy t hanks

Awesome it really great. Thank you so much for the great article.

Awesome it really great. Thank you so much for the great article.

Awesome it really great. Thank you so much for the great article.

Wow thank you dear for share amazing tutorial because ssl is most important for every website’s

Thanks on your marvellous posting! I certainly enjoyed reading it. I will remember to bookmark your blog and will eventually come back from now on.Also look for mumbai to shirdi taxi I want to encourage that you continue your great writing, have a nice day!

I an looking that’s things; Thank You

Thanks for putting such a great article which is full of valuable words..

Such an interesting post keep it up in future..

Fabulous writing it is such a cool idea …