Overview

Due to the nature of Highlight's core product, we keep privacy as our top priority. We've built a few ways to redact/mask certain DOM elements while still preserving the structure of your DOM recording. It is important to note that for both of the below solutions, all data is sanitized on the client, so sensitive data never reaches our servers/platform.

Strict Privacy Mode

If you don't want to manually annotate what elements to not record then you can use isStrictPrivacy. Enabling enableStrictPrivacy will obfuscate all text and images. The text obfuscation is not reversible and is done on the client.

Here are some examples:

• <h1>Hello World</h1> will be recorded as <h1>1f0eqo jw02d</h1>
• <img src="https://my-secrets.com/secret.png" /> will be recorded as <img src="" />

Masking elements

One way to sanitize your recordings is by adding the highlight-block CSS class to elements that should be ignored. Below are a couple of examples:

<div class="highlight-block"/>

const Foo = () => {
    return <div className={"highlight-block"}/>
}

The Highlight snippet will in-turn measure the dimensions of the ignored element, and when the recording is being replayed, an empty placeholder will replace the content.

Ignoring element input

For sensitive input fields that your team would like to ignore user input for, you can add a CSS class highlight-ignore that will preserve the styling of the input element, but ignore all user input.

Similar to the previous example, a relevant code snippet is as follows:

<input class="highlight-ignore"/>

const Foo = () => {
    return <input className={"highlight-ignore"}/>
}

Redaction Defaults

At the moment, we ignore all <input/> elements with the attribute type="password" by default.