> For the complete documentation index, see [llms.txt](https://docs.cuoral.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cuoral.com/integration/sensitive-data-protection.md).
# 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:
```html
Credit Card: 1234-5678-9012-3456
```
***
### 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:**
```html
API Key: sk_live_abc123xyz789
Internal Company Metrics
Revenue: $1,234,567
```
#### Ignore Classes
These classes **ignore interaction events** while still showing the element structure:
* `cuoral-ignore`
* `no-track`
```html
```
***
### Method 2: JavaScript API
Use the Cuoral JavaScript API to dynamically add custom blocking classes.
#### Add Custom Block Classes
```javascript
// 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:
```html
This content will be blocked from recording
```
#### Add Custom Sensitive Field Patterns
Define custom patterns to automatically detect and mask sensitive input fields:
```javascript
// 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:
```javascript
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):
* ``
* ``
* ``
* ``
#### 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
```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 `` 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:
1. Open your browser's Developer Console
2. Enable debug mode:
```javascript
Cuoral.configurePrivacy({ debugMode: true });
```
3. Check console logs for blocked elements and masked fields
4. Review session recordings in your Cuoral dashboard