2 Ways to Fix The Dreaded Mixed SSL Warnings: Parts of This Page Are Not Secure

Let’s say you have just added an SSL certificate to your WordPress site and now you are seeing an error in your browser. No matter which web browser your visitors are using, if you have any non-SSL elements loading on an HTTPS page, visitors are going to see a broken lock with some kind of error message. There will usually be a lower case i inside of a circle. The most common kind of non-SSL content will be images, video content, stylesheets, scripts, and fonts. This article will cover how to fix Non-SSL sources on your self-hosted WordPress site. This doesn’t work WordPress.com since you can’t install plugins.

The exact dialog that shows in the browser depends on the as well as the operating system of the computer. Needless to say, this is going to have an effect on how most people view your website.
Not Secure warning in Chrome

Any time there is mixed or insecure content on a web page, the entire website becomes vulnerable to attack. While it doesn’t open the web page up to all types of cyber crime, it weakens the overall security of the site. This means that if a hacker breaches a website that loads mixed content, they might be able to take control of the entire page, not just the resource that is insecure.

While people that understand web technology understand what’s happening – that certain elements like images or fonts are being loaded with HTTP rather than HTTPS – most people are just going to see the error message and leave your site. This is why it’s important to go through all the pages on your website after you deploy SSL to make sure all the sources are being served via HTTPS. You’ll be happy to know that fixing these issues can be relatively easy to accomplish.

How to Fix Non-SSL Sources on an SSL Page

When it comes to fixing issues on your WordPress site to remove SSL errors, you have a couple of different options available.

First, you should locate all of the insecure content on your site. I recommend using Chrome by right-clicking on the page and select inspect. Look for tab labeled Console and click on that (it should be right next to the Elements tab). If there is mixed content on the page, you should see a yellow triangle with an exclamation point.

Mixed content error in Chrome Dev Tools

The Easy Solution

If your site is on WordPress (Not WordPress.com), one of the easiest ways to fix the problem is to install a plugin. I like have used Really Simple SSL and find it works well. While using this is really simple 🙂 it may not be the best way. It can add additional processing and slow your server down since it has to rewrite the links. Fortunately, there’s a better way to fix the problem permanently and it isn’t that difficult to do.

The Better Solution

In my opinion, the best way is to permanently fix non-SSL element errors. If there are just a couple of links that need to be fixed in your content, just locate the offending link and manually edit it. If there are more than just a few links, you can use a search and replace plugin. I have used Better Search and Replace and think it is a good choice. Once installed, you will find it in the Tools section of your WordPress backend. With this tool, you will be editing the database of your site. Always do a backup of your site before making any changes to the database!

The Fix

As a note of caution, if you are not sure about what you are doing, please hire a professional. Only you are responsible for what you do on any site you are editing.

After finishing the backup, open Better Search and Replace from the Tools menu Of WordPress. Copy the URL of the content you want to change and paste it into the find field. Paste it again into the replace field and edit the http:// to https://. Select the table to search, usually wp_posts, and click on the Run Search/Replace button. Reload the page and check your link. Rinse and repeat as necessary.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.