SSL certificate – Mixed Content – the reason for the lack of a green padlock

Context

Modern browsers require websites to load all resources (pages, images, scripts, styles) over a secure HTTPS connection. Even if a valid SSL certificate is installed, the browser may still show a warning or a missing/gray padlock if some elements are loaded over HTTP.

This issue is known as mixed content.

It does not necessarily mean the SSL certificate is invalid, but that parts of the website are not fully secured.

Diagnostics

After adding a website in the mybox panel, a free Let’s Encrypt SSL certificate is automatically generated and applied. If it is active, the website should normally load over HTTPS without issues.

However, you may still see:

• a warning icon in the browser
• a yellow or missing padlock
• a message indicating the connection is not fully secure

To diagnose the issue:

1. Check the SSL status in the browser

Click the lock or warning icon in the browser address bar to verify certificate details.

2. Open developer tools

Right-click on the page and select Inspect.

3. Check the Console tab

Go to the Console tab.

You may see warnings about resources loaded via http:// instead of https://. These indicate mixed content issues.

Common examples:

• images loaded via HTTP
• scripts or CSS files using insecure links
• external resources not supporting HTTPS

4. Identify affected resources

The console output will show which files or URLs are causing the issue. These must be corrected manually or through CMS settings.

How to fix mixed content issues

The solution depends on how your website is built.

HTML-based websites

If your website is built manually (without a CMS):

• Review the source code
• Replace all http:// links with https:// where possible
• Ensure all external resources support HTTPS

To enforce HTTPS site-wide, you can add the following rule to your .htaccess file:

RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

WordPress websites

For WordPress-based websites, the simplest solution is to use a plugin that automatically fixes insecure resource URLs.

Recommended plugin

Install Really Simple SSL

Installation steps:

1. In the WordPress dashboard, go to:
   Plugins → Add New
2. Search for:
   Really Simple SSL
3. Click Install Now
4. After installation, click Activate

In most cases, default settings are enough to resolve mixed content issues by rewriting resource URLs to HTTPS.

Practical implications

• SSL certificate may be valid even if the padlock is not fully green
• Mixed content is caused by website resources, not the certificate itself
• Fixing requires updating HTTP references in code or CMS settings
• Browsers may cache results, so changes may not appear immediately

Summary

Mixed content occurs when a website loaded over HTTPS includes resources loaded over HTTP. Even with a valid SSL certificate, this prevents browsers from showing a fully secure padlock. The issue is resolved by ensuring all website resources are loaded over HTTPS.