How to fix your mixed content SSL Certificate

This issue applies to WordPress sites they were previously not secured with an SSL Certificate.
After installing an SSL Certificate, you are excited because you have improved the security for your visitors and know that Google will not penalize your website for being insecure.

You are now pumped up, but instead of seeing a solid green padlock like this:

You see a padlock with a yellow icon warning, so what happened?

If you click on the yellow warning icon, this is what you may see:

 

“What is Mixed Content?”
It’s content such as video, JavaScript, CSS, etc. invoked over HTTP within a page that loads over HTTPS. For example, if you type https://domain.com in a browser and the page you see contains an image invoked via “http://external.com/resource.jpg” in the HTML, this jpeg file is mixed content because the img request is for a full URL over HTTP, as supposed to using an encrypted connection over HTTPS like https://domain.com was. [Cloudflare]

First Step: Testing

 

Before we dive into the problem, we need to perform several tests.
These tests can all be accomplished using several online free tools that are available.
So what is the purpose of these tests?

  1. Verify that there is an SSL Certificate problem
  2. The test result may give clues to where the problem exists:
    • Incorrect url for images, css, and javascript calls: must be served from a secure location
    • Invalid or expired SSL certificates
    • Invalid Third party scripts (forms)
    • Externally loaded fonts

Bottom Line:

Testing your website is to help you highlight any unsecure items on your SSL page so you can fix it.

Verify Problem

This SSL Checker will help you diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn’t give any errors to any of your users. To use the SSL Checker, simply enter your server’s hostname (must be public) in the box below and click the Check SSL button. [SSLshopper]

 

The following sequence is from an actual website with a Mixed Content issue that I recently fixed.

The first step is to verify that your SSL certificate is trusted and installed properly, by using
SSLShopper SSL Checker.

In this example, the SSL certificate is:

  • Trusted
  • Installed properly
  • Certificate not expired

Errors
If you encounter any errors, you need to stop and check with your host provider and verify the authenticity of your certificate and it is not expired.

If it was purchased and installed manually, you need to verify your installation process and check with the certificate provider for its authenticity.
Is your Certificate Signing Request (CSR) valid?
Is your Private Key missing or incorrect?

Here is a list of other SSL Checkers that you can use to verify your issues.

If your website passes this test: checks within the green circles, you can move to the next step.
Scroll down to the Why No Padlock Test.
 


 

List of other online tests:
 

SSL Certificate Tests

Online Testers to test your SSL Certificate authenticity, installation, and vulnerabilities.
Test SiteDescription
WhyNoPadlockAre you pulling your hair out trying to find out why your secure page is not fully secure? Here's a simple tool that will tell you about any insecure items on your SSL page!
Qualys.ssl labsThis free online service performs a deep analysis of the configuration of any SSL web server on the public Internet.
SSL ShopperThis SSL Checker will help you diagnose problems with your SSL certificate installation. You can verify the SSL certificate on your web server to make sure it is correctly installed, valid, trusted and doesn't give any errors to any of your users.
DigicertIf you are having a problem with your SSL certificate installation, please enter the name of your server. Our installation diagnostics tool will help you locate the problem and verify your SSL Certificate installation.
GeocertsSSLSSL made simple. Verify that your SSL certificate is installed correctly on your server.
Comodo SSL AnalyzerFree SSL Certificate Checker, SSL Vulnerability Scanner and SSL Server Configuration Reporting Tool from COMODO.
SSL CheckerWe will show you errors, authority, subject, expiration date and more.
RapidSSLonlineThis tool can verify that the SSL Certificate on your web server is properly installed and trusted. SSL Checker will display the Common Name, server type, issuer, validity, certificate chaining, and more certificate details.

Why No Padlock Test

If the previous test (SSLShopper SSL Checker) has confirmed that your SSL Certificate:

  • Has been installed properly
  • Is valid and up to date
  • Is trusted

You can move on to the next test below.

Are you pulling your hair out trying to find out why your secure page is not fully secure? Here’s a simple tool that will tell you about any insecure items on your SSL page! [WhyNoPadlock]

 

