Yesterday noon, a new client contacted us and told us that he was having problem when using HTTPS on his Joomla website (the website in question was using the latest Joomla version, which is 3.6.4). He said many images did not appear, and it seemed as if no CSS was applied to the website whatsoever. So, we loaded his website in our browser (we were using FireFox), and then we checked the console log of the browser, which showed the following errors:
Blocked loading mixed active content “http://www.[our-client-joomla-website].com/templates/[our-client-joomla-template]/css/bootstrap.css”
Blocked loading mixed active content “http://www.[our-client-joomla-website].com/templates/[our-client-joomla-template]/css/default.css”
Blocked loading mixed active content “http://www.[our-client-joomla-website].com/templates/[our-client-joomla-template]/css/template.css”
Blocked loading mixed active content “http://www.[our-client-joomla-website].com/templates/[our-client-joomla-template]/css/touch.gallery.css”
Blocked loading mixed active content “http://www.[our-client-joomla-website].com/templates/[our-client-joomla-template]/css/responsive.css”
Looking at the above errors (there were many other similar errors), we immediately knew what the problem was: the website was trying to load HTTP content when in HTTPS mode. The browser, in order to protect the end user, blocked all non HTTPS content.
What was interesting about this whole thing was that the problem disappeared as soon as we switched off Joomla’s SEF plugin. In other words, the problem was technically caused by Joomla’s SEF plugin (the System – SEF plugin).
Naturally, the next step was to examine the HTML code, and so we looked at the HTML code very thoroughly and very carefully, and we were surprised when we saw that all the CSS/JS/image references were relative, and not absolute, meaning we shouldn’t have a problem with them, but we also noticed another thing, it was this line in the head tag:
<base href="http://www.[our-client-joomla-website].com/" />
Aha! So the base href was set to HTTP, and that’s why all the relative links were also set to HTTP. So, our task was to change the http in the above line to https. In other words, we needed to change the above line to:
<base href="https://www.[our-client-joomla-website].com/" />
So, how did we fix it?
Fixing the problem was very easy. All we needed to do was to open the index.php file in the templates/[our-client-joomla-template] folder and add the following code immediately after <?php defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );?>:
<?php $document = JFactory::getDocument();
$document->base = str_replace('http://', 'https', $document->base);?>
That was it! When we refreshed the page after adding the above code, all the Blocked loading mixed active content errors were gone!
But why did the Joomla SEF plugin cause this problem?
While the enabling the System – SEF plugin did result in the problem, we don’t think it was the root cause. We think that the root cause lied elsewhere (no – it wasn’t the $live_site in the configuration.php file). Unfortunately, we were not commissioned to find out what the root cause was, as the client was happy with the fix that we provided (which was pretty solid anyway).
If you’re having the same problem on your Joomla website, then try our solution above. If it didn’t work for you, or if you’re having problems with the implementation, then please contact us. Our work is quick, our results are professional, and you won’t have to pay an arm and a leg (at least not both) to afford us.