Useful WordPress PLugin to resolve HTTPS insecure content and mixed content warnings on WordPress

Nowadays, most recent browsers expect websites to have HTTPS in the URL, meaning SSL certificate installed on server, which makes websites which used to be accessible over simple, insecure HTTP protocol to more secured HTTPS. In one of the previous post -I posted about "How to fix partially encrypted/mixed content errors after switching from HTTP to HTTPs (SSL)". In this post, we shall discuss particularly on "How to resolve HTTPS insecure content and mixed content warnings on WordPress Websites?"

Before we discuss "How to resolve HTTPS insecure content and mixed content warnings on WordPress Websites?", here are some information on HTTPS / HTTP. 

What is HTTPS?

Simply put - 

HTTPS = HTTP + SSL

 

HTTP (or Hyper Text Transfer Protocol) is the protocol or method used by which data is moved around the Web but HTTP is not secure. HTTPS (or Hyper Text Transfer Protocol Secure) is the answer to the data protection issue. It used to be mostly used by eCommerce and banking related sites. HTTPS protects data by encrypting it before sending it either way by using an SSL (Secure Sockets Layer) Certificate.  

Browsers show the following "Connection is not secure" alert when accessing a website without HTTPS:

 

Applied SSL but Getting “insecure content” warnings from some content
You are probably loading content such as images with a URL that starts with “http”.

How to resolve HTTPS insecure content and mixed content warnings on WordPress Websites?

One way to resolve insecure content and mixed content issue on WordPress is to do it manually like on any other websites. In manual process, we have to find references to HTTP and replace occurrences of HTTP with HTTPS. Such occurrences would usually be in CSS, JS and other files referring to content within the same site or external resources etc. 

To identify insecure content and mixed content, we can use web browsers' Inspect Element > Console which shows common errors with the web page.

To identify what is causing your page(s) to be insecure, check browser's error console.

• Google Chrome has a JavaScript Console in its developer tools
• FireFox has the Web Console or Firebug
• Internet Explorer has the F12 Tools Console
• Safari has the Error Console

In the Console, we would see items which are marked partially encrypted. You should see an entry in the console similar to:

“The page at https://www.example.com/ displayed insecure content from http://www.example.com/.” Note that the URL that is loading insecure content is HTTP and not HTTPS."

After identifying the faulting file or reference, find the file and replace HTTP with HTTPS. Or instead of using hardcoded HTTPS, it is best to provide a relative path.

 
For example if there is a link with HTTP -
`http://www.example.com/wp-content/themes/mytheme/images/background.jpg`
 change it to 
`/wp-content/themes/mytheme/images/background.jpg`. 

If you want to manually resolve the insecure content and mixed content issue , refer to the previous post here- "How to fix partially encrypted/mixed content errors after switching from HTTP to HTTPs (SSL)"

Using a WordPress Plugin:

Resolve HTTPS insecure content and mixed content warnings on WordPress Website using a WordPress plugin.

Though the issue of insecure content and mixed content can be resolved manually, the process is a bit tedious. If you do not want to do it manually, then there is a WordPress plugin to fix the insecure and mixed content issue. With this plugin, insecure and mixed content errors can be easily resolved without any manual work.

SSL Insecure Content Fixer WordPress Plugin

SSL Insecure Content Fixer WordPress Plugin

This plugin would be a handy tool for any one looking to fix  insecure content and mixed content issue with WordPress websites. Install the SSL Insecure Content Fixer like installing any other WordPress Plugin and activate it.

The plugin has the following level of operation: [source: https://wordpress.org/plugins/ssl-insecure-content-fixer]

1) Off: No insecure content is fixed.

2) Simple: Fastest Method, least impact on website performance.

What it does:

•    scripts registered using wp_register_script() or wp_enqueue_script()
•    stylesheets registered using wp_register_style() or wp_enqueue_style()
•    images and other media loaded by calling wp_get_attachment_image(), wp_get_attachment_image_src(), etc.
•    data returned from wp_upload_dir() (e.g. for some CAPTCHA images)
•    images loaded by the plugin Image Widget

3) Content: Everything that Simple does, plus:

•     resources in the page content
•     resources in "Text" widgets

4) Widgets: Everything that Content does, plus:

•     resources in any widgets

5) Capture: Everything on the page, from the header to the footer:

•     capture the whole page and fix scripts, stylesheets, and other resources
•     excludes AJAX calls, which can cause compatibility and performance problems

6) Capture All: The biggest potential to break things, but sometimes necessary

•     capture the whole page and fix scripts, stylesheets, and other resources
•     includes AJAX calls, which can cause compatibility and performance problems

Most common insecure or mixed content issue can be resolved using the simple setting. It is recommended to try the simple setting first and check the browser's error console again. If errors are still present, up the level and try which one resolves.