humanbehavior-js 0.4.23 → 0.4.24

package/dist/types/angular/index.d.ts

@@ -2,6 +2,12 @@ interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
     userFields?: string[];
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[];
+        redactFields?: string[];
+    };
+    legacyRedactFields?: string[];
 }
 
 declare global {
@@ -46,6 +52,11 @@ declare class HumanBehaviorTracker {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
         recordCanvas?: boolean;
@@ -62,6 +73,12 @@ declare class HumanBehaviorTracker {
     constructor(apiKey: string | undefined, ingestionUrl?: string, options?: {
         enableAutomaticProperties?: boolean;
         propertyDenylist?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
+        redactFields?: string[];
     });
     private init;
     private ensureInitialized;
@@ -162,6 +179,11 @@ declare class HumanBehaviorTracker {
      * @param options Optional configuration for redaction behavior
      */
     redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setRedactedFields(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact (e.g., ['#username', '#comment'])

package/dist/types/index.d.ts

@@ -2,12 +2,25 @@ interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
     userFields?: string[];
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[];
+        redactFields?: string[];
+    };
+    legacyRedactFields?: string[];
 }
 declare class RedactionManager {
     private redactedText;
     private unredactedFields;
+    private redactedFields;
+    private redactionMode;
     private excludeSelectors;
     constructor(options?: RedactionOptions);
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setFieldsToRedact(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact
@@ -26,6 +39,10 @@ declare class RedactionManager {
      * Check if any fields are currently unredacted
      */
     hasUnredactedFields(): boolean;
+    /**
+     * Get the current redaction mode
+     */
+    getRedactionMode(): 'privacy-first' | 'visibility-first';
     /**
      * Get the currently unredacted fields
      */
@@ -36,9 +53,10 @@ declare class RedactionManager {
      */
     getMaskTextSelector(): string | null;
     /**
-     * Check if an element should be unredacted
+     * Apply redaction classes to DOM elements (for visibility-first mode)
+     * Adds 'rr-mask' class to elements that should be redacted
      */
-    shouldUnredactElement(element: HTMLElement): boolean;
+    applyRedactionClasses(): void;
     /**
      * Apply unredaction classes to DOM elements
      * Removes 'rr-mask' class from elements that should be unredacted
@@ -60,6 +78,10 @@ declare class RedactionManager {
      * Check if an element is currently unredacted
      */
     isElementUnredacted(element: HTMLElement): boolean;
+    /**
+     * Check if an element should be unredacted
+     */
+    shouldUnredactElement(element: HTMLElement): boolean;
 }
 declare const redactionManager: RedactionManager;
 
@@ -105,6 +127,11 @@ declare class HumanBehaviorTracker {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
         recordCanvas?: boolean;
@@ -121,6 +148,12 @@ declare class HumanBehaviorTracker {
     constructor(apiKey: string | undefined, ingestionUrl?: string, options?: {
         enableAutomaticProperties?: boolean;
         propertyDenylist?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
+        redactFields?: string[];
     });
     private init;
     private ensureInitialized;
@@ -221,6 +254,11 @@ declare class HumanBehaviorTracker {
      * @param options Optional configuration for redaction behavior
      */
     redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setRedactedFields(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact (e.g., ['#username', '#comment'])

package/dist/types/install-wizard.d.ts

@@ -56,7 +56,7 @@ declare class AutoInstallationWizard {
      */
     detectFramework(): Promise<FrameworkInfo>;
     /**
-     * Install the SDK package
+     * Install the SDK package with latest version range
      */
     protected installPackage(): Promise<void>;
     /**

package/dist/types/react/index.d.ts

@@ -4,6 +4,12 @@ interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
     userFields?: string[];
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[];
+        redactFields?: string[];
+    };
+    legacyRedactFields?: string[];
 }
 
 declare global {
@@ -48,6 +54,11 @@ declare class HumanBehaviorTracker {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
         recordCanvas?: boolean;
@@ -64,6 +75,12 @@ declare class HumanBehaviorTracker {
     constructor(apiKey: string | undefined, ingestionUrl?: string, options?: {
         enableAutomaticProperties?: boolean;
         propertyDenylist?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
+        redactFields?: string[];
     });
     private init;
     private ensureInitialized;
@@ -164,6 +181,11 @@ declare class HumanBehaviorTracker {
      * @param options Optional configuration for redaction behavior
      */
     redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setRedactedFields(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact (e.g., ['#username', '#comment'])

package/dist/types/remix/index.d.ts

@@ -5,6 +5,12 @@ interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
     userFields?: string[];
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[];
+        redactFields?: string[];
+    };
+    legacyRedactFields?: string[];
 }
 
 declare global {
@@ -49,6 +55,11 @@ declare class HumanBehaviorTracker {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
         recordCanvas?: boolean;
@@ -65,6 +76,12 @@ declare class HumanBehaviorTracker {
     constructor(apiKey: string | undefined, ingestionUrl?: string, options?: {
         enableAutomaticProperties?: boolean;
         propertyDenylist?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
+        redactFields?: string[];
     });
     private init;
     private ensureInitialized;
@@ -165,6 +182,11 @@ declare class HumanBehaviorTracker {
      * @param options Optional configuration for redaction behavior
      */
     redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setRedactedFields(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact (e.g., ['#username', '#comment'])

package/dist/types/svelte/index.d.ts

@@ -2,6 +2,12 @@ interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
     userFields?: string[];
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[];
+        redactFields?: string[];
+    };
+    legacyRedactFields?: string[];
 }
 
 declare global {
@@ -46,6 +52,11 @@ declare class HumanBehaviorTracker {
         ingestionUrl?: string;
         logLevel?: 'none' | 'error' | 'warn' | 'info' | 'debug';
         redactFields?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
         enableAutomaticTracking?: boolean;
         suppressConsoleErrors?: boolean;
         recordCanvas?: boolean;
@@ -62,6 +73,12 @@ declare class HumanBehaviorTracker {
     constructor(apiKey: string | undefined, ingestionUrl?: string, options?: {
         enableAutomaticProperties?: boolean;
         propertyDenylist?: string[];
+        redactionStrategy?: {
+            mode: 'privacy-first' | 'visibility-first';
+            unredactFields?: string[];
+            redactFields?: string[];
+        };
+        redactFields?: string[];
     });
     private init;
     private ensureInitialized;
@@ -162,6 +179,11 @@ declare class HumanBehaviorTracker {
      * @param options Optional configuration for redaction behavior
      */
     redact(options?: RedactionOptions): Promise<void>;
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    setRedactedFields(fields: string[]): void;
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact (e.g., ['#username', '#comment'])

package/dist/types/wizard/index.d.ts

@@ -56,7 +56,7 @@ declare class AutoInstallationWizard {
      */
     detectFramework(): Promise<FrameworkInfo$2>;
     /**
-     * Install the SDK package
+     * Install the SDK package with latest version range
      */
     protected installPackage(): Promise<void>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "humanbehavior-js",
-  "version": "0.4.23",
+  "version": "0.4.24",
   "description": "SDK for HumanBehavior session and event recording",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/readme.md

@@ -85,7 +85,11 @@ const tracker = HumanBehaviorTracker.init(apiKey, options);
 **Options:**
 - `ingestionUrl`: Custom ingestion server URL
 - `logLevel`: 'none' | 'error' | 'warn' | 'info' | 'debug'
-- `redactFields`: Array of CSS selectors to redact
+- `redactFields`: Array of CSS selectors to unredact (DEPRECATED: Use redactionStrategy instead)
+- `redactionStrategy`: Flexible redaction configuration
+  - `mode`: 'privacy-first' | 'visibility-first' (default: 'privacy-first')
+  - `unredactFields`: Array of CSS selectors to make visible (when mode: 'privacy-first')
+  - `redactFields`: Array of CSS selectors to hide (when mode: 'visibility-first')
 - `suppressConsoleErrors`: Boolean to suppress common rrweb errors (default: true)
 - `recordCanvas`: Boolean to enable canvas recording with PostHog-style protection (default: false)
 
@@ -117,14 +121,64 @@ await tracker.trackNavigationEvent('pushState', '/home', '/about');
 
 ### Data Redaction
 
+The SDK supports flexible redaction strategies to protect sensitive data:
+
+#### Privacy-First Mode (Default)
+Everything is redacted by default. Specify fields to unredact:
+
+```javascript
+// Privacy-first: everything redacted, unredact specific fields
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    redactionStrategy: {
+        mode: 'privacy-first',
+        unredactFields: ['#username', '#comment', '.public-field']
+    }
+});
+```
+
+#### Visibility-First Mode
+Everything is visible by default. Specify fields to redact:
+
+```javascript
+// Visibility-first: everything visible, redact specific fields
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    redactionStrategy: {
+        mode: 'visibility-first',
+        redactFields: ['#password', '#credit-card', '.sensitive-data']
+    }
+});
+```
+
+#### Legacy Support
+The old `redactFields` option still works (privacy-first mode):
+
 ```javascript
-// Redact sensitive fields
-tracker.setRedactedFields(['input[type="password"]', '#email']);
+// Legacy: same as privacy-first mode
+const tracker = HumanBehaviorTracker.init('your-api-key', {
+    redactFields: ['#username', '#email'] // These fields will be unredacted
+});
+```
 
-// Check if redaction is active
-const isActive = tracker.isRedactedFields();
+#### Dynamic Redaction
+Change redaction settings at runtime:
+
+```javascript
+// Privacy-first: add fields to unredact
+tracker.setUnredactedFields(['#new-field', '.another-field']);
+
+// Visibility-first: add fields to redact
+tracker.setRedactedFields(['#sensitive-field', '.private-data']);
+
+// Clear all settings
+tracker.clearUnredactedFields(); // Privacy-first
+tracker.clearRedactedFields();   // Visibility-first
 ```
 
+#### Security Features
+- **Password fields always protected** (cannot be unredacted in any mode)
+- **CSS selector validation** (prevents invalid selectors)
+- **Runtime safety checks** (handles DOM errors gracefully)
+
 ### Debugging
 
 ```javascript

package/src/redact.ts

@@ -10,12 +10,20 @@ const isBrowser = typeof window !== 'undefined';
 export interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
-    userFields?: string[]; // Fields that the user wants to unredact
+    userFields?: string[]; // Fields that the user wants to unredact (legacy)
+    redactionStrategy?: {
+        mode: 'privacy-first' | 'visibility-first';
+        unredactFields?: string[]; // Fields to make visible (when mode: 'privacy-first')
+        redactFields?: string[];   // Fields to hide (when mode: 'visibility-first')
+    };
+    legacyRedactFields?: string[]; // For backward compatibility
 }
 
 export class RedactionManager {
     private redactedText: string = '[REDACTED]';
     private unredactedFields: Set<string> = new Set(); // Fields that user wants to unredact
+    private redactedFields: Set<string> = new Set(); // Fields that user wants to redact
+    private redactionMode: 'privacy-first' | 'visibility-first' = 'privacy-first';
     private excludeSelectors: string[] = [
         '[data-no-redact="true"]',
         '.human-behavior-no-redact'
@@ -28,11 +36,64 @@ export class RedactionManager {
         if (options?.excludeSelectors) {
             this.excludeSelectors = [...this.excludeSelectors, ...options.excludeSelectors];
         }
+        
+        // Handle new redaction strategy
+        if (options?.redactionStrategy) {
+            this.redactionMode = options.redactionStrategy.mode;
+            
+            if (this.redactionMode === 'privacy-first') {
+                // Privacy-first: everything redacted by default, unredact specific fields
+                if (options.redactionStrategy.unredactFields) {
+                    this.setFieldsToUnredact(options.redactionStrategy.unredactFields);
+                }
+            } else {
+                // Visibility-first: everything visible by default, redact specific fields
+                if (options.redactionStrategy.redactFields) {
+                    this.setFieldsToRedact(options.redactionStrategy.redactFields);
+                }
+            }
+        }
+        
+        // Handle legacy redactFields (backward compatibility)
+        if (options?.legacyRedactFields) {
+            this.setFieldsToUnredact(options.legacyRedactFields);
+        }
+        
+        // Handle legacy userFields
         if (options?.userFields) {
             this.setFieldsToUnredact(options.userFields);
         }
     }
 
+    /**
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
+     */
+    public setFieldsToRedact(fields: string[]): void {
+        this.redactedFields.clear();
+        
+        // Always include password fields in redacted list
+        const passwordFields = [
+            'input[type="password"]',
+            'input[type="password" i]',
+            '[type="password"]',
+            '[type="password" i]'
+        ];
+        
+        // Add password fields and user-specified fields
+        [...passwordFields, ...fields].forEach(field => {
+            this.redactedFields.add(field);
+        });
+        
+        if (this.redactedFields.size > 0) {
+            logDebug(`Redaction: Active for ${this.redactedFields.size} field(s):`, Array.from(this.redactedFields));
+        } else {
+            logDebug('Redaction: No fields to redact');
+        }
+        
+        this.applyRedactionClasses();
+    }
+
     /**
      * Set specific fields to be unredacted (everything else stays redacted by rrweb)
      * @param fields Array of CSS selectors for fields to unredact
@@ -96,6 +157,13 @@ export class RedactionManager {
         return this.unredactedFields.size > 0;
     }
 
+    /**
+     * Get the current redaction mode
+     */
+    public getRedactionMode(): 'privacy-first' | 'visibility-first' {
+        return this.redactionMode;
+    }
+
     /**
      * Get the currently unredacted fields
      */
@@ -108,31 +176,42 @@ export class RedactionManager {
      * Returns null if no fields are unredacted (everything stays redacted)
      */
     public getMaskTextSelector(): string | null {
-        if (this.unredactedFields.size === 0) {
-            return null; // Everything stays redacted
+        if (this.redactionMode === 'privacy-first') {
+            // Privacy-first: mask everything except unredacted fields
+            if (this.unredactedFields.size === 0) {
+                return null; // Everything stays redacted
+            }
+            return Array.from(this.unredactedFields).join(',');
+        } else {
+            // Visibility-first: mask only redacted fields
+            if (this.redactedFields.size === 0) {
+                return null; // Nothing to redact
+            }
+            return Array.from(this.redactedFields).join(',');
         }
-        return Array.from(this.unredactedFields).join(',');
     }
 
     /**
-     * Check if an element should be unredacted
+     * Apply redaction classes to DOM elements (for visibility-first mode)
+     * Adds 'rr-mask' class to elements that should be redacted
      */
-    public shouldUnredactElement(element: HTMLElement): boolean {
-        if (this.unredactedFields.size === 0) {
-            return false; // Nothing unredacted
+    public applyRedactionClasses(): void {
+        if (this.redactedFields.size === 0) {
+            return;
         }
 
-        // Check if any selector matches this element
-        for (const selector of this.unredactedFields) {
+        // Add 'rr-mask' class to redacted elements
+        this.redactedFields.forEach(selector => {
             try {
-                if (element.matches(selector)) {
-                    return true;
-                }
+                const elements = document.querySelectorAll(selector);
+                elements.forEach(element => {
+                    element.classList.add('rr-mask');
+                });
+                logDebug(`Added rr-mask class to ${elements.length} element(s) for selector: ${selector}`);
             } catch (e) {
                 logWarn(`Invalid selector: ${selector}`);
             }
-        }
-        return false;
+        });
     }
 
     /**
@@ -198,6 +277,47 @@ export class RedactionManager {
     public isElementUnredacted(element: HTMLElement): boolean {
         return this.shouldUnredactElement(element);
     }
+
+    /**
+     * Check if an element should be unredacted
+     */
+    public shouldUnredactElement(element: HTMLElement): boolean {
+        if (this.redactionMode === 'privacy-first') {
+            // Privacy-first: check if element is in unredacted fields
+            if (this.unredactedFields.size === 0) {
+                return false; // Nothing unredacted
+            }
+
+            // Check if any selector matches this element
+            for (const selector of this.unredactedFields) {
+                try {
+                    if (element.matches(selector)) {
+                        return true;
+                    }
+                } catch (e) {
+                    logWarn(`Invalid selector: ${selector}`);
+                }
+            }
+            return false;
+        } else {
+            // Visibility-first: check if element is NOT in redacted fields
+            if (this.redactedFields.size === 0) {
+                return true; // Nothing redacted, everything visible
+            }
+
+            // Check if any selector matches this element
+            for (const selector of this.redactedFields) {
+                try {
+                    if (element.matches(selector)) {
+                        return false; // Element is redacted
+                    }
+                } catch (e) {
+                    logWarn(`Invalid selector: ${selector}`);
+                }
+            }
+            return true; // Element is not redacted
+        }
+    }
 }
 
 // Export a default instance