Privacy and masking

All masking happens client-side, inside the recorder, while the DOM is being serialized. Masked or blocked content never leaves the user’s browser: it is not captured, buffered, or sent in any form.

What is masked by default

Out of the box, the SDK masks the contents of:

<input type="password">
<input type="email">
<input type="tel">

Masked input values are replaced with asterisks in the recording. Everything else, including other input fields and page text, is recorded as-is unless you configure otherwise.

The SDK does not automatically detect and mask sensitive text that appears outside those input types, such as credit card numbers rendered in page content. If your product displays sensitive data, mask or block those elements explicitly using the classes and selectors below.

Mask all inputs

For strict privacy, mask every input field regardless of type:

await SessionRecorder.init({
  apiKey: 'ob_live_your_api_key_here',
  maskAllInputs: true,
});

This is off by default. We recommend enabling it unless you specifically need to see what users type.

Controlling elements with CSS classes

Three classes are honored by default. Add them directly in your markup, no SDK configuration needed:

Class	Effect
`replay-mask`	The element’s text is masked (replaced with asterisks). Layout and structure are still recorded.
`replay-block`	The element is not recorded at all. A placeholder of the same dimensions appears in the replay.
`replay-ignore`	Input events on the element are ignored. The element itself is still visible in the replay.

<!-- Text is masked but the element is visible -->
<div class="replay-mask">Account number: 12345678</div>

<!-- Entire element replaced by an empty placeholder -->
<div class="replay-block">
  <iframe src="https://example.com/embedded-payment"></iframe>
</div>

<!-- Keystrokes not captured -->
<input class="replay-ignore" name="search" />

The class names themselves are configurable via maskTextClass, blockClass, and ignoreClass if you cannot use the defaults.

Controlling elements with CSS selectors

If you cannot add classes to your markup, target elements with selectors instead:

await SessionRecorder.init({
  apiKey: 'ob_live_your_api_key_here',
  maskTextSelector: '[data-private], .account-balance',
  blockSelector: 'iframe, .third-party-widget',
  ignoreSelector: 'input[name="coupon"]',
});

Selectors and classes combine: an element matching either is treated accordingly.

Choosing between mask, block, and ignore

Mask when the layout matters but the content is sensitive: balances, names, message text.
Block when the whole region should not be captured: embedded third-party widgets, document viewers, video.
Ignore when the element can be shown but what the user types into it should not be captured.

What this feature does not do

To keep the privacy story honest:

There is no automatic detection of credit card numbers, government IDs, or emails in page text. Mask those regions explicitly.
The SDK does not ship consent management. If you need user consent before recording, gate the init() call behind your own consent flow.

Getting Started

SDK Reference

Core Concepts

Integrations

What is masked by default

Mask all inputs

Controlling elements with CSS classes

Controlling elements with CSS selectors

Choosing between mask, block, and ignore

What this feature does not do

​What is masked by default

​Mask all inputs

​Controlling elements with CSS classes

​Controlling elements with CSS selectors

​Choosing between mask, block, and ignore

​What this feature does not do

What is masked by default

Mask all inputs

Controlling elements with CSS classes

Controlling elements with CSS selectors

Choosing between mask, block, and ignore

What this feature does not do