Last updated December 6th, 2023 00:30
HTTPS is a protocol that provides encrypted communication between the server and your browser. Simply put, this means that everything you send to or receive from the server is encrypted. So, if you enter your credit card number in your browser, the data is first encrypted, sent to the server, and then decrypted into readable form. If a hacker intercepted the data between you and the server, it would be useless to them because it would be encrypted. You may be familiar with this function mainly because of the green padlock in your browser. It indicates that the HTTP and SSL certificate on the website are functional and issued by a trusted authority. However, sometimes you may encounter a problem with HTTPS and mixed content. Let’s take a look at why it happens.
The problem with HTTPS and mixed content
Imagine a situation where you have an SSL certificate installed on your website, HTTPS redirection is active, but the padlock still doesn’t indicate a secure connection. In the overwhelming majority of cases, mixed content is to blame.
Simply put, this means that part of your code is correctly written for HTTPS traffic, but part of it is written incorrectly. To explain it better, the green padlock requires the entire source code to be secured.
In practice, this means that all links, whether internal or external, or any URLs on the website, must be with HTTPS in the source code. If any link or URL with HTTP appears on the page, it is considered mixed content, and the padlock will not display for such source code.
Why is mixed content a problem?
Mixed content is a problem for one simple reason. If any part of the source code involves unsecured communication, the browser cannot trust such a website. At least not in terms of granting the padlock. Therefore, the browser marks such a website as untrusted, to warn users that it is not entirely safe to enter sensitive information on such a website. Such information can be payment information, sensitive personal data, and basically anything that should not be disclosed to anyone else.
Websites with mixed content are usually (but not necessarily always) marked with a padlock with a yellow, warning triangle.
How to easily detect mixed content?
You can easily detect mixed content by using the so-called developer console. If you press the F12 key in your browser, you will open the developer tool, where you will be most interested in the Console tab. Here, you can clearly see any errors on the website, as well as any links or URLs that contain HTTP instead of HTTPS. This is the crucial point or points where the problem arises.
I have a problem with HTTPS and mixed content. How can I solve it?
There are two ways to solve this problem. The harder and better way, or the simpler but not entirely suitable way. The simple way is to use a plugin. You can usually find one in some form for every content management system. For WordPress, for example, it is Really Simple SSL. The disadvantage is that you introduce another element into the communication between the website and the server, which must adjust the output. This reduces the response time of the content management system and also reduces the memory allocated by the web hosting.
Therefore, it is better to make changes using a MySQL database and content modification. I won’t go into details. The principle is that you first back up the database to an SQL file. You then need to open the file in a text editor that can handle larger files. One such editor is PSPAD. In the editor, you use the “replace with” function and replace the expression HTTP with HTTPS in the content.
Once PSPAD goes through the entire file and changes all instances of HTTP to HTTPS in the content, you save the file and replace the original database content with it. This way, you can ensure that all URLs you insert are correct and avoid mixed content.
Conclusion
The problem with HTTPS and mixed content can be a headache for many users. However, the solution does not have to be as complicated as it may seem at first glance. If you want to delve deeper into database modification, I described the same procedure here: Migrating WordPress from a Subdomain to a Domain.
While this article describes rewriting a domain for a subdomain, the principle and procedure are the same.
The website is created with care for the included information. I strive to provide high-quality and useful content that helps or inspires others. If you are satisfied with my work and would like to support me, you can do so through simple options.
Subscribe to the Newsletter
Stay informed! Join our newsletter subscription and be the first to receive the latest information directly to your email inbox. Follow updates, exclusive events, and inspiring content, all delivered straight to your email.
