Sensitive Data Protection

Cuoral's session recording system includes built-in privacy features to prevent capturing sensitive customer data. This guide explains how to block specific elements from being recorded.

Quick Start

Add the cuoral-block class to any HTML element containing sensitive information:

<div class="cuoral-block">
  Credit Card: 1234-5678-9012-3456
</div>

Method 1: CSS Classes (Recommended)

The easiest way to protect sensitive elements is by adding specific CSS classes directly to your HTML.

Block Classes

These classes completely block elements from being recorded:

cuoral-block
sensitive-data
confidential

Example Usage:

<!-- Block credit card information -->
<div class="cuoral-block">
  <label>Credit Card Number</label>
  <input type="text" name="card-number" />
</div>

<!-- Block API keys or tokens -->
<div class="sensitive-data">
  API Key: sk_live_abc123xyz789
</div>

<!-- Block confidential business data -->
<section class="confidential">
  <h3>Internal Company Metrics</h3>
  <p>Revenue: $1,234,567</p>
</section>

Ignore Classes

These classes ignore interaction events while still showing the element structure:

cuoral-ignore
no-track

<!-- Don't track clicks/interactions but show element -->
<button class="cuoral-ignore">Internal Admin Action</button>

Method 2: JavaScript API

Use the Cuoral JavaScript API to dynamically add custom blocking classes.

Add Custom Block Classes

// Add a single class to the block list
Cuoral.blockClasses('my-sensitive-class');

// Add multiple classes at once
Cuoral.blockClasses(['private-info', 'internal-data', 'company-secrets']);

After adding custom classes, use them in your HTML:

<div class="my-sensitive-class">
  This content will be blocked from recording
</div>

Add Custom Sensitive Field Patterns

Define custom patterns to automatically detect and mask sensitive input fields:

// Add single pattern
Cuoral.addSensitivePatterns(/passport/i);

// Add multiple patterns
Cuoral.addSensitivePatterns([
  /tax[_-]?id/i,
  /national[_-]?id/i,
  /driver[_-]?license/i
]);

Method 3: Configure Privacy Settings

Customize global privacy behavior:

Cuoral.configurePrivacy({
  maskAllInputs: false,              // Set to false to only mask sensitive inputs
  autoMaskSensitivePatterns: true    // Auto-detect sensitive field names
});

Configuration Options:

Option

Type

Default

Description

maskAllInputs

boolean

true

Mask all input fields by default

autoMaskSensitivePatterns

boolean

true

Automatically detect and mask fields with sensitive names

Automatic Protection

Cuoral automatically masks these sensitive input types without any configuration:

Input Types (Always Masked):

<input type="password">
<input type="tel">
<input type="email">
<input type="number">

Field Name Patterns (Auto-detected):

Fields with names or IDs matching these patterns are automatically masked:

password
credit-card or credit_card
card-number or card_number
cvv or cvc
ssn
social-security or social_security
routing-number or routing_number
account-number or account_number
pin-code or pin_code
secret
token
api-key or api_key

Complete Example

<!DOCTYPE html>
<html>
<head>
  <meta name="cuoral-public-key" content="your-public-key">
  <script src="https://cuoral.com/intelligence.js"></script>
</head>
<body>
  <!-- Regular content - will be recorded -->
  <form>
    <label>Username</label>
    <input type="text" name="username" />

    <!-- Auto-masked (password type) -->
    <label>Password</label>
    <input type="password" name="password" />

    <!-- Completely blocked from recording -->
    <div class="cuoral-block">
      <label>Credit Card Number</label>
      <input type="text" name="cc-number" />
      
      <label>CVV</label>
      <input type="text" name="cvv" />
    </div>

    <!-- Custom sensitive class -->
    <div class="my-sensitive-class">
      <label>Social Security Number</label>
      <input type="text" name="ssn" />
    </div>

    <button type="submit">Submit</button>
  </form>

  <script>
    // Add custom blocking classes
    Cuoral.blockClasses('my-sensitive-class');
    
    // Add custom sensitive patterns
    Cuoral.addSensitivePatterns([/passport/i, /driver[_-]?license/i]);
  </script>
</body>
</html>

Best Practices

✅ Do:

Use cuoral-block on container elements holding sensitive data
Add blocking classes during development, not at runtime
Test your implementation to verify sensitive data is blocked
Block entire form sections containing payment information
Use semantic class names for your custom block classes

❌ Don't:

Rely solely on automatic masking for highly sensitive data
Use blocking classes on the <body> or main container (blocks everything)
Add block classes dynamically after page load (may miss initial recording)
Forget to document which elements need protection for your team

Verification

To verify that sensitive elements are properly blocked:

Open your browser's Developer Console

Enable debug mode:

Cuoral.configurePrivacy({ debugMode: true });

Check console logs for blocked elements and masked fields
Review session recordings in your Cuoral dashboard

PreviousCustom Events

NextMobile

Last updated 4 months ago