Mixed Content, or mixed content, is a very common issue among those who have just installed an SSL certificate. In a nutshell, it occurs when some data is fetched using the HTTP protocol while other data uses HTTPS. How can you deal with this problem? We invite you to read this article.
Yellow or Green – How to Identify the Problem?
A mixed content issue manifests itself by replacing the characteristic green padlock (which indicates an SSL-secured connection) with a yellow padlock, signifying a mixed connection. Interestingly, there is a rather simple method to detect which elements of the website are responsible for displaying this warning. Here, as usual, Firefox and its built-in developer tools come to our aid.
What to Do?
Begin by launching the popular “fox” (Firefox), preferably in Private Browsing mode. Then press F12 and go to the first tab – Console. Alternatively, you can use the simple keyboard shortcut Ctrl + Shift + I.
In the open console, you will see all the files currently being displayed using the HTTP protocol. These are most often passive content. Their behavior might result from the fact that they are hotlinked images. If we were to look into the site’s code, we would most likely see an HTTP link in the src attribute.
The detected error can have very serious consequences for your website. Its presence can lead to what is known as a “man-in-the-middle” attack. This involves intercepting transmitted information that is not protected by an SSL certificate, and then a third party obtaining private data.
Once the problem has been located, we proceed to remove it. How to do this? In the case of sites with not overly complex code, it’s enough to change the marker in the appropriate attributes from HTTP to HTTPS. Alternatively, you can add specific entries directly to the .htaccess file. Thanks to these, the script will enforce the use of the HTTPS protocol.
Mixed Content and WordPress
Resolving mixed content issues in WordPress starts with analyzing the basic settings and—if necessary—changing them to HTTPS. If this step doesn’t bring the desired result, you can use a special dedicated plugin whose role is to replace HTTP with HTTPS. One such plugin, which should fix all faulty links, is Better Search Replace. This application is relatively simple to use. The advantage of this tool is the ability to quickly change addresses to HTTPS during operation. This way, WordPress is not overly burdened, which of course translates into its speed and performance.
What Next?
After identifying and fixing the malfunctioning links, all the information fetched by your site should use the SSL certificate. If the same errors appear again, it’s worth re-examining the site’s content for recurring issues. Perhaps during code inspection, one of the previously mentioned errors was overlooked.
Summary
SSL certificates are there to be used. Under no circumstances should you allow so-called mixed content to be generated, as it is a very common gateway for online threats. Naturally, the proper functioning of a certificate does not preclude the possibility that over time it may lead to other errors that generate mixed content.