Find What Is Not Secured

Use this awesome tool: WhyNoPadlock

This test will provide hints and highlight insecure sources for causing the mixed content error.
In most instances, it’s pulling in an image with an insecure URL:
Example
http://website.com/images/background.jpg

This image URL should read:
https://website.com/images/background.jpg
 


 

Part 1

Only verifies what the previous SSL Shopper test determined.
This certificate is:

  • Trusted
  • Installed properly
  • Not expired

 

Part 2

The second half of the WhyNoPadlock test will display any errors that it has found.

Two types of errors:

  1. Hard Failure – JS, CSS, or PHP file has http hard coded links in the scripts.
  2. Soft Failure – In the majority of cases incorrect image url: using http instead of https

The errors displayed in this particular website were only soft failures.

How About Hard Failures?

In other websites that I have had to troubleshoot, the hard failures were found in the following scripts:

1) Contact Form: http link hard coded in the scripts. Reinstalled the contact form scripts from the contact form source.
2) Analytics Code: http link hard coded in the scripts. Reinstalled the analytics code from the analytics source provider.
3) External CSS file: http link hard coded in the scripts. This was the original file before the website was updated with an SSL Certificate. Downloaded CSS file and edited the link, uploaded updated file.

So how did I determine that these hard failures were in these scripts?
WhyNoPadlock results showed me the hard errors and location of the incorrect code.

Second Step: Fix It

Now that you have gathered the preliminary data from the previous tests, you now proceed to fix it.

There are three possible phases (or stages):
1) Using available WP Plugins: normally I have found that 75% of these errors can be resolved with these plugins.
2) Manually finding the corrupt file, image, or script: for one reason or another, sometimes these plugins will not be able to fix the issue. You then need to physically go into the files to find and correct the error.
3) Database: it it is determined that the incorrect URL is located in your database.
You can either use a plugin or phpMyAdmin to correct the problem.

Stop

Do you have a backup of your website?
If not I highly suggest you create one before continuing with the repairs!

Phase 1: Plugins

The cool feature of WordPress is that there are FREE plugins available to help you rectify your problem.
Install and activate the following plugins one at a time.
You may need to install more than one of these plugins to remove all the failures.

Force HTTPS – SSL Redirect & Fix Insecure Content. Redirects all HTTP requests to the HTTPS version and fixes all insecure static resources without altering the database (also works with CloudFlare).

SSL Insecure Content Fixer – Clean up your WordPress website’s HTTPS insecure content and mixed content warnings. Installing the SSL Insecure Content Fixer plugin will solve most insecure content warnings with little or no effort.

Really Simple SSL – Really Simple SSL automatically detects your settings and configures your website to run over https.
To keep it lightweight, the options are kept to a minimum. The entire site will move to SSL.

WP Force SSL – This plugin does work well, but caution.
It has not been updated for over 2 years as of this post.
This plugin helps you redirect HTTP traffic to HTTPS without the need of touching any code.

If these plugins do not resolve your issues, you will have to move on to Phase 2.

Phase 2: Manual Fix

Tools Required:

  • FTP
  • Cpanel File Manager
  • Text Editor

Before proceeding with this Phase, you need to be familiar with these tools.
The main emphasis is having access to the WordPress files on your server.
In addition, some file editing may be required, so you will need a Text Editor on hand.

If you do not know what these tools are, I suggest you find someone who is familiar with using an FTP Client or your Cpanel File Manager.

I will use actual data from a website that I had to fix for this example.
After installing the above-mentioned plugins, I could not resolve the soft failures that the WhyNoPadlock test provided.

So using one such soft failure as an example, follow me as I manually dig into the WordPress files to correct this issue.
See the error below.

The WhyNoPadlock test reveals where this particular Soft Failure exists.
I highlighted in yellow the actual path where this JS file exists.

This path for this JS file location:
Content Folder > cache folder > minify folder > file df983.js > line 1

