Controlling the User Experience when SSL Root Certificates are not Recognised by Browsers

So, Browsers Scare your Users by Saying your SSL Certificates Suck, hmmm?

Yup, we all know SSL is the way to go when protecting your site’s traffic from the bad guys, and it is not that difficult to set up. But what happens when the browsers don’t have pre-installed CA root certificates for the issuer of your SSL certificates? They tend to present very scary messages. Some versions of Internet Explorer heartily recommend users to get away from your site as quickly as possible, lest they be eaten by evil monsters (well, not exactly, but it has a similar effect).

Scare tactics may work well for browser manufacturers, so that certificate issuers are willing to make their certificates recognised and pre-installed in these browsers (or OS) releases. This process might involve some payment to the browser’s manufacturer… (warning: this is my personal unproven claim… call me suspicious if you wish).

In any case, once the user clicks on a link to your secure SSL-protected HTTPS site, funnily enough, the browser’s alarm messages may make it appear as a more insecure choice than using HTTP. What the …?

It looks like you don’t have control over the user’s experience… or do you?

We at Isigma have devised a mechanism that does give you some control over what your users see, and at least skip the browser’s message and replace it by your own page. It involves some Javascript Ajax. We have written it with jQuery but you can use any equivalent Ajax library of choice.

How can I Replace the Browser’s Unrecognised SSL Certificate Message?

Our solution consists of having a plain HTTP welcome page that checks behind the scenes whether the browser can open the HTTPS page, and if so does an automated redirect to the secure page. If the redirect doesn’t happen, it shows a message informing the user that in order to access your site she should install the root certificates, and instructing her how to do so.

For that purpose we created a jQuery-based javascript function ssl_check_and_redirect that honors its name. You give it an https URL, and if the browser can open it with Ajax, it redirects you automatically.

[code lang=”javascript”]
function ssl_check_and_redirect(url) {
$.ajax({
url: url,
dataType: "script",
success: function(){
window.location.replace(url);
}
});
}
[/code]

The datatype of “script” is a useful trick to avoid browsers’ same-origin policy restrictions when performing Ajax calls.

Unfortunately, if you try to use an error callback for the case where the SSL certificate is not recognised (I know that’s what you’re thinking, because it’s what I thought), you’ll find out that it is never called. To detect that case, you may want to use a workaround based on some sort of timeout instead.

Calling this function upon page load with jQuery is as simple as:

[code lang=”javascript”]
$(function() {
ssl_check_and_redirect("https://app.portasigma.com/");
});
[/code]

A simplified full welcome page (accessible via plain HTTP, no SSL) could look like:

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script>
function ssl_check_and_redirect(url) {
$.ajax({
url: url,
dataType: "script",
success: function(){
window.location.replace(url);
}
});
}

$(function() {
ssl_check_and_redirect("https://app.portasigma.com/");
});
</script>
</head>
<body>
<div id="log">
<p>Performing a check before accessing our secure site</p>
<p>If after a few seconds the secure page doesn’t show up, you will
have to install our SSL root certificate etc… (your friendly personal
message to avoid browser scare)</p>
</div>
</html>
[/code]

Possible Improvements

This solution could be improved by using a three-page structure:

  • Welcome page that tells performs checks and redirects the user to the SSL page if OK. It has a timeout that, in case the SSL redirect doesn’t happen, takes the user to the warning page
  • Warning page, informing that the user should install the root certificates…
  • The good HTTPS page, the original page where you want your users to go

We leave this improved version as an exercise to the reader.

About chemalogo

Socio Director de isigma asesoría tecnológica
This entry was posted in Digital certificate practices. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *