Occlusion - Hide Sensitive Data

Occlusion is a data privacy technique used to mask or hide sensitive information from being recorded or exposed during analytics tracking. In the context of the UXCam SDK, occlusion ensures that user inputs—such as passwords, credit card numbers, emails, and other personal data—are automatically or manually hidden from session recordings and logs. This helps protect user privacy and maintain compliance with data protection regulations like GDPR and CCPA.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

Success

Negative potential consequences of an action.

Elements that are occluded by default

Inputs will be occluded by default if they meet any of the following criteria:

Input Types	Input Names Containing	Autocomplete Properties Containing
'password' 'email' 'tel' 'hidden' 'number' 'hidden'	'password' 'cc-' 'email'	'cc-' 'address' 'phone' 'email' 'password'

Enabling Occlusion

Enables occlusion of sensitive data in URLs and query parameters.

Occluding Query Parameters
Query parameters to be occluded should be listed under queryParams.

occlusion: {  
  queryParams: ['product', 'userId']  
}

// Example  
// Input: http://www.uxcam.com/query?product=shoes&userId=321  
// Output:http://www.uxcam.com/query?product=_occluded_&userId=_occluded

Occluding URLs
A custom function can be used to occlude parts of the URL before the query parameters.

occlusion: {  
  url: function(url) {  
    // Custom logic to modify the URL  
    return url.replace(/\/invite\/\w+/, '/invite/:inviteId');  
  }  
}  
// Example  
// Input: http://www.uxcam.com/invite/12345  
// Output: http://www.uxcam.com/invite/:inviteId

Occlusion of HTML Elements
To occlude specific HTML elements, add the attribute data-uxc="obfuscated" to the elements you want to occlude.

<div data-uxc="obfuscated">Sensitive Content</div>