Virtuemart Security Warning

We had an interesting problem a few days ago. One of our customers was using VirtueMart to run his online store, and he had a security warning on his secure (https://) checkout page, claiming that his checkout page contained some secure and non-secure items.

Here are the errors that our customer was experiencing:

• On Internet Explorer: “Do you want to view only the webpage content that was delivered securely?” and the message continues “This webpage contains content that will not be delivered using a secure HTTPS connection, which could compromise the security of the entire webpage”.

• On Chrome: “Your connection with ‘yourdomainname.com’ is encrypted with 256-bit (or 128-bit) encryption. However, this page includes other resources which are not secure. These resources can be viewed by others while in transit, and can be modified by an attacker to change the behavior of the page.”

• On Firefox: Firefox displays a full page with the header “Connection Is Untrusted”.

In any case, leaving the VirtueMart security warning as it is means substantially less sales for our customer (customers do not want to buy from an “untrusted” website). According to our experience, there are 3 reasons for this to happen:

• Linking to an image without using https:// while in secure mode
• Linking to a CSS file without using https:// while in secure mode
• Linking to a JavaScript file without using https:// while in secure mode

Now the most common reason for this to happen is when Joomla administrators install a poorly written extension to include an external widget. This widget usually requires a JavaScript file and tries to include in non-secure mode.

For this particular client, we checked for everything, literally everything: Are the images all linked to by using https? Are all CSS files properly included (also using https)? Are all JavaScript files included the right way (again, using https)? All our checks concluded that the website was clean, but why were all the browsers stating that there is a “mixed content” of secure and non-secure items. What wre those non-secure items and where are they?

We then applied the concept of minimax elimination to solve this problem: we saved an HTML copy of the checkout page of VirtueMart, we called it test.html, and then we uploaded it back to the Joomla website of our client. We then tested this page in https mode (by visting https://www.ourclientswebsite/test.html, and the warnings, of course, still appeared. We then started removing chunks of code from the HTML page and uploading it back and then testing (to see if the page passes). We did this until the page finally showed no warnings in https mode. We then reverted back the previous chunk, and made it smaller, until we discovered the exact lines that were causing problems. These lines were CSS files, it was the way that they were included (our client was using a YOOtheme template). In case you are curious, here are the lines (please note that the following lines do not reveal the identity or any other information about our client, as they are standard in YOOtheme templates):

<link rel="stylesheet" href="css:styles/plain-blue.css" type="text/css"/>
<link rel="stylesheet" href="css:styles/color-blue.css" type="text/css"/>
<link rel="stylesheet" href="css:styles/plain.css" type="text/css"/>

The way the CSS files were included (href=”css:styles/plain.css”) was the culprit behind the mixed content on the VirtueMart checkout page.

What we did to solve the problem

We created a condition to hide the above CSS files (they didn’t have any effect on the look&feel of the website anyway) in the following template file: /public_html/templates/yoo_vanilla_j15/layouts/template.config.php. Here’s the code that we added (it is in bold):


//include these files when not in https mode
if ($_SERVER['HTTPS'] != "on"){

	$this->warp->stylesheets->add("css:styles/{$style}-{$bgcolor}.css");
	$this->warp->stylesheets->add("css:styles/color-{$color}.css");
	$this->warp->stylesheets->add("css:styles/{$style}.css");

}

As you can see, we are only including the problematic CSS files in non-https mode.

What we have learned from this experience:

• Google Chrome has this weird habit of caching the https error at the tab level. So, even if you fix the problem and you remain on the same tab you will still see a problem.

• The designer/coder must always use relative links in his template rather than absolute links. That’s a given, but apparently there are many designers that still don’t do this.

• Joomla always fascinates us with new challenges, but we consider these challenges fun and we’re happy when we’re working towards solving them!

If you’re experiencing the same problem (you’re having a security warning on the VirtueMart checkout page), then try the above, but keep in mind that it most likely won’t apply to you (as it applies only to a very specific case), but you can use the minimax concept to locate the problem.

If you still need help resolving all these mixed content problems on your Joomla VirtueMart checkout, then we’re always here to help you. Just contact us and we’ll take it from there. Don’t worry, our fees are really, really reasonable!