# 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
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.cuoral.com/integration/sensitive-data-protection.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.