Previously, there was a green secure lock in the browser. It has now been replaced by a neutral or grey symbol, depending on the browser. This change was made because tests showed that users were misinterpreting the green secure padlock as guaranteeing the security of the entire site, not just the connection. In this guide, however, we will focus on using the old, more friendly yellow and green safe lock names.

Currently, despite the SSL certificate being switched on, so-called mixed content ( the yellow secure lock in the past) can appear. Why does this happen?

Sometimes it happens after installing an SSL certificate on a website and configuring the site to display as https://. A yellow secure lock or a secure lock with a warning triangle icon will appear in the browser instead of a green secure lock. The problem is that some of the website’s files were downloaded using HTTP rather than HTTPS, in other words without encryption. This means that on the website, some files (usually images) are downloaded without HTTPS. Often such files have a hard-coded address in the code specifying the HTTP protocol. Another designation for this issue is so-called ‘mixed content’, i.e., mixed page content (HTTP and HTTPS).

How to find the files that are causing the mixed content problem?

We will illustrate with the example of the developer tools in the Mozilla Firefox browser.

After launching the browser (preferably in a private window), we click F12 and go to the ‘Console’ tab. This can also be done by clicking Ctrl + Shift + i. A panel will then open as shown in the screenshot below.

The console displays all files that are displayed via http rather than https. This is most often passive content (e.g. linked images), which contains an HTTP request rather than an HTTPS request in the src attributes in the links. There is also such a thing as mixed active content. This type of mixed content is dangerous in that it can lead to a man-in-the-middle attack, i.e. intercepting an HTTP request and stealing sensitive data.

Once we know which files are causing problems, we can try to deal with them. In the case of a simple page, the best thing to do is to look for the relevant url in the page code, changing http:// to https://. It is also worth considering adding entries to the .htaccess file to force https.

Removal of mixed content in WordPress

To start with, you might want to take a look at the WordPress general settings, make sure there is ‘https’ in the address and save the settings. If that doesn’t help you can try using a plugin to fix the links. I recommend looking at the Better Search Replace plugin. It is easy to use, and effective. It doesn’t replace addresses on the fly, but changes the entries in the database permanently, so it doesn’t overload our WordPress as much. You will find how to do this with its help in our tutorial: Enabling an SSL certificate in WordPress – Guide.