Skip to main content

Automatic Obfuscation

Recapt includes built-in automatic obfuscation to protect sensitive user data during session recordings. This ensures that personal information entered by users is masked before being stored.

How It Works​

Recapt automatically masks all user input to protect sensitive data by default. This obfuscation happens on the client-side before data is sent to Recapt servers, ensuring sensitive information never leaves the user's browser in plain text.

Input Field Obfuscation​

All text typed into input fields is automatically obfuscated. This includes:

  • Text inputs (<input type="text">)
  • Password fields (<input type="password">)
  • Email fields (<input type="email">)
  • Search fields (<input type="search">)
  • Textareas (<textarea>)
  • Any other form input element

When you replay a session, you'll see that users interacted with input fields, but the actual text they typed will be masked. This provides privacy protection while still allowing you to understand user behavior and form interactions.

What You'll See in Replays​

What User TypedWhat You See in Replay
john@example.com*****************
MySecretPassword123********************
4111-1111-1111-1111*******************
Hello, I need help with...**************************

Custom CSS Class Obfuscation​

In addition to automatic input obfuscation, you can specify CSS classes to obfuscate all text within specific display elements (not just inputs). This is useful for:

  • Account balances or financial data shown on screen
  • Personal information displayed in dashboards
  • Sensitive data in tables or lists
  • Any visible text that shouldn't be recorded

Configuring Custom Obfuscation​

  1. Go to Settings > Organization in your Recapt dashboard
  2. Find the Obfuscate CSS Classes section
  3. Enter the CSS class name (without the leading dot)
  4. Click Add Class to add more classes
  5. Click Save to apply changes

Example Configuration​

If you have HTML like this:

<div class="user-profile">
  <span class="private-info">Account Balance: $5,432.10</span>
  <span class="sensitive-data">SSN: 123-45-6789</span>
</div>

Add these classes to your obfuscation settings:

private-info
sensitive-data

The text within elements with these classes will be masked in recordings:

  • Account Balance: $5,432.10 → ***********************
  • SSN: 123-45-6789 → ***************

How CSS Obfuscation Works​

When you specify a CSS class for obfuscation:

  1. Recapt finds all elements matching the selector (e.g., .private-info)
  2. All text content within those elements is masked
  3. Child elements are also included in the masking
  4. The obfuscation is applied during recording, before data is transmitted
tip

The CSS class obfuscation is synced to your Recapt installation automatically. Changes take effect on the next page load for users.

Best Practices​

Use CSS Obfuscation For​

  • Financial information displayed on screen (account balances, transaction amounts)
  • Personal identifiers shown in UI (government IDs, license numbers)
  • Health information (medical records, conditions)
  • Authentication tokens or secrets displayed in UI
  • Any displayed data subject to privacy regulations (GDPR, HIPAA, etc.)

Use Semantic Class Names​

Create dedicated classes for sensitive data:

<!-- Good: Clear intent -->
<span class="pii-data">123-45-6789</span>
<div class="sensitive-financial">$10,000.00</div>

<!-- Avoid: Styling classes that might change -->
<span class="text-red-500">123-45-6789</span>

Test Your Configuration​

After configuring obfuscation:

  1. Record a test session on your website
  2. Review the session in Recapt
  3. Verify sensitive displayed data is properly masked
  4. Check that important non-sensitive data is still visible

Obfuscation and Session Replay​

During session replay:

  • All input field content appears as asterisks or masked characters
  • Elements with configured CSS classes are also masked
  • The layout and positioning of elements is preserved
  • You can still understand the user flow and interactions
  • Clicks and interactions are visible, just not the typed content

Privacy Compliance​

Automatic obfuscation helps with privacy compliance:

  • GDPR: Input obfuscation minimizes personal data collection
  • HIPAA: Helps protect health information entered in forms
  • PCI-DSS: Credit card numbers in inputs are automatically masked
  • Your Privacy Policy: Update it to reflect your use of session recording
info

Since all input content is automatically obfuscated, you don't need to worry about accidentally capturing passwords, credit card numbers, or other sensitive information that users type into forms.

Troubleshooting​

Displayed Data Not Being Obfuscated​

If text displayed on screen (not in inputs) isn't being masked:

  1. Add the appropriate CSS class to your obfuscation settings
  2. Verify CSS classes are correctly configured (without leading dot)
  3. Ensure changes have been saved
  4. Clear browser cache and record a new session

Too Much Data Obfuscated​

  1. Review your CSS class configuration for overly broad selectors
  2. Check for parent elements that might be including child content
  3. Consider using more specific class names

CSS Obfuscation Not Appearing Immediately​

CSS class obfuscation changes sync on the next page load. If you've just made changes:

  1. Wait a few seconds for the configuration to sync
  2. Refresh your test page
  3. Record a new session to see the changes