humanbehavior-js 0.4.22 → 0.4.24

package/src/redact.ts

@@ -1,6 +1,6 @@
-// Redaction functionality for sensitive input fields
-// This module provides methods to configure rrweb's built-in masking
-// Uses CSS selectors and classes for reliable redaction without event corruption
+// Simplified redaction functionality for HumanBehavior SDK
+// Since rrweb auto-redacts all input fields by default, this module only handles
+// selectively unredacting specific fields (except passwords which remain protected)
 
 import { logDebug, logWarn } from './utils/logger';
 
@@ -10,12 +10,20 @@ const isBrowser = typeof window !== 'undefined';
 export interface RedactionOptions {
     redactedText?: string;
     excludeSelectors?: string[];
-    userFields?: string[]; // Fields that the user wants to redact
+    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 userSelectedFields: Set<string> = new Set(); // User-selected fields to redact
+    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,468 +36,201 @@ export class RedactionManager {
         if (options?.excludeSelectors) {
             this.excludeSelectors = [...this.excludeSelectors, ...options.excludeSelectors];
         }
-        if (options?.userFields) {
-            this.setFieldsToRedact(options.userFields);
-        }
-    }
-
-    /**
-     * Set specific fields to be redacted using CSS selectors
-     * These selectors are used to configure rrweb's built-in masking
-     * @param fields Array of CSS selectors for fields to redact
-     */
-    public setFieldsToRedact(fields: string[]): void {
-        this.userSelectedFields.clear();
-        fields.forEach(field => this.userSelectedFields.add(field));
         
-        if (fields.length > 0) {
-            logDebug(`Redaction: Active for ${fields.length} field(s):`, fields);
+        // Handle new redaction strategy
+        if (options?.redactionStrategy) {
+            this.redactionMode = options.redactionStrategy.mode;
             
-            // Debug: Check if elements exist
-            fields.forEach(selector => {
-                const elements = document.querySelectorAll(selector);
-                logDebug(`Redaction: Found ${elements.length} element(s) for selector '${selector}'`);
-                elements.forEach((el, index) => {
-                    logDebug(`Redaction: Element ${index} for '${selector}':`, el);
-                });
-            });
-        } else {
-            logDebug('Redaction: Disabled - no fields selected');
-        }
-    }
-
-    /**
-     * Check if redaction is currently active (has fields selected)
-     */
-    public isActive(): boolean {
-        return this.userSelectedFields.size > 0;
-    }
-
-    /**
-     * Get the currently selected fields for redaction
-     */
-    public getSelectedFields(): string[] {
-        return Array.from(this.userSelectedFields);
-    }
-
-    /**
-     * Process an event and redact sensitive data if needed
-     * NOTE: This method is no longer used - events are handled directly by rrweb
-     * Kept for backward compatibility but not called in the current implementation
-     */
-    public processEvent(event: any): any {
-        // Only process if we have fields selected for redaction
-        if (this.userSelectedFields.size === 0) {
-            return event;
-        }
-
-        // Clone the event to avoid modifying the original
-        const processedEvent = JSON.parse(JSON.stringify(event));
-
-        // Handle different event types
-        if (processedEvent.type === 3) { // IncrementalSnapshot
-            if (processedEvent.data.source === 5) { // Input event
-                const shouldRedact = this.isFieldSelected(processedEvent.data);
-                if (shouldRedact) {
-                    logDebug('Redaction: Processing input event for redaction');
-                    this.redactInputEvent(processedEvent.data);
+            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);
                 }
-            }
-            // Also check for other sources that might contain text changes
-            else if (processedEvent.data.source === 0) { // DOM mutations
-                this.redactDOMEvent(processedEvent.data);
-            }
-            // Handle other sources that might contain text
-            else if (processedEvent.data.source === 2) { // Mouse/Touch interaction
-                this.redactMouseEvent(processedEvent.data);
             }
         }
-        else if (processedEvent.type === 2) { // FullSnapshot
-            this.redactFullSnapshot(processedEvent.data);
+        
+        // Handle legacy redactFields (backward compatibility)
+        if (options?.legacyRedactFields) {
+            this.setFieldsToUnredact(options.legacyRedactFields);
+        }
+        
+        // Handle legacy userFields
+        if (options?.userFields) {
+            this.setFieldsToUnredact(options.userFields);
         }
-
-        return processedEvent;
     }
 
     /**
-     * Redact sensitive data in input events
+     * Set specific fields to be redacted (for visibility-first mode)
+     * @param fields Array of CSS selectors for fields to redact
      */
-    private redactInputEvent(inputData: any): void {
-        // Check if this input event is from a field we want to redact
-        if (!this.isFieldSelected(inputData)) {
-            return;
-        }
+    public setFieldsToRedact(fields: string[]): void {
+        this.redactedFields.clear();
         
-        logDebug('Redaction: Redacting input event with text:', inputData.text);
+        // Always include password fields in redacted list
+        const passwordFields = [
+            'input[type="password"]',
+            'input[type="password" i]',
+            '[type="password"]',
+            '[type="password" i]'
+        ];
         
-        // Redact all text-related properties that could contain input data
-        const textProperties = ['text', 'value', 'content', 'data', 'input', 'textContent'];
-        textProperties.forEach(prop => {
-            if (inputData[prop] !== undefined && typeof inputData[prop] === 'string') {
-                inputData[prop] = this.redactedText;
-                logDebug(`Redaction: Redacted property '${prop}'`);
-            }
+        // Add password fields and user-specified fields
+        [...passwordFields, ...fields].forEach(field => {
+            this.redactedFields.add(field);
         });
         
-        // Also check for any other string properties that might contain input data
-        Object.keys(inputData).forEach(key => {
-            if (typeof inputData[key] === 'string' && inputData[key].length > 0) {
-                inputData[key] = this.redactedText;
-                logDebug(`Redaction: Redacted additional property '${key}'`);
-            }
-        });
-
-        // Handle nested objects that might contain text data
-        if (inputData.attributes && typeof inputData.attributes === 'object') {
-            if (inputData.attributes.value && typeof inputData.attributes.value === 'string') {
-                inputData.attributes.value = this.redactedText;
-                logDebug('Redaction: Redacted nested value attribute');
-            }
-        }
-        
-        logDebug('Redaction: Input event redaction complete');
-    }
-
-    /**
-     * Redact sensitive data in DOM mutation events
-     */
-    private redactDOMEvent(domData: any): void {
-        // Check for text changes in DOM mutations
-        if (domData.texts && Array.isArray(domData.texts)) {
-            domData.texts.forEach((textChange: any) => {
-                if (textChange.text && typeof textChange.text === 'string' && 
-                    this.shouldRedactDOMChange(textChange)) {
-                    textChange.text = this.redactedText;
-                }
-            });
+        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');
         }
         
-        // Also check for attribute changes that might contain input data
-        if (domData.attributes && Array.isArray(domData.attributes)) {
-            domData.attributes.forEach((attrChange: any) => {
-                if (attrChange.attributes && attrChange.attributes.value && 
-                    typeof attrChange.attributes.value === 'string' &&
-                    this.shouldRedactDOMChange(attrChange)) {
-                    attrChange.attributes.value = this.redactedText;
-                }
-            });
-        }
-
-        // Check for any other properties that might contain text data
-        if (domData.adds && Array.isArray(domData.adds)) {
-            domData.adds.forEach((add: any) => {
-                if (add.node && add.node.textContent && typeof add.node.textContent === 'string' &&
-                    this.shouldRedactDOMChange(add)) {
-                    add.node.textContent = this.redactedText;
-                }
-            });
-        }
+        this.applyRedactionClasses();
     }
 
     /**
-     * Check if a DOM change should be redacted based on its ID
+     * Set specific fields to be unredacted (everything else stays redacted by rrweb)
+     * @param fields Array of CSS selectors for fields to unredact
      */
-    private shouldRedactDOMChange(changeData: any): boolean {
-        if (!isBrowser) return false;
+    public setFieldsToUnredact(fields: string[]): void {
+        this.unredactedFields.clear();
         
-        try {
-            // Check if this change has an ID that we can use to find the element
-            const elementId = changeData.id;
-            if (elementId !== undefined) {
-                // Try to find the element by data-rrweb-id attribute
-                let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
-                
-                if (element) {
-                    return this.shouldRedactElement(element);
-                }
-            }
-            
-            // Also check for nodeId which is another way rrweb identifies elements
-            const nodeId = changeData.nodeId;
-            if (nodeId !== undefined) {
-                const element = document.querySelector(`[data-rrweb-id="${nodeId}"]`) as HTMLElement;
-                if (element) {
-                    return this.shouldRedactElement(element);
-                }
+        // Filter out password fields (they cannot be unredacted)
+        const validFields = fields.filter(field => {
+            const isPasswordField = this.isPasswordSelector(field);
+            if (isPasswordField) {
+                logWarn(`Cannot unredact password field: ${field} - Password fields are always protected`);
+                return false;
             }
-            
-            return false;
-        } catch (e) {
-            logWarn('Error checking if DOM change should be redacted:', e);
-            return false;
-        }
-    }
-
-    /**
-     * Redact sensitive data in mouse/touch interaction events
-     */
-    private redactMouseEvent(mouseData: any): void {
-        // Mouse events typically don't contain text data, but check for any text properties
-        if (mouseData.text && typeof mouseData.text === 'string' && 
-            this.isFieldSelected(mouseData)) {
-            mouseData.text = this.redactedText;
-        }
-    }
-
-    /**
-     * Redact sensitive data in full snapshot events
-     */
-    private redactFullSnapshot(snapshotData: any): void {
-        if (snapshotData.node && snapshotData.node.type === 2) { // Element node
-            this.redactNode(snapshotData.node);
+            return true;
+        });
+        
+        validFields.forEach(field => this.unredactedFields.add(field));
+        
+        if (validFields.length > 0) {
+            logDebug(`Unredaction: Active for ${validFields.length} field(s):`, validFields);
+        } else {
+            logDebug('Unredaction: No valid fields to unredact');
         }
+        
+        this.applyUnredactionClasses();
     }
 
     /**
-     * Recursively redact sensitive data in DOM nodes
+     * Remove specific fields from unredaction (they become redacted again)
+     * @param fields Array of CSS selectors for fields to redact
      */
-    private redactNode(node: any): void {
-        if (!node) return;
-
-        // Check if this node should be redacted
-        if (node.type === 2 && node.tagName && 
-            (node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea')) {
-            
-            // Check if this input/textarea should be redacted
-            if (this.shouldRedactNode(node)) {
-                // Redact value attribute
-                if (node.attributes && node.attributes.value) {
-                    node.attributes.value = this.redactedText;
-                }
-                // Redact text content
-                if (node.textContent) {
-                    node.textContent = this.redactedText;
-                }
-            }
-        }
-
-        // Recursively process child nodes
-        if (node.childNodes && Array.isArray(node.childNodes)) {
-            node.childNodes.forEach((childNode: any) => {
-                this.redactNode(childNode);
-            });
+    public redactFields(fields: string[]): void {
+        fields.forEach(field => {
+            this.unredactedFields.delete(field);
+        });
+        
+        if (this.unredactedFields.size > 0) {
+            logDebug(`Unredaction: Removed ${fields.length} field(s), ${this.unredactedFields.size} remaining:`, Array.from(this.unredactedFields));
+        } else {
+            logDebug('Unredaction: All fields redacted');
         }
+        
+        this.applyUnredactionClasses();
     }
 
     /**
-     * Check if a node should be redacted based on its attributes
+     * Clear all unredacted fields (everything becomes redacted again)
      */
-    private shouldRedactNode(node: any): boolean {
-        if (!node.attributes) return false;
-
-        // Check if any of our selectors would match this node
-        for (const selector of this.userSelectedFields) {
-            if (this.selectorMatchesNode(selector, node)) {
-                return true;
-            }
-        }
-
-        return false;
+    public clearUnredactedFields(): void {
+        this.unredactedFields.clear();
+        logDebug('Unredaction: All fields cleared, everything redacted');
+        
+        this.removeUnredactionClasses();
     }
 
     /**
-     * Check if a CSS selector would match a node based on its attributes
+     * Check if any fields are currently unredacted
      */
-    private selectorMatchesNode(selector: string, node: any): boolean {
-        if (!node.attributes) return false;
-
-        // Create a temporary element to test the selector
-        try {
-            const tempElement = document.createElement(node.tagName || 'div');
-            
-            // Copy attributes from the node to the temp element
-            if (node.attributes) {
-                Object.keys(node.attributes).forEach(key => {
-                    tempElement.setAttribute(key, node.attributes[key]);
-                });
-            }
-            
-            // Test if the selector matches this element
-            return tempElement.matches(selector);
-        } catch (e) {
-            // If matches() is not supported or fails, fall back to basic attribute checking
-            return this.basicSelectorMatch(selector, node);
-        }
+    public hasUnredactedFields(): boolean {
+        return this.unredactedFields.size > 0;
     }
 
     /**
-     * Basic selector matching for environments where matches() is not available
+     * Get the current redaction mode
      */
-    private basicSelectorMatch(selector: string, node: any): boolean {
-        if (!node.attributes) return false;
-
-        // Handle simple selectors like 'input[type="password"]'
-        if (selector.includes('input[type=')) {
-            const typeMatch = selector.match(/input\[type="([^"]+)"\]/);
-            if (typeMatch && node.tagName === 'input' && node.attributes.type === typeMatch[1]) {
-                return true;
-            }
-        }
-
-        // Handle ID selectors like '#email'
-        if (selector.startsWith('#')) {
-            const id = selector.substring(1);
-            return node.attributes.id === id;
-        }
-
-        // Handle class selectors like '.sensitive-field'
-        if (selector.startsWith('.')) {
-            const className = selector.substring(1);
-            return node.attributes.class && node.attributes.class.includes(className);
-        }
-
-        // Handle tag selectors like 'input'
-        if (!selector.includes('[') && !selector.includes('.')) {
-            return node.tagName && node.tagName.toLowerCase() === selector.toLowerCase();
-        }
-
-        return false;
+    public getRedactionMode(): 'privacy-first' | 'visibility-first' {
+        return this.redactionMode;
     }
 
     /**
-     * Check if an event is from a field that should be redacted
+     * Get the currently unredacted fields
      */
-    private isFieldSelected(eventData: any): boolean {
-        if (!isBrowser) return false;
-        
-        try {
-            // For input events (source 5), we need to determine if this is a sensitive field
-            if (eventData.source === 5) { // Input event
-                const elementId = eventData.id;
-                if (elementId !== undefined) {
-                    // Try to find the element by data-rrweb-id attribute
-                    let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
-                    
-                    if (element) {
-                        return this.shouldRedactElement(element);
-                    }
-                    
-                    // Fallback: Try to find by nodeId if available
-                    if (eventData.nodeId !== undefined) {
-                        element = document.querySelector(`[data-rrweb-id="${eventData.nodeId}"]`) as HTMLElement;
-                        if (element) {
-                            return this.shouldRedactElement(element);
-                        }
-                    }
-                    
-                    // More aggressive approach: Check all elements that match our selectors
-                    // and see if any of them are currently focused or have the same ID
-                    for (const selector of this.userSelectedFields) {
-                        const matchingElements = document.querySelectorAll(selector);
-                        if (matchingElements.length > 0) {
-                            // Check if any of these elements are currently focused
-                            for (const el of matchingElements) {
-                                                            if (el === document.activeElement) {
-                                logDebug('Redaction: Found focused element matching selector:', selector);
-                                return true;
-                            }
-                            }
-                        }
-                    }
-                    
-                    // If we still can't find it, try a more direct approach
-                    // Look for any input element that might be the active one
-                    const activeElement = document.activeElement;
-                    if (activeElement && this.shouldRedactElement(activeElement as HTMLElement)) {
-                        logDebug('Redaction: Active element should be redacted');
-                        return true;
-                    }
-                    
-                    return false;
-                }
-            }
-            
-            // For other event types, try to find the element
-            const elementId = eventData.id;
-            if (elementId !== undefined) {
-                // First try to find by data-rrweb-id attribute
-                let element = document.querySelector(`[data-rrweb-id="${elementId}"]`) as HTMLElement;
-                
-                if (element) {
-                    return this.shouldRedactElement(element);
-                }
-            }
-            
-            // Also check for nodeId which is another way rrweb identifies elements
-            const nodeId = eventData.nodeId;
-            if (nodeId !== undefined) {
-                const element = document.querySelector(`[data-rrweb-id="${nodeId}"]`) as HTMLElement;
-                if (element) {
-                    return this.shouldRedactElement(element);
-                }
-            }
-            
-            // For DOM mutations, check if the target element should be redacted
-            if (eventData.target && eventData.target.id) {
-                const element = document.querySelector(`[data-rrweb-id="${eventData.target.id}"]`) as HTMLElement;
-                if (element) {
-                    return this.shouldRedactElement(element);
-                }
-            }
-            
-            return false;
-        } catch (e) {
-            logWarn('Error checking if field should be redacted:', e);
-            return false;
-        }
+    public getUnredactedFields(): string[] {
+        return Array.from(this.unredactedFields);
     }
 
     /**
      * Get CSS selectors for rrweb masking configuration
-     * Used to configure rrweb's maskTextSelector option
+     * Returns null if no fields are unredacted (everything stays redacted)
      */
     public getMaskTextSelector(): string | null {
-        if (this.userSelectedFields.size === 0) {
-            return null;
+        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.userSelectedFields).join(',');
     }
 
     /**
-     * Check if an element should be redacted (for rrweb maskTextFn/maskInputFn)
+     * Apply redaction classes to DOM elements (for visibility-first mode)
+     * Adds 'rr-mask' class to elements that should be redacted
      */
-    public shouldRedactElement(element: HTMLElement): boolean {
-        if (this.userSelectedFields.size === 0) {
-            return false;
+    public applyRedactionClasses(): void {
+        if (this.redactedFields.size === 0) {
+            return;
         }
 
-        // Check if any selector matches this element
-        for (const selector of this.userSelectedFields) {
+        // 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) {
-                // Invalid selector, skip
                 logWarn(`Invalid selector: ${selector}`);
             }
-        }
-        return false;
+        });
     }
 
     /**
-     * Apply rrweb masking classes to DOM elements
-     * Adds 'rr-mask' class to elements that should be redacted
-     * This enables rrweb's built-in masking functionality
+     * Apply unredaction classes to DOM elements
+     * Removes 'rr-mask' class from elements that should be unredacted
      */
-    public applyRedactionClasses(): void {
-        if (this.userSelectedFields.size === 0) {
+    public applyUnredactionClasses(): void {
+        if (this.unredactedFields.size === 0) {
             return;
         }
 
-        // Remove existing redaction classes
-        document.querySelectorAll('.rr-mask').forEach(element => {
-            element.classList.remove('rr-mask');
-        });
-
-        // Add redaction classes to matching elements
-        this.userSelectedFields.forEach(selector => {
+        // Remove 'rr-mask' class from unredacted elements
+        this.unredactedFields.forEach(selector => {
             try {
                 const elements = document.querySelectorAll(selector);
                 elements.forEach(element => {
-                    element.classList.add('rr-mask');
+                    element.classList.remove('rr-mask');
                 });
-                logDebug(`Applied rr-mask class to ${elements.length} element(s) for selector: ${selector}`);
+                logDebug(`Removed rr-mask class from ${elements.length} element(s) for selector: ${selector}`);
             } catch (e) {
                 logWarn(`Invalid selector: ${selector}`);
             }
@@ -497,7 +238,31 @@ export class RedactionManager {
     }
 
     /**
-     * Get the original value of a redacted element (for debugging)
+     * Remove all unredaction classes from DOM elements
+     */
+    public removeUnredactionClasses(): void {
+        // Note: This doesn't add 'rr-mask' classes back - rrweb handles that automatically
+        logDebug('Unredaction classes removed');
+    }
+
+    /**
+     * Check if a selector represents a password field
+     */
+    private isPasswordSelector(selector: string): boolean {
+        const passwordPatterns = [
+            'input[type="password"]',
+            'input[type="password" i]',
+            '[type="password"]',
+            '[type="password" i]'
+        ];
+        
+        return passwordPatterns.some(pattern => 
+            selector.toLowerCase().includes(pattern.toLowerCase().replace(/[\[\]]/g, ''))
+        );
+    }
+
+    /**
+     * Get the original value of an element (for debugging)
      */
     public getOriginalValue(element: HTMLElement): string | undefined {
         if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
@@ -507,10 +272,51 @@ export class RedactionManager {
     }
 
     /**
-     * Check if an element is currently being redacted
+     * Check if an element is currently unredacted
      */
-    public isElementRedacted(element: HTMLElement): boolean {
-        return this.shouldRedactElement(element);
+    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
+        }
     }
 }