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.
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 AGENTof 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.
Feature Implementation
-
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 |
|---|---|---|
|
|
|
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
- 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
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')}" />