Sensitive data hiding

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

In order to protect user privacy, Smartlook can be configured so that the sensitive data is not recorded.

Smartlook attempts to hide selected sensitive UI element automatically. It can be also instructed to hide or show particular UI components. Alternatively, using one of the wireframe rendering modes records screen in a schematic way, showing no user data. The last possibility is to stop screen capturing altogether by using no rendering mode.

📘
Sensitive elements are hidden locally on the device. No sensitive data are transferred over the network and stored in the dashboard.

Blacklisted views

Any view can be hidden in the recording by marking it as a blacklisted view. A specific view can be marked as blacklisted by calling:

Smartlook.registerBlacklistedView(ref: ComponentOrHandle));

If a specific view no longer needs to be blacklisted:

Smartlook.unregisterBlacklistedView(ref);

Blacklisted classes

Note that UITextView, UITextField, WKWebView on iOS and EditText, WebView on Android are blacklisted by default. Specific instances of these classes can be recorded using whitelist.

Whitelisted views

A specific view can be whitelisted so it is recorded even if it is an instance of a blacklisted class:

Smartlook.registerWhitelistedView(ref);

A specific view can be removed from a whitelist by calling:

Smartlook.unregisterWhitelistedView(ref);

Declarative way to handle sensitive views

To simplify handling of sensitive/not sensitive views in React Native we have prepared nice declarative ways to do it.

Using SmartlookSensitiveComponent

You can wrap the component to the SmartlookSensitiveComponent and control, if it's hidden or not with isSensitive prop. Just be sure that you are not passing functional component as children! Eg. wrap it to React.forwardRef first. See the example in example/src/components/Button.tsx.

import { SmartlookSensitiveComponent } from 'smartlook-react-native-wrapper';

// Blacklisting
<SmartlookSensitiveComponent isSensitive={true}>
  <Button title="Blacklisted button" />
</SmartlookSensitiveComponent>

// Whitelisting
<SmartlookSensitiveComponent isSensitive={false}>
  <TextInput
    style={{height: 40}}
    defaultValue="Whitelisted input"
  />
</SmartlookSensitiveComponent>

Using useSmartlookSensitiveRef hook

The another way to handle sensitive views is with useSmartlookSensitiveRef hook.

import { WebView } from 'react-native-webview';
import { useSmartlookSensitiveRef } from 'smartlook-react-native-wrapper';

const isWebViewSensitive = false;
const ref = useSmartlookSensitiveRef<WebView>(isWebViewSensitive);

<WebView ref={ref} source={{ html: "..." }} />

No Rendering

Sometimes the whole screen consists of sensitive data. In these cases it is beneficial to not record any screen data. This can be done by switching to no rendering rendering mode:

Smartlook.setRenderingMode(Smartlook.RenderingMode.NoRendering);

📘
SDK provides rendering modes that hide sensitive information by simplifying the rendered screen for recording. This can be advantageous because all user interaction is still being recorded, but all sensitive data are not rendered by design. Read more about rendering modes in conceptual documentation.

🚧
Some screens can leak sensitive data even through automatically detected touch events. More about this issue in secure custom keyboard example.

When an application is no longer displaying sensitive data, the screen rendering mode can be set back to the preferred variant:

Smartlook.setRenderingMode(Smartlook.RenderingMode.Native);

WebView blacklisting/whitelisting

When an application has some parts displayed using WebView and these parts should be recorded, then the WebView recording needs to be enabled by adding the given view reference to whitelist:

// The full example can be seen in `example/src/screens/WebViewScreen.tsx`
import { WebView } from 'react-native-webview';
import { useSmartlookSensitiveRef } from 'smartlook-react-native-wrapper';

const isWebViewSensitive = false;
const ref = useSmartlookSensitiveRef<WebView>(isWebViewSensitive);

<WebView ref={ref} source={{ html: "..." }} />

If WebView is being recorded, all sensitive elements on the displayed web page should be marked as sensitive so that they are hidden. This can be done by marking sensitive HTML elements with .smartlook-hide css class:

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

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

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