I am using Filezilla FTP for this example to find this particular file.
You can follow the identical sequence using the File Manager in your Cpanel dashboard.

1) Look for the wp-content folder
2) Look for the cache folder
3) Look for the minify folder
4) Find the df983.js file

So you finally found the files: Now What?
What we have here are minified files produced by a caching plugin.
The image reveals numerous JS and CSS files.
We also have found the df983.js files targeted by WhyNoPadlock.

Pause, Going off track for a quick Note:
If this were a normal CSS or JS file, you would need to accomplish the following steps:

  1. Download the CSS file.
  2. Open this file in your text editor.
  3. If this file has been minified, you will need to unminify the code.
    • Using the online tool unminify.com, paste code into box to extract the code.
    • Save this file with another name (unminify.css) so as not to confuse it with the original file.
    • Reopen this file in your text editor.
  4. Find the unsecure URL (http://) and correct the URL to https://
    • Using the online tool minifier.org, paste code into box to minify the code.
    • Save this file to it’s original name.
  5. Upload the edited file back to the server (making sure into the correct folder).
  6. Rerun the WhyNoPadlock test (clear the previous test and rerun).

Back to our example, I deleted the JS file: Here is Why!
The files we are looking for is located in the cache > minify folder.
This folder was created by a certain caching plugin, to store the cached files.

  • These files are regenerated, by default. Most Cache plugins cache a page when it is first requested.
  • Some of these files are Gzip Compressed.
  • Since there are a myriad of cache files, deleting a set of files for a certain day will not even be noticed.
  • In this case, instead of attempting to uncompress the files and make the correction, I just deleted the subject files to clear the soft failure.
  • Since these files (df983.js) was not the most current, removing them will not affect the operation of the website.

Doesn’t Purging the Cache delete all the cache files in the folder?
It suppose to clear the cache folder, but there are several possibilities why they still exist:
1) Many times a website owner will try various caching plugins
So when they delete a certain caching plugin, it may not delete all the files.
In other words, there be some leftover files from the previous plugin on your server, which could be causing the soft failure.

2) You have to check the settings of your plugin, each plugin has it’s own setting choices.
It may have an option to only purge the HTML files, etc.
You need to go in and verify your settings.
Or
Some caching plugins (W3c) may install scripts in the .htaccess file to encourage caching static files.
So check your .htaccess file.

3) If you are using a CDN (Content Delivery Network), your site could be calling in these older files?
You may need to purge the CDN.

4) I don’t have all the answers, so maybe this link from WordPress.org Support may help if you are interested.

How About the Database?

What if the issue is in the database?
Mixed content problems can be located in the database.
Just that I have never come across a Mixed Content issue in any database on the few websites that I have worked on.
Remember as I stated earlier, be sure you have a backup before “touching” your database.

You have are two options to find and correct the problem URL:
1. Plugins:

2. phpMyAdmin: in your cPanel

  • You will need to know how to use phpMyAdmin to search and find the problem URL

Third Step: Retest

If you believe you have cleared all hard and soft failures listed on the previous WhyNoPadlock test,
you are now ready to verify your fixes by performing a retest of your website.

If you still have the WhyNoPadlock test results tab open, click the Test Again button.

If you already closed the WhyNoPadlock test browser tab or are retesting days later, you can just run another test as you normally do.
I suggest first clearing your browser’s cache and history.

This is the final screenshot of what you want to see.

Yes! Yes!
Isn’t it an awesome feeling when you fix your own website!

But wait, there is one final test to perform to verify your website is fully SSL secured.
Open your website and look for the Green Padlock.

Conclusion

Every website with a Mixed Content Failure has their own distinctive problems.
So the examples in this troubleshooting guide may not be the exact situation that you face.

But hopefully, this SSL Certificate Mix Content Troubleshooting guide will give you a foundation as to what you need to do to fix your WordPress website.

You at least have a start, using the free online tools that are available.

Hopefully, this guide will help you resolve your Mix Content issues.
Let me know if it did!
 



Gerald Watanabe
Islandwebtek



Divi WordPress Theme


Share This