Universal Co-Browsing Session Migration when http-only flag is in use

Note: This applies to the universal co-browsing component only.

Note: This feature is only available in the unblu performance product.

Sample code: SessionMigration

unblu teams/performance supports in-context session migration when co-browsing is initiated. A prerequisite for this capability is that the corresponding setting is in place in the account configuration. In unblu's standard session migration procedure, the collaboration server reads the session cookie through a java script activity on the visitor's browser when the co-browsing session is initiated. The cookie values are passed to the co-browsing session and through a re-load the visitors session state is re-established (i.e., the items already placed in a shopping cart are now also present in the co-browsing sessions.) For session cookies which are secured via an http-only flag, unblu's out of the box session migration process does not work as the server cannot read the cookie value through java script. This section describes the necessary additional configuration and instrumentation that needs to be in place so that session migration can also function with http-only secured session cookies. The feature makes use of your account-specific unblu secret, which can be found in the Integration Section (requires login) of the unblu administrative application.

Additional Configuration for Session Migration with HTTP-Only Cookies

To support the migration of sessions secured through http-only cookies, a secure and temporary bridge between the web application's session and the unblu session needs to be established. This can be achieved with some additional steps implemented in your web application as per the description below. For our example we assume that a backend session (the session that creates the session cookie in your web application) already exists before the user requests a co-browsing session. For example, in our simple sample code the user has already clicked on the button "click to add item to your cart" so that a session cookie is created.

Steps to achieve the Session Migration as per Sample Code Provided

(When we refer to “server” in this example, we are referring to the instrument web application.)

On request of a co-browsing session (user clicks on "Click Here For Live Support"), client sends an AJAX request to the server and creates the bridge.

The server creates a temporary cookie with no http-only flag; this cookie has a short expiration time to maintain security (i.e. 2 minutes).

The cookie value has the encrypted value of the original session cookie.

The server then sends a 200 status code to the client.

As soon as the client gets the success response, it calls the "onSuccess" callback, which creates the dialog to start a session.

The collaboration server always sends a cookie with the response header that carries the name "x-unblu-account-secret”; the value of that cookie is your account-specific secret key.

On the server side you have a check for session migration; use the bridge you created in step 1 and check for the "x-unblu-account-secret".

The server checks whether the bridge exists. If yes:

  • Its value is read and decrypted.
  • The decrypted value is checked against DB/Session-Storage to see whether it is a valid session cookie.
  • If a-2 is true, then the server checks whether your account secret key matches with the value of the cookie that comes from the server.
  • If a-2 and a-3 are both true the server creates the original cookie with the value (a-1) of the http-only cookie.
  • The server deletes the bridge and the temporary cookie.

Sample Code

In the File SessionMigration we provide a sample implementation for a session migration in PHP. The sample code is an implementation on a test page to illustrate the necessary instrumentation. The implementation contains:

Index.php: A simple html page with only 4 elements; a title, a button to add an item to a shopping cart, a shopping cart and a link to start a session.

Preparebridge.php: A simple PHP code element that performs steps 2 and 4 described above.

Utils.php: Includes the scripts to handle steps 2 and 7 described above.

Unbluintegration.js: Includes client side scripts; steps 1 and 5 described above.

Base.css: Contains some simple css rules.

Empty.png and full.png images to show the status of the shopping cart.

Notes:

If you want to try the sample in your environment or on a test server, please make sure that:

  • In the file unbluintegration.js, the APIKEY is replaced/set with a valid unblu APIKEY -> unblu = {APIKEY: "your-api-key-here", SERVER: " https://start.unblu.com "};
  • In the file utils.php, the constants MY_COOKIE_DOMAIN and MY_ACCOUNT_SECRET_KEY are replaced/set with actual value.
  • deploycloud
  • deployonprem

results matching ""

    No results matching ""