How to anonymize sensitive page content?

Text masking

Sensitive data in forms (e.g. passwords and credit card details) is always anonymized in the recordings. It’s possible to anonymize static content as well, such as surnames and other personal information.

You can add a data-ls-disabled attribute to an HTML element. This attribute will anonymize the tetxt content, e.g. the surname will be replaced with asterisks, like in the example below:

The attribute is applied to all child elements, too. In the case of regular clicks and rage clicks, clicking on an anonymized element won’t reveal the text value.

Anonymize whole text content inside .user-info:

<div data-ls-disabled class="user-info">
<p>Logged as: <span>John Doe</span></p>
</div>
      

Anonymize only sensitive element:

<div class="user-info">
 <p>Logged as: <span data-ls-disabled>John Doe</span></p>
</div>
      

You can also use data-ls-enabled to make content visible. Useful if some child elements could be visible.

<div data-ls-disabled class="article">
  <p>Lorem ipsum sensitive article.</p>
  <button data-ls-enabled>Subscribe</button>
</div>
      

Image masking

It's possible to mask sensitive images as well. To mask image just add data-ls-mask attribute to img HTML element. During the playback, image will be displayed as in the example below:

Anonymize through Web UI

It's also possible to anonymize data through the LiveSession dashboard, without any changes in code. If you are interested, go to website settings and choose the 'Recording elements' tab. Choose HTML selector and anonymize type. It is worth mentioning that selector must be a valid HTML selector.