Handling sensitive data

In order to protect user privacy, you can configure Smartlook to not record sensitive data.

Currently, there are three methods to handle sensitive data:

• Rendering modes
• Sensitivity
• Masks

Rendering modes

❗️

Wireframe rendering only supported on Android

Currently, wireframe rendering is only supported on Android.

The Smartlook SDK offers three rendering modes to create session recordings. Each rendering mode renders the app screen in a different way. The default rendering mode for the Smartlook SDK is Native (RenderingMode.NATIVE).

📘

When using the Native rendering mode, the SDK can record sensitive data in your application.

The rendering modes available in the Smartlook SDK:

Setting the rendering mode

To set the rendering mode:

Smartlook.instance.state.setRenderingMode(SmartlookRenderingMode.Native);

Reading the rendering mode

To see what rendering mode the SDK is using:

const renderingMode = await Smartlook.instance.state.getRenderingMode();

Sensitivity

👍

Locally hidden elements

Sensitive elements are hidden locally on the device. No sensitive data is transferred to or stored in the dashboard.

SmartlookSensitiveView component

Smartlook SDK provides a native View wrapper named SmartlookSensitiveView. It can be used to wrap a component that should be marked as sensitive or not sensitive.

Use the isSensitive property to control the sensitivity (e.g. with useState):

import { SmartlookSensitiveView } from 'react-native-smartlook-analytics';

<SmartlookSensitiveView isSensitive={true}>
	<Text>I am a sensitive text!</Text>
</SmartlookSensitiveView>

SmartlookSensitiveView imperative commands

The Smartlook SDK provides a custom callback for an imperative-like sensitivity control over the SmartlookSensitiveView's ref.

This callback utilizes the codegenNativeCommands under the hood and is only available in ReactNative v0.67+. Use with caution with the ref's initialization and lifecycle. Smartlook recommends that you use the isSensitive prop to control sensitivity.

import {
  useSmartlookSensitiveViewRef,
  useSmartlookSensitiveViewCommands,
} from 'react-native-smartlook-analytics';

/**
* Custom utility hook intended to replace 'useRef' when working with SmartlookSensitiveView. It takes care of the necessary typing and checks the ref's initialization.
* It is designed to be used in parallel with `useSmartlookSensitiveViewCommands`.
**/
const sensitiveViewRef = useSmartlookSensitiveViewRef();
const changeTextViewSensitivity = useSmartlookSensitiveViewCommands(sensitiveViewRef.current);

<SmartlookSensitiveView ref={sensitiveViewRef} isSensitive={true}>
	<Text>I'm a sensitive text!</Text>
</SmartlookSensitiveView>
<Button
  onPress={() => {
 	 changeTextViewSensitivity(false);
  }}
  title="Change text sensitivity"
/>

Class sensitivity

📘

Default sensitive classes

By default, the following classes are set as sensitive:

• Android: EditText and WebView classes
• iOS: UITextView, UITextField and WKWebView classes

The Smartlook React Native SDK provides methods to granularly control default class sensitivity:

// Disables the default class sensitivity for both platforms.
Smartlook.instance.sensitivity.disableDefaultClassSensitivity();

// Enables the default class sensitivity for both platforms.
Smartlook.instance.sensitivity.enableDefaultClassSensitivity();

/**
* Provides a control to granularly change a specific default class sensitivity on both platforms
*
* Accepts classNameValueTuples - an array of @SmartlookAndroidClassSensitivity or @SmartlookIOSClassSensitivity class and it sensitivity boolean value tuples.
*
* Both iOS and Android specific class names can be passed at the same time.
*/
Smartlook.instance.sensitivity.changePlatformClassSensitivity([
  [SmartlookIOSClassSensitivity.UITextView, true],
  [SmartlookIOSClassSensitivity.UITextField, false],
  [SmartlookIOSClassSensitivity.WKWebView, false],
  [SmartlookAndroidClassSensitivity.EditText, false],
]);

🚧

Automatically-detected touch events

Some screens display sensitive data through automatically detected touch events. For more information, see Secure custom keyboard example.

Handling WebView sensitivity

If an app uses WebView and you want record them, you need to enable WebView recording. You can enable WebView recording by removing the sensitivity:

Smartlook.instance.preferences.setWebViewSensitivity(false);

// or via 

Smartlook.instance.sensitivity.changePlatformClassSensitivity([
  [SmartlookIOSClassSensitivity.WKWebView, false],
]);

If WebView is being recorded, all sensitive elements on the displayed website should be marked as sensitive so that they are hidden. You can mark sensitive elements as sensitive using HTML elements with .smartlook-hide css class:

<div class='smartlook-hide'>
   This will be hidden.
</div>

All inputs are hidden by default except button and submit. If some hidden inputs should be recorded, they can be marked with .smartlook-show css class:

<input type="text" class='smartlook-show'>

Recording masks

In cases where areas of the app shouldn't be recorded, but cannot be defined by a view, you can use RecordingMask:

Smartlook.instance.recordingMask = recordingMask
const maskElement = new RecordingMaskElement(
   SmartlookRecordingMaskType.Covering|SmartlookRecordingMaskType.Erasing,
   new RecordingMaskRect(LEFT, TOP, RIGHT, BOTTOM)
);

Smartlook.instance.setRecordingMask([maskElement]);

You can only have one Recording mask set at a time, but the recording mask can contain a list of RecordingMaskElement to cover multiple areas at once.

RecordingMaskElement can be one of two types:

RecordingMask example

The following example describes a RecordingMask in action.

On the left:

• The blue box represents a video_item element.
• The red box represents a video_item_image element.

On the right:

• The video_item element (blue box) has a Covering value. The Covering value masks the element in the session recording.
• The video_item_image element (red box) has an Erasing value. The image is visible in the session recording because the Erasing value cancels the Covering value.