Configure Session Replay for personal data protection

Consider the following scenario: As an application owner, you want to record all user sessions that include Page 2 through Page 5 of your application. Session activity involving Page 1 or Page 6 of your application are to be excluded from recording. The following diagram illustrates where the dtrum.enableSessionReplay() and dtrum.disableSessionReplay() methods are required in such a sequence.

Opt-in consent banner

In such cases, you can display a consent banner to enable session recording when the user lands on Page 2 (see callout at the bottom of the following image). When the user clicks the Accept button to allow session recording, the application responds by invoking the dtrum.enableSessionReplay() method and recording the session.

You can use a cookie in your application to record user content history within the browser. The content of this cookie is checked during each session to determine if the consent banner must be displayed. For example, if the cookie that stores the consent is named sessionReplayConsent, the application flow would be something like this:

1. The application checks the value of the sessionReplayConsent cookie.
2. If the value is true, the dtrum.enableSessionReplay() call is invoked.
3. If the value is false, the consent banner is displayed.
4. If the user provides their consent, the dtrum.enableSessionReplay() call is invoked.
5. User consent is written to the sessionReplayConsent cookie.

With this cookie, Session Replay continues to remain active until Page 5 of the application.

Once the user leaves Page 5, the dtrum.disableSessionReplay() method can be used to stop recording the session. The cookie that has been used to store the consent must then be removed.

Note: JavaScript methods used for enabling and disabling Session Replay can be used without displaying a banner to obtain consent. For example, if you wish to record a session each time any user logs in, you can use the dtrum.enableSessionReplay() method to start recording and the dtrum.disableSessionReplay() method to stop recording following successful logout. This gives you complete control over start and stop of Session Replay.

Session Replay opt-in mode is disabled by default.

To enable the opt-in mode

1. Select Applications from the navigation menu.

2. Select the application that you want to configure.

3. On the Application overview page, click the browse [...] button on the upper-right corner and select Edit.

4. On the Application settings page, select the Session Replay tab on the left.

5. Enable the Session Replay setting.

6. Scroll down to the Privacy settings section and turn on the Enable the opt-in mode for Session Replay setting.

7. Click Save.

With these configuration settings, Session Replay is inactive in your end-users' browsers and sessions won't be recorded until the dtrum.enableSessionReplay() method is called from the application.

Note: If you choose to not turn on the Enable the opt-in mode for Session Replay setting, all user sessions will be recorded from the beginning until dtrum.disableSessionReplay() is called from the application.

In most cases, all sensitive data is typed by users into web form fields. This is why all input fields are masked by default. The masking algorithm maintains the format of the data but masks the data itself. For example, email address fields are masked as shown here:

Session Replay configuration settings enable you to either:

• Mask all form fields
• Mask only those form fields that have sensitive data

Note: Irrespective of your configuration, password fields are always masked by default.

To configure Session Replay configuration settings

1. Select Applications from the navigation menu.
2. Select the application you want to configure.
3. Click the browse [...] button in the upper-right corner.
4. Click the Edit button.
5. Select the User session record & replay tab and scroll down to the Form field masking section.
6. Configure settings as required based on the following example.

Form field masking example

Our easytravel sample website enables simulated customers to book flights and reserve hotels. To confirm bookings, users must log in and enter the details of the credit card that will be used to make the purchase. All this sensitive data must be masked.

Note: If these configuration settings can't mask all input fields in your application, you can also define CSS rules to mask fields that contain sensitive data.

1. To find the correct CSS selector for the fields you want to mask, use developer tools, inspect the element that must be masked, and copy the CSS selector.

2. Add the selector to the form field custom rules.
   Note: You can add as many rules as you want.

Alternatively, you can create only one rule that applies to multiple elements. For example, say you want to mask all input fields under class="form-row card-number" and class="form-row exp", both of which are part of class="card-panel".

Instead of masking these 7 fields with 7 different rules, you can mask them using only two rules:

• card-panel .form-row > input (for input fields)
• card-panel .form-row > select (for select fields) You can also validate the CSS selectors with developer tools.

3. After the CSS selector rules are validated, add them to the form field masking configuration.

Note: DESK recommends marking form fields that contain sensitive data with a custom property, such as data-privacy="true" or a CSS pseudo class. This allows you to create a few simple rules for masking and works reliably even in the case of new releases of your web application. For example, the recorder will mask all elements, including form fields and content nodes, that use the attribute data-dtrum-mask. You can even include the definition of personal data within the web application implementation process.

Test your form-field masking configuration

1. Record a session.
2. Use dtrum.identifyUser('userNameToFilterFor').
3. Wait until the session has been processed. This takes about 2 minutes.
4. Filter the data by using User Tag = userNameToFilterFor and find your session.
5. Play the session to verify that all sensitive data is correctly masked.

Similar to input field masking, password field masking differs in that these fields are always masked, irrespective of your masking configuration. Session Replay provides no means for recording the contents of password fields.

Content masking is applied to personal data that is picked up from masked input fields on a web form and displayed on a different web page. An example of this is the confirmation page that is displayed after a user has entered data in previous form fields.

After content masking is applied, the screen looks like this:

To configure content masking so that the data collected from the user isn't displayed during Session Replay, add CSS selectors in the Content masking section.

When you're defining the rule, you can additionally choose to hide user interactions (for example, mouse movements and clicks) within form elements by enabling the Hide interaction for this element setting.

Note: The masking is applied to the element that matches the CSS rule and all its descendants.

1. To find the correct CSS selector for the fields that you want to mask, use developer tools, inspect the element that must be masked, and copy the CSS selector.

2. Add the selector to the form field rules.

Note: You can add as many rules as you want.

3. You can also create one rule to select multiple elements.

Test your content masking configuration

1. Record a session.
2. Use dtrum.identifyUser('userNameToFilterFor').
3. Wait until the session has been processed. This takes about 2 minutes.
4. Filter the data by using User Tag = userNameToFilterFor and find your session.
5. Play the session to verify that all sensitive data is correctly masked.

Attribute masking is particularly applicable to data-NAME attributes that were introduced in HTML 5 to carry application-specific information.

With attribute masking, you can specify attributes for which values must not be recorded.

1. Define a regular expression that matches the attribute name.

2. Add the expression to the attribute masking rule.

The values of defined attributes are excluded from recording and aren't sent to DESK Server.

Test your attribute masking configuration

1. Record a session.
2. Use dtrum.identifyUser('userNameToFilterFor').
3. Wait until the session has been processed. This takes about 2 minutes.
4. Filter the data by using User Tag = userNameToFilterFor and find your session.
5. Play the session and check the developer tools to verify that all sensitive data is correctly masked.

This type of masking is applicable only in cases where masking only the content or input fields isn't enough. If an input field that consists of multiple options is displayed during Session Replay (for example, the selection of gender or religious preferences), displaying the click during replay will inadvertently disclose the end user's sensitive data. Interaction masking can be used to mask such mouse clicks and cursor moves within the UI that might reveal personal information. Interaction masking on form fields is enabled automatically. For content, however, interaction masking must be explicitly configured.