Controlled Exposure

Expose specific and pre-defined personal data content (such as on-screen text and a user identifier) for specific replays (the data will be encrypted).

Use Controlled Exposure to:

1. Help get to the root cause of user frustrations
2. Enable customer support agents to provide more advanced assurance

What is Controlled Exposure

The Controlled Exposure feature enables you to display personal information during a session replay that is normally masked. E.g. Text your user types into a form.

By default the tracking tag never collects the text typed into any input or textarea field.

As Controlled Exposure involves Personal data, see details below on some of the information that we can track and display (within a strict framework) and which data we can never collect.

Implementation

Step 1 - Data Encryption

All data must be encrypted in order to use Controlled Exposure.

To do this, you will need to obtain a combination of encryption keys:

• Public key: is used by the Tracking Tag so we can encrypt the data

• Private key: is used by the APP for decryption

How to generate the key pair

Option 1 With a Google chrome script 

1. Copy the following script

function arrayBufferToString(buffer) {
    const byteArray = new Uint8Array(buffer);
    let byteString = "";
    for (let i = 0; i < byteArray.byteLength; i += 1) {
      byteString += String.fromCodePoint(byteArray[i]);
    }
    return byteString;
}

crypto.subtle.generateKey({
    name: "RSA-OAEP",
    hash: "SHA-256",
    modulusLength: 4096,
    publicExponent: new Uint8Array([1,0,1])
}, true, ["encrypt", "decrypt"]).then(
    (keysObject) => {
        crypto.subtle.exportKey("pkcs8", keysObject.privateKey).then(result => {
            const privateKey = btoa(arrayBufferToString(result));
            console.log(`Private key: `, privateKey);
        });
        crypto.subtle.exportKey("spki", keysObject.publicKey).then(result => {
            const publicKey = btoa(arrayBufferToString(result));
            console.log(`Public key: `,publicKey);
        });
   });

2. Paste the script in the Chrome console

3. Press enter on the keyboard

Option 2: With OpenSSL or OpenSSH 

On linux/mac, you can use openssl:

openssl genpkey -out mykey.pem -algorithm RSA -pkeyopt rsa_keygen_bits:4096

openssl rsa -in mykey.pem -pubout > mykey.pub

On windows you will need to install WSL

Install WSL

How to add a new public key

Go to Console > choose the account > choose the project > and go to the “Encryption management” tab.

1. Click on “Store public key”.

2. Paste your preferred public key.

3. Click on “Store key”.

Step 2 - Element exposure

There are two different ways to implement Controlled Exposure:

Option 1: Implement a specific HTML attribute in the website's HTML markup.

Option 2: Implement a specific javascript command.

Option 1 - Javascript command implementation

Javascript command is:

 setEncryptionSelectors

This command lets you set a selector list for elements whose content needs to be encrypted.  

Each DOM element you want to encrypt is identified by its CSS selector and these selectors are pushed to the tag via a javascript object. This is how the content of the identified element is encrypted.

First, you declare (once):

window._uxa

window._uxa = window._uxa || [];
window._uxa.push(['setEncryptionSelectors', {PII Object}]);

You can then enter a list of items like this one, for example:

_uxa.push(["setEncryptionSelectors", "input, #cart, .total-items"]);

Option 2 - HTML attribute implementation

A specific HTML attribute in the website’s HTML markup needs to be implemented for each element/field you want to expose:

HTML attribute is data-cs-encrypt

Elements that can be tracked

Text content form fields:

The data-cs-encrypt attribute can be added on the input or textarea  elements.
Instead of being masked, the text typed here in the form fields will be encrypted, stored, and made available for exposing under specific conditions.

Any other HTML element:

The data-cs-encrypt attribute can be added on any DOM element in the HTML markup.
Instead of being masked, the inner text of the element will be encrypted, stored, and made available for exposing under specific conditions.

How to unmask on-screen text

1. Select the key icon and select 'Unmask text'.

2. Enter in the private key and select 'Decrypt' (all replays will be exposed).

How to unmask a user identifier

1. Select the key icon and select 'Unmask user identity'.

2. Enter in the private key and select 'Decrypt'.

3. You will see and have access to the user identifier(s) of the end-user shown in replay.

How is Controlled Exposure compliant with personal data regulations?

• All the collected data is encrypted before being collected/saved
• You are contractually obliged to inform your users and collect their consent before activating the feature
• The decryption process is done within a strict framework:
  
  • A private decryption key is needed and this is only accessible by you
  • You are only able to unmask one replay at a time

What to do in case of a key leak?

In the case of a key leak you should immediately generate another key pair and replace the public key in Contentsquare’s Console. All the replays previously encrypted will no longer be available for decryption.

How to replace a key

1. Select 'Replace with a new key' button in the Encryption management tab

2. Enter in the new key and select 'Replace key'