TLS Browser Detection

As of Jan 31, 2016, support for browsers that can only process HTTPS calls with TLS 1.0 or less will be discontinued by Salesforce B2C Commerce. Customers with out-of-date browsers will not be able to reach any page on the B2C Commerce storefront that uses HTTPS, including account, basket, and other pages used for checkout. If customers attempt to access these pages, they will receive a server error page. Pages for the storefront that are available via HTTP are still accessible to the customer.

For additional information, see TLS 1.0 Removal Customer Impact and Removal of TLS 1.0 - What Impact Will This Have?.

B2C Commercee recommends two approaches to informing the customer that they have an out of date browser:

Use Approach 1 if you want to inform customers if they are using an old browser before the Jan 31 deadline and you want to track the browsers or TLS level of customers who are warned.

Use Approach 2 if you want to show a warning message only after support is removed and don't want to call any external tools.

Approach 1: Use an External Tool to Warn Customer About Browser TLS Support

Use an external tool to help your storefront determine the exact TLS support level of the customer's browser and show them customized messages to let them know that they will be affected when support is removed for out-of-date browsers.

Because a client storefront can't detect the TLS level set in a browser, this approach relies on external TLS detection services offered by:

These tools make an HTTPS request sent to the browser, and evaluate the header of the response to determine the actual level of TLS support available in that browser. You can see the changes in the SiteGenesis code to implement the external tool in this Commit.

Feature Logic

Check the browser to see if a cookie (`dw_TLSWarning`) is set.

If it's set and it's false, then this browser was tested and doesn't need a warning box shown
If it's set and it's true, then this browser was tested and does need a warning box shown (it failed the test)
If it isn't set, then the browser isn't yet tested. In this case, check the USER AGENT of the browser to see if this is one of the identified browsers that should be tested. If it is an out-of-date browser, call out to one of the external services to check the TLS level
- If you could check the actual TLS level and it passes, set the cookie to false
- If you could check the actual TLS level and it failed, show the warning and set the cookie to true
- If you could not check the TLS level (the service is down or timed-out), then assume that because the browser itself is out-of-date, show the warning and set the cookie to true.

Note: This logic makes sure there are no unnecessary calls to the external TLS evaluation service. The code only checks externally if it has not checked before and the browser is out-of-date.

Feature Implementation

The files added or changed for the implementation are:

app_storefront_controllers/cartridge/controllers/TLS.js - changed to allow tracking.
app_storefront_core/cartridge/js/app.js - the tls.js file is loaded into the storefront client in the init() method of app.js. If your implementation doesn't have an app.js, make sure that the tls.js file is loaded in the init() method of your main client-side *.js file.
app_storefront_core/cartridge/js/tls.js - When a warning is indicated, the routine in tls.js that shows the warning is called showWarning(). Our implementation causes a message to be inserted into an omnipresent, but generally hidden <div> called browser-compantibility-alert.
Note: You might wish to modify this routine to show the message elsewhere, pop up a dialog box.
app_storefront_core/cartridge/scripts/util/Resource.ds - changed to allow tracking.
app_storefront_core/cartridge/scss/default/_slots.scss - contains the SASS CSS styling information for our warning box (if you implemented your storefront on an older version of SiteGenesis, you might not have this file - you will want to edit whatever file contains your CSS information.
app_storefront_core/cartridge/templates/resources/locale.properties - contains the warning message for localization
app_storefront_pipelines/cartridge/pipelines/TLS.xml - changed to allow tracking.

Out-of-Date Browser List

The list of out-of-date browsers can be customized. The list implemented in SiteGenesis is based on information in the Qualys SSL Labs Client List and includes the browsers listed in the following table.

Internet Explorer	Android	Safari
MSIE 6.0 MSIE 7.0 MSIE 8.0 MSIE 9.0 MSIE 10.0	Android 2.3.7 Android 4.0.4 Android 4.1.1 Android 4.2.2 Android 4.3	Safari 5.1.9/OSX 10.6.8 Safari 6.0.4/OSX 10.8.4

Tracking Statistics

The implementation of tracking in the Resource.ds, TLS.xml, and TLS.js files lets you track the number and type of out-of-date browser visits by your customers. The code calls dummy pipelines upon detection of a bad TLS level or an out-of-date browser. These pipeline calls can then be referenced in the Business Manager using the Pipeline Profiler so that B2C Commerce clients can compile reports of the numbers and types of detected/reported occurrences. There is a performance impact to this reporting technique, so it can be eliminated if there are any concerns about this particular implementation approach.

Approach 2: Request CSS from HTTPS

Request some CSS via HTTPS and show a warning if HTTPS is not supported. There are several advantages to this approach:

simple to implement
does not rely on any third party products
checks the capacity of TLS itself, instead of other information and thus works even in unknown browser/OS situations

However, you can't track the actual TLS level and

USER
    AGENT

of browser s being used by your customers.

This approach only works after the support for older browsers is removed. You can't use this approach before support is removed to warn customers, because HTTPS is available at that point.

In app_storefront_core/cartridge/templates/default/components/browsertoolcheck.isml:

<div class="browser_compatibility_alert" id="http_support_alert">${Resource.msg('https.not.supported', 'components',null)}</div>

In app_storefront_core/cartridge/templates/resources/components.properties.

https.not.supported=HTTPS Not Supported. Please upgrade your browser to the latest version.

In app_storefront_core/cartridge/static/default/css/https_support.css. Previously, this was located in the rich_UI cartridge.

https_support_alert {display:none}

In app_storefront_core/cartridge/templates/default/components/header/htmlhead_UI.isml. Previously, this was located in the rich_UI cartridge.

<link rel="stylesheet" type="text/css" href="${URLUtils.httpsStatic('/https_support.css')}" />