Detect browser TLS compatibility

Question

We have a SSL website where the host has recently disabled older SSL protocols like TLS 1.0 and below. Depending on the browser, the site visitor gets a blank page or a cryptic error message when they visit the site if the browser they are using does not support at least TLS 1.1.

I was hoping to create a landing page that is not on the SSL port and where I can detect the browser capability if it supports TLS 1.1 and above. If it doesn't then I want to show them a friendly message to upgrade their browser or use a different browser.

Is this something that can be accomplished using client side javascript library? If so, then what should I be using?

Thanks.

Answer 1

You can use the API provided by How's my SSL?.

In the following example, I check the tls_version. Checking given_cipher_suites may also be a good idea.

<script>
window.parseTLSinfo = function(data) {
  var version = data.tls_version.split(' ');
  console.log(
    version[0] != 'TLS' || version[1] < 1.2
    ? 'So bad! Your browser only supports ' + data.tls_version + '. Please upgrade to a browser with TLS 1.2 support.'
    : 'All OK. Your browser supports ' + data.tls_version + '.'
  );
  console.log(data);
};
</script>
<script src="https://www.howsmyssl.com/a/check?callback=parseTLSinfo"></script>

Answer 2

Small note; code aside I think folks should be aware if you're presenting your end user with an error message regarding this, you should understand that TLS versions is not just a browser restriction, but essentially OS level. You have to have it enabled on your machine and your browser must support it. You can be on the latest chrome, but if in Internet Settings (on Windows) it's been disabled, you'll still have a TLS negotiation issue.

Answer 3

There are at least two web sites that will check the browser capabilities for you, including SSL Labs (https://www.ssllabs.com/ssltest/viewMyClient.html) and HowsMySSL (https://www.howsmyssl.com/). HowsMySSL also has a nice API that can be easily checked from JavaScript.

Answer 4

Here is a way Create a image with jQuery, and add a src attribute, I use a button from PayPal, now all the request to PayPal must be via TSL1.2 Hope this can work

jQuery('<img />').on({
    load: function() {
      console.log("support TSL1.2");
    },
    error: function() {
      console.log('no support TSL1.2');
    }
}).attr('src','https://www.paypal.com/en_US/i/btn/btn_xpressCheckout.gif');

Answer 5

Indeed, you cannot check the TLS version. I had to load a script from a site which only supports TLS 1.2 (as opposed to my page). Using the simple HTML script tag would not give you any clue that the script was not loaded. As a result I ended up using following script to load JS from a different domain:  

$.ajaxSetup({'cache':true});
$.getScript('{scriptUrl}').done(function(){
   alert("done");
}).fail(function( jqxhr, settings, exception ) {
    alert(jqxhr.status);
    alert(jqxhr.responseText);
    alert(exception);
});

 

In case of TLS problems the jqxhr.status will be 404 so you can display a message to the user.