How to fix Joomla mixed content warning for HTTPS

Google uses many factors for ranking websites, HTTPS is one of them. Those websites which don't have it or use mixed-content are "punished". Lots of webmasters/site owners bought SSL-certificates and switched to HTTPS for their websites. But after enabling SSL, instead of a green padlock, they have a yellow padlock icon in the address bar. Most people wonder, why it happened and how to fix it. In this blog post, we will help you diagnose a common problem with your SSL enabled site and show the way to solve it.

How to enable HTTPS in Joomla

This first step depends on what hosting provider you have. Some of them in their hosting panel have built-in option to order or just switch it. In most cases, the certificate comes from Let's Encrypt. You can order on the project site as well, but then you have to chat with your hosting support on how to implement it. If you need more information about that topic - please read our earlier guide.

The second very important part is to enable HTTPS connections inside Joomla! itself. Joomla can force the use of SSL through the Force SSL option in the Global Configuration area (under the "Server" tab).

Figure: Joomla 3.x Global Configuration area under the Server tab.

Another important part which I always suggest to do is, to add a few lines of extra code into .htaccess file. Just behind "RewriteEngine On":

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

Then if possible add full website URL into configuration.php:

var $live_site = 'https://www.my-domain.com';

Now, at least in theory, the whole website should be secured by SSL certificate. If not, please go follow.

The yellow padlock icon in the address bar - what is that?

Even having a valid SSL certificate may not mean that all pages will load in secure way. When a site doesn’t fully protect or secure all contents (images, styles, and scripts), a browser will display a “mixed-content” warning. Modern browsers display warnings about this type of content to indicate to the user that this page contains insecure resources. In the address bar, you can see a yellow padlock icon instead of green one (suggested).

This kind of warning occurs when a web page containing a combination of both secure (HTTPS) and non-secure (HTTP) content delivered over SSL to the browser. Any web page using an HTTPS address must have all of the content (links) coming from secure sources only.

Requesting subresources using the insecure HTTP protocol weakens the security of the entire page (website), as these requests are vulnerable to man-in-the-middle attacks, where an attacker eavesdrops on a network connection and views or modifies the communication between two parties. Using these resources, an attacker can often take complete control over the page, not just the compromised resource.

Chrome blocked my content, but why?

Different versions from different browser vendors behave differently with mixed content. Browsers block many types of mixed content by default, like scripts and i-frames. But images, audios, and videos are still allowed to load, which threatens users’ privacy and security. Starting in Chrome 79 (December 2019), Chrome will gradually move to blocking all mixed content (insecure http:// subresources on https:// sites) by default.

This change should improve user privacy and security on the web, and present a clearer browser security UX to the users. To minimize breakage, Google Chrome will autoupgrade mixed resources to https://, so sites will continue to work if their subresources are already available over https://. Users will be able to enable a setting to opt out of mixed content blocking on particular websites, and below we’ll describe the resources available to developers to help them find and fix mixed content.

Instead of blocking all mixed content all at once, Google decided to roll out this change in a series of steps:

• In Chrome 79 (December 2019), Google will introduce a new setting to unblock mixed content on specific sites.
• In Chrome 80 (January 2020), mixed audio and video resources will be auto-upgraded to https://, and Chrome will block them by default if they fail to load over https://.  Users can unblock affected audio and video resources with the setting described above. Mixed images will still be allowed to load, but they will cause Chrome to show a “Not Secure” chip in the Omnibox.
• In Chrome 81 (February 2020), mixed images will be auto-upgraded to https://, and Chrome will block them by default if they fail to load over https://. 

Popular causes of mixed-content warning

• Insecure calls to images, CSS, and JavaScript from components, plugins or modules.
• Images called insecurely from linked CSS and js files.
• Expired certificate, invalid or missing intermediate certificate (including 3rd party SSL certs.).
• SHA-1 algorithm test, POODLE test, insecure form calls for Chrome.

How to find & resolve mixed content warnings

Do SSL troubleshooting. Finding and resolving mixed contents in most cases is quite easy, but may take some time. You can search for mixed contents by manual searching for HTTP elements directly via your source code. Load the page with HTTPS enabled, then right-click anywhere on the page; and click “View Page Source”, “View Source”, or “Source”, depending on your browser.

Then use the “Find” command and search for "http://www.yourdomain.com" (and without www) phrase. Then you have to find that module or content in article/page builder and fix the path. Once you find the content being served over HTTP vs. HTTPS fixing the issue is often as simple as adding an “s” to links – http:// to https://. You can do this inside article, addon and module content.

In some cases, if you are using third-party components or templates, this issue may come from them, so you have to update or contact the developer(s) or edit the extensions file(s) yourself.

To identify and replace HTTP with HTTPS in Joomla! content (database) you can do the Database Search and Replace process, it will be a much faster method than fixing one by one. Before you run the tool for it, please be sure to have a database backup. 

Extensions & Tools that can help

First, use the Joomla plugin named:

• SSL Fixer (https://extensions.joomla.org/extension/ssl-fixer/) - it replaces all internal URLs from HTTP to https, also it can replace all popular SSL hosts from HTTP to https (like fonts.googleapis.com). It may help to fix insecure external hosts (domains without SSL support) fetching the content of the resource (image/css).
• doSSL (https://www.redim.de/downloads/erweiterungen/dossl) - automatically turns all insecure HTTP elements into HTTPS elements as soon as your website is accessed via HTTPS. In addition, Joomla! Plug-in creates a "canonical" link that refers to your page without https. If you do not want this, this can be deactivated in the settings.

As the second step, there are tools, also online, that work as HTTPS checkers. These can check your domain for all issues or filter to just passive and active mixed content issues, or even show Chrome's "Not Secure" warning on insecure forms. After completing your scans, you have to manually fix all issues. Note, those tools can not edit your website content.

SSL troubleshooting tools

• HTTPS Checker (Desktop application for Windows, Mac, Linux)*
• SSL Check Jitbit (Online tool) **
• SSL Error Checker (Online tool)
• WhyNoPadlock (Online tool)

 * The free version allows you to crawl up to 500 pages.
** The number of pages crawled is limited to 200 per website.

Conclusion

If you’re going to have an SSL certificate on Joomla! 3.9+ and serve all pages via HTTPS, work hard to resolve all “mixed content” warnings. Your visitors deserve a safe as well as entertaining experience. By using SSL, you guarantee the highest possible encryption levels for online transactions, better Google ranking and your website content won't be "blocked" by Google.