How to anonymize sensitive page content?

Kamil Drazkiewicz
Kamil Drazkiewicz2 minMay 11, 2022

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:

Anonymizing data

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:

Anonymizing images

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.

Recording elements

Recording elements modal

Related articles

    Start understanding
    your users today

    Free 14-day trial

    No credit card required

    Easy setup