HumanBehavior SDK provides comprehensive data redaction with two flexible modes to protect sensitive information while maintaining analytics value.
Redaction Modes
Privacy-First Mode (Default)
Everything is masked by default. Selectively unredact fields you want to track.
// All inputs masked by default, unredact specific fields
const tracker = HumanBehaviorTracker.init(API_KEY, {
redactionStrategy: {
mode: 'privacy-first' as const as const,
unredactFields: ['#public-comment', '#feedback-input']
}
});
Visibility-First Mode
Everything is visible by default. Selectively redact sensitive fields using data-hb-redact="true".
// All inputs visible by default, redact fields marked with data-hb-redact="true"
const tracker = HumanBehaviorTracker.init(API_KEY, {
redactionStrategy: {
mode: 'visibility-first' as const
}
});
Field Selection Methods
1. Markup-Driven Selection (Primary Method)
Add data-hb-redact="true" to any input element you want to redact:
<!-- These fields will be redacted in visibility-first mode -->
<input id="username" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
<textarea class="sensitive-input" data-hb-redact="true"></textarea>
2. Programmatic Selection (Privacy-First Only)
For privacy-first mode, configure unredacted fields at initialization:
// Privacy-first: unredact specific fields
redactionStrategy: {
mode: 'privacy-first' as const,
unredactFields: ['#public-comment', '.feedback-input', 'input[name="topic"]']
}
3. Runtime Control
Change redaction settings after initialization:
// Add more fields to unredact (privacy-first)
tracker.setUnredactedFields(['#new-public-field']);
// Clear all unredacted fields (everything becomes redacted)
tracker.clearUnredactedFields();
Framework Integration
React/Next.js
import { HumanBehaviorProvider } from 'humanbehavior-js/react';
function App() {
return (
<HumanBehaviorProvider
apiKey={process.env.NEXT_PUBLIC_HUMANBEHAVIOR_API_KEY}
options={{
redactionStrategy: {
mode: 'visibility-first' as const
}
}}
>
<YourApp />
</HumanBehaviorProvider>
);
}
Vue
import { HumanBehaviorTracker } from 'humanbehavior-js';
const tracker = HumanBehaviorTracker.init(API_KEY, {
redactionStrategy: {
mode: 'privacy-first' as const,
unredactFields: ['#public-comment']
}
});
Angular
import { HumanBehaviorService } from '@humanbehavior/angular';
constructor(private humanBehavior: HumanBehaviorService) {
this.humanBehavior.init(API_KEY, {
redactionStrategy: {
mode: 'visibility-first' as const
}
});
}
Vanilla JavaScript
const tracker = HumanBehaviorTracker.init(API_KEY, {
redactionStrategy: {
mode: 'visibility-first' as const
}
});
Advanced Features
1:1 Character Masking
Input values are masked with asterisks matching the character count:
- Typing “hello” shows ”*****” in recordings
- Typing “test” shows ”****” in recordings
Redaction works with all common input types:
text, email, password, number, tel, url, search
textarea, date, time, datetime-local, month, week
Always Protected
- Password fields: Always masked regardless of mode
- Security: Passwords cannot be unredacted
Common Use Cases
E-commerce Checkout
<!-- Mark sensitive payment fields for redaction -->
<input id="credit-card" data-hb-redact="true">
<input id="cvv" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
// Use visibility-first mode
redactionStrategy: { mode: 'visibility-first' as const }
// Show public feedback, hide personal info
redactionStrategy: {
mode: 'privacy-first' as const,
unredactFields: ['#feedback-text', '#rating']
}
Simple Markup-Driven Approach
<!-- Just add data-hb-redact="true" to sensitive fields -->
<input id="username" data-hb-redact="true">
<input id="ssn" data-hb-redact="true">
<input id="credit-card" data-hb-redact="true">
API Reference
| Method | Description |
|---|
setUnredactedFields(fields) | Add fields to unredact (privacy-first) |
clearUnredactedFields() | Redact all fields |
hasUnredactedFields() | Check if any fields are unredacted |
getUnredactedFields() | Get currently unredacted fields |
Privacy & Compliance
- Flexible Control: Choose between privacy-first or visibility-first based on your needs
- Automatic Protection: Password fields are always protected
- Real-time Masking: Data is masked as users type
- Compliance Ready: Supports GDPR, HIPAA, and other privacy regulations
- Framework Agnostic: Works consistently across all supported frameworks
Choose the mode that best fits your use case. Privacy-first is recommended for applications handling sensitive data, while visibility-first with data-hb-redact="true" is better for public-facing applications where you want to track most interactions and only redact specific sensitive fields.