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
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:
Rendering mode | What is captured |
---|---|
RenderingMode.Native | Regularly captures the app screen which the SDK immediately processes to remove sensitive data. The frames are then complied to make the session recording. For more information, see View sensitivity. |
RenderingMode.Wireframe | Wireframe rendering mode is not supported on Cordova |
RenderingMode.NoRendering | No content is recorded. |
Setting the rendering mode
To set the rendering mode:
Smartlook.setRenderingMode({ renderingMode: RenderingMode.NATIVE });
Reading the rendering mode
To see what rendering mode the SDK is using:
Smartlook.getRenderingMode(successCallback);
function successCallback(renderingMode: RenderingMode) {
console.log('Rendering mode:' + renderingMode);
}
Hidden elements
Locally hidden elements
Sensitive elements are hidden locally on the device. No sensitive data is transferred to or stored in the dashboard.
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
You can change the WebView
recording by controlling it's sensitivity:
Smartlook.setWebViewSensitivity({ isSensitive: false });
WebView
recordingBy default,
WebView
recording is enabled. To ensure security, set elements assensitive
.
If WebView
is 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>
button
andsubmit
inputsBy default, all inputs are hidden except for
button
andsubmit
types.
Shown elements
Hidden inputs that are hidden by default will be recorded if 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 .smartlook-hide
element, you can use a RecordingMask
:
Smartlook.setRecordingMask({
recordingMaskList: [
{ maskType: 'COVERING',
maskRect: { left: 0, top: 0, width: 100, height: 250 }
},
{ maskType: 'COVERING',
maskRect: { left: 80, top: 50, width: 100, height: 250 }
}
]
});
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:
Mask type | How it works |
---|---|
RecordingMaskType COVERING | The area defined by the element Rect is not recorded |
RecordingMaskType ERASING | The area defined by the element Rect is recorded even if a previous RecordingMask Element inside a list was covering the area. |
RecordingMask
example
RecordingMask
exampleThe 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 aCovering
value. TheCovering
value masks the element in the session recording. - The
video_item_image
element (red box) has anErasing
value. The image is visible in the session recording because theErasing
value cancels theCovering
value.