Welcome to Highlight
Getting Started
Overview
Backend / Server
Client / Frontend
Fullstack Frameworks
Tips
Content-Security-Policy
Local Development
Monkey Patches
Performance Impact
Proxying Highlight
Session Search Deep Linking
Troubleshooting
Upgrading Highlight
Session Replay
Console Messages
HTML iframe Recording
Identifying Users
Live Mode
Network DevTools
Privacy
Rage Clicks
Recording Network Requests and Responses
Session Sharing
Session Shortcut
Tracking Events
Versioning Sessions
Error Monitoring
Grouping Errors
Sourcemaps
Versioning Errors
Product Features
Alerts
Analytics
Canvas
Comments
Environments
Frontend Observability
Keyboard Shortcuts
Performance Data
Segments
Session Search
Team Management
User Feedback
Web Vitals
WebGL
Integrations
Amplitude Integration
Clearbit Integration
Electron Integration
Front Plugin
Intercom Integration
Linear Integration
Mixpanel Integration
React.js Integration
Segment Integration
Sentry Integration
Slack Integration
Vercel Integration
highlight.run Changelog
5.0.0
5.0.1
5.1.0
5.1.1
5.1.2
5.1.3
5.1.4
5.1.5
Menu
Docs / Session Replay / Privacy

Privacy

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.

Masking Elements

One way to sanitize your recordings is by adding the highlight-block CSS class to elements that should be ignored.

<div class="highlight-block">Super secret sauce</div>
Copy

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.

Elements with the highlight-block class will show up as redacted in your recordings

Ignoring 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.

<input class="highlight-ignore" name="social security number" />
Copy
Strict Privacy Mode

If you don't want to manually annotate what elements to not record then you can set enableStrictPrivacy to true when calling H.init(). Strict Privacy Mode 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="" />

<iframe height="500px" href="https://xenodochial-benz-c14354.netlify.app/" width="100%" border="none" src="https://xenodochial-benz-c14354.netlify.app/" style="border:none" ><a href="https://xenodochial-benz-c14354.netlify.app/" target="" title="xenodochial-benz-c14354.netlify.app" >null</a ></iframe >
Copy
Obfuscating a Specific Element

You can now obfuscate specific HTML elements by adding the highlight-mask CSS class. The effect is the same of setting enableStrictPrivacy but applies to the specific HTML element that you mask.

<div class="highlight-mask"> This is some sensitive data <button>Important Button</button> </div>
Copy