27

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.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Aamir
  • 791
  • 3
  • 15
  • 28
  • 1
    I don't think you can detect it directly with JS, but you can try using ajax to different pages to your server which use the different protocols. – Oriol Jun 23 '15 at 00:27
  • So ,how do you inform the old browser users that their browser is not supported any more by the site? – Aamir Jun 23 '15 at 15:12
  • That is easy: just insert some html in the document, or produce some `alert`, or something like that. The difficult part is detecting the TLS support. – Oriol Jun 23 '15 at 15:19
  • This is what I am asking. How to detect the TLS version support. – Aamir Jun 23 '15 at 20:10

5 Answers5

35

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>
Oriol
  • 274,082
  • 63
  • 437
  • 513
  • 2
    Exactly the thing I was looking for! Thanks very much! – Aamir Jun 23 '15 at 22:58
  • 1
    One sad thing is that it is not a js library I can download locally. I don't know how long he keeps the API available for us. – Aamir Jun 23 '15 at 23:26
  • 2
    @Aamir "How's My SSL" is Open Source software and can be found on [GitHub](https://github.com/jmhodges/howsmyssl). – Oriol Jun 23 '15 at 23:28
  • How would you call this API if TLS is completely disabled on the clients browser? It uses a secured connection so if TLS is disabled then there is no request sent to fire the callback. – DOfficial Dec 10 '15 at 18:36
  • @DOfficial I guess that if the browser can't connect to that site, an `error` event will be dispatched to the `script` element, so an `onerror` event handler content attribute should detect that. – Oriol Jul 01 '16 at 11:38
  • The message is wrong though... Your browser may support TLS 1.1 or 1.2, but it may be disabled. No trouble needed of going through an upgrade while you could just enable it in your settings. – Roberg Jan 04 '17 at 11:32
  • @Roberg If someone is tech-savvy enough to disable it, then he will probably be able to understand the message. You could also do some browser sniffing to guess whether the feature is just disabled or not supported. – Oriol Jan 04 '17 at 17:50
  • 1
    @Oriol If you are for example running IE 8 on Windows 7 then TLS 1.1 and 1.2 will be disabled by default. Yes, MS chose to disable it by default... – Roberg Jan 05 '17 at 10:18
  • @Oriol or anyone else know other sites/API to detect client browser's TLS compatibility? – Shivaji More Mar 27 '20 at 12:14
4

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.

KatonahMike
  • 59
  • 2
3

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.

Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
GoldPaintedLemons
  • 482
  • 5
  • 9
3

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');
Leniel Maccaferri
  • 100,159
  • 46
  • 371
  • 480
Ady
  • 57
  • 1
  • 1
  • 1
    Nice trick thanks. No external library, and instead of asking one external server, we can ask to our own server to know if the browser will allow to access it within the server required TLS version. – NetVicious Dec 20 '19 at 17:38
  • 1
    Down-voted for answering a JavaScript question with a framework. – John May 23 '21 at 06:32
1

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.

alon
  • 19
  • 1
  • 1