Having an SSL certificate on your website has become crucial not only because encrypted traffic helps protect users’ private data but it is also critical when it comes to SEO positioning.
Also, most of the browsers like Google Chrome (if not all) are pushing more and more to the adoption of these protocols, showing warnings like Mixed Content to the website visitors which then can deter them from visiting the site.
An SSL certificate well-implemented will definitely help the positioning of our website in the different search engines’ results. However, when integrating an SSL or migrating from HTTP to HTTPS, website owners may encounter several problems. One of them is the so-called “mixed content” problem.
What Is Mixed Content?
First, we have to understand that HTTP is a protocol to exchange information between servers and clients. A mixed content pops up when the site that a certain user is trying to load, serves HTTPS and HTTP content at the same time. (HTTPS being a secure i.e. encrypted variant of the HTTP protocol)
In such a case, when you have an HTTPS that includes HTTP content on it, the HTTP portion is potentially vulnerable as the same can be altered by hackers even if the main page of your website is served via HTTPS.
And this is the well-known “mixed content” problem. The page you are calling is partially encrypted and despite the fact that it shows out as secure, it isn’t.
Here are some additional causes of this warning:
- New plugin/theme added to your site using absolute paths i.e. http://domain.com/style.css to link to CSS and JavaScript, instead of using relative paths (/style.css).
- You have embedded video scripts using HTTP instead of HTTPS.
- Links to external scripts included in CSS and JS files that do not have HTTPS enabled
- Your images have encoded URLs (such as http:// domain.com/image.png) that run over HTTP. These may be within posts, pages, or even widgets.
Beware there are two main types of mixed content: active and passive. The active mixed content is when web pages are loaded through secure HTTPS connections but contain scripts that load over HTTP as well. On the other hand, passive mixed content happens when an image, video, or audio files are uploaded through HTTP.
Therefore, when redirecting all your traffic site to HTTPS, make sure everything does go through that protocol (images, JavaScript files, etc). Otherwise you are faced with high security risk since cybercriminals can take advantage of the HTTP links on your website with the only intent to steal your credentials details, take control of your account, private information and install malware on your computer.
Mixed Content Checker
Identifying mixed content is rather simple, most modern browsers include a developer section where you can find a developer console.
To check in your browser please right-click go to Inspect Element > Web Console. For this example, the result is:
How To Fix Mixed Content
Step 1: Confirm that your website is indeed using a valid SSL Certificate. To determine the status of your SSL certificate, click on the information icon that appears where the padlock should be in your browser’s address bar. Then select Certificate (Valid).
There are some hosting providers that have a built-in feature for SSL certificates. OneHourSiteFix provides it as part of the Fix and Protect plan completely free and it will remain indefinitely active as long as your website is secure behind our firewall.
Step 2: Change website URLs from HTTP to HTTPS
If you are still dealing with mixed content after installing an authentic SSL certificate, chances are the website has not been set up properly for HTTPS encryption. Some WordPress sites for example within the backend have the option to adjust this part (almost automatically). Therefore, you need to set up a rule to serve all URLs as HTTPS.
Step 3: Add a rule to redirect HTTP to HTTPS
Another problem that may be causing this issue is if you don’t implement 301 Redirects to automatically send visitors to the secure version of your pages. Thus you need to for example add a rule in the .htaccess file to redirect all HTTP URLs to HTTPS.
Step 4: Do a search and replace manually all links within the content.
Depending on the setup the first three steps described here will not suffice and you will have to manually detect all the URLs on your site i.e. its content that is still being served as HTTP. There are plugins out there that can help you or do it yourself via PHPMyAdmin.
Once done, please reload the website using a cleared browser and it should start loading HTTPS without mixed content.
In Conclusion
Mixed content warnings can be frustrating to deal with, especially when there are a handful of causes to which they can be attributed. In most cases, a simple search and replace should quickly resolve it and get your site back to normal in just a few minutes. If that doesn’t fix everything, it’s likely that one or two coded scripts remain. You’ll either have to find them and update them manually or reach out to us.
Leave A Comment