mixpanel-browser 2.73.0 → 2.75.0

package/src/recorder/masking.js

@@ -0,0 +1,197 @@
+/**
+ * @typedef {Object} MaskingConfig
+ * @property {string} maskingSelector - Combined CSS selector string to mask
+ * @property {string} unmaskingSelector - Combined CSS selector string to unmask
+ * @property {boolean} maskAll - Whether to mask all by default
+ * @property {RegExp} [_legacyClassRegex] - Legacy class regex for backwards compatibility
+ */
+
+/**
+ * @typedef {Object} PrivacyConfig
+ * @property {MaskingConfig} input - Input masking configuration
+ * @property {MaskingConfig} text - Text masking configuration
+ */
+
+import { classMatchesRegex } from './rrweb-entrypoint';
+import { elementLooksSensitive } from '../autocapture/utils';
+
+var COMMON_MASK_CLASSES_SELECTOR = '.mp-mask, .fs-mask, .amp-mask, .rr-mask, .ph-mask';
+var RRWEB_PASSWORD_ATTRIBUTE = 'data-rr-is-password';
+var ALWAYS_MASKED_INPUT_TYPES = ['password', 'email', 'tel', 'hidden'];
+
+/**
+ * Normalizes a selector value to an array of selectors
+ * @param {string|string[]|undefined} selector
+ * @returns {string[]}
+ */
+function normalizeSelectors(selector) {
+    if (!selector) {
+        return [];
+    }
+    if (Array.isArray(selector)) {
+        return selector;
+    }
+    return [selector];
+}
+
+/**
+ * Reads flat config options and normalizes them into internal privacy config structure
+ * @param {Object} mixpanelInstance
+ * @returns {PrivacyConfig} privacyConfig
+ */
+function getPrivacyConfig(mixpanelInstance) {
+    var privacyConfig = {
+        input: {
+            maskingSelector: '',
+            unmaskingSelector: '',
+            maskAll: true
+        },
+        text: {
+            maskingSelector: '',
+            unmaskingSelector: '',
+            maskAll: true
+        }
+    };
+
+    // Input related config
+    var maskInputSelector = mixpanelInstance.get_config('record_mask_input_selector');
+    var unmaskInputSelector = mixpanelInstance.get_config('record_unmask_input_selector');
+    var maskAllInputs = mixpanelInstance.get_config('record_mask_all_inputs');
+
+    privacyConfig.input.maskingSelector = normalizeSelectors(maskInputSelector).join(',');
+    privacyConfig.input.unmaskingSelector = normalizeSelectors(unmaskInputSelector).join(',');
+    if (maskAllInputs !== undefined) {
+        privacyConfig.input.maskAll = maskAllInputs;
+    }
+
+    // Text related config
+    var maskTextSelector = mixpanelInstance.get_config('record_mask_text_selector');
+    var unmaskTextSelector = mixpanelInstance.get_config('record_unmask_text_selector');
+    var maskAllText = mixpanelInstance.get_config('record_mask_all_text');
+    var legacyMaskTextClass = mixpanelInstance.get_config('record_mask_text_class');
+
+    var textMaskingSelectors = normalizeSelectors(maskTextSelector);
+
+    // Handle legacy record_mask_text_class
+    if (legacyMaskTextClass) {
+        if (legacyMaskTextClass instanceof RegExp) {
+            // For RegExp classes, we'll need to handle this differently in the shouldMaskText function
+            privacyConfig.text._legacyClassRegex = legacyMaskTextClass;
+        } else {
+            // String class name - convert to selector
+            var classSelector = '.' + legacyMaskTextClass;
+            if (textMaskingSelectors.indexOf(classSelector) === -1) {
+                textMaskingSelectors.push(classSelector);
+            }
+        }
+    }
+
+    privacyConfig.text.maskingSelector = textMaskingSelectors.join(',');
+    privacyConfig.text.unmaskingSelector = normalizeSelectors(unmaskTextSelector).join(',');
+
+    // Migrate old config: if only record_mask_text_selector is specified, set maskAll to false
+    // preserves behavior where the masking selector defaulted to "*"
+    if (maskAllText === undefined && maskTextSelector !== undefined) {
+        privacyConfig.text.maskAll = false;
+    } else if (maskAllText !== undefined) {
+        privacyConfig.text.maskAll = maskAllText;
+    }
+
+    return privacyConfig;
+}
+
+/**
+ * Checks if element matches a combined CSS selector
+ * @param {HTMLElement} element
+ * @param {string} selector - Combined CSS selector (comma-separated)
+ * @returns {boolean}
+ */
+function elementMatchesSelector(element, selector) {
+    if (!selector) {
+        return false;
+    }
+    return !!element.closest(selector);
+}
+
+/**
+ * Determines if an input should be masked based on privacy config
+ * @param {HTMLElement} element
+ * @param {PrivacyConfig} privacyConfig
+ * @returns {boolean}
+ */
+function shouldMaskInput(element, privacyConfig) {
+    var inputType = (element.getAttribute('type') || '').toLowerCase();
+    if (ALWAYS_MASKED_INPUT_TYPES.indexOf(inputType) !== -1) {
+        return true;
+    }
+
+    var autocomplete = (element.getAttribute('autocomplete') || '').toLowerCase();
+    if (autocomplete && autocomplete !== '' && autocomplete !== 'off') {
+        return true;
+    }
+
+    if (element.hasAttribute(RRWEB_PASSWORD_ATTRIBUTE)) {
+        return true;
+    }
+
+    if (elementLooksSensitive(element)) {
+        return true;
+    }
+
+    if (privacyConfig.input.maskAll) {
+        if (elementMatchesSelector(element, privacyConfig.input.unmaskingSelector)) {
+            return false;
+        }
+
+        return true;
+    } else {
+        if (elementMatchesSelector(element, privacyConfig.input.maskingSelector)) {
+            return true;
+        }
+        if (elementMatchesSelector(element, COMMON_MASK_CLASSES_SELECTOR)) {
+            return true;
+        }
+        return false;
+    }
+}
+
+/**
+ * Determines if text should be masked based on privacy config
+ * @param {HTMLElement|null} element
+ * @param {PrivacyConfig} privacyConfig
+ * @returns {boolean}
+ */
+function shouldMaskText(element, privacyConfig) {
+    if (!element) {
+        return false;
+    }
+
+    // Check legacy class regex if present (for backwards compatibility)
+    if (privacyConfig.text._legacyClassRegex) {
+        if (classMatchesRegex(element, privacyConfig.text._legacyClassRegex, true)) {
+            return true;
+        }
+    }
+
+    if (privacyConfig.text.maskAll) {
+        if (elementMatchesSelector(element, privacyConfig.text.unmaskingSelector)) {
+            return false;
+        }
+        return true;
+    } else {
+        if (elementMatchesSelector(element, privacyConfig.text.maskingSelector)) {
+            return true;
+        }
+        if (elementMatchesSelector(element, COMMON_MASK_CLASSES_SELECTOR)) {
+            return true;
+        }
+        return false;
+    }
+}
+
+export {
+    COMMON_MASK_CLASSES_SELECTOR,
+    getPrivacyConfig,
+    shouldMaskInput,
+    shouldMaskText
+};

package/src/recorder/rrweb-entrypoint.js

@@ -1,6 +1,7 @@
 // this file exists as an entry point to be able to transpile rrweb packages to es5
 // compatible code without needing to transpile the entire mixpanel-js codebase
 import {record, EventType, IncrementalSource} from '@mixpanel/rrweb';
+import {classMatchesRegex} from '@mixpanel/rrweb-snapshot';
 import {getRecordConsolePlugin} from '@mixpanel/rrweb-plugin-console-record';
 
-export { record, EventType, IncrementalSource, getRecordConsolePlugin };
+export { record, EventType, IncrementalSource, getRecordConsolePlugin, classMatchesRegex };

package/src/recorder/session-recording.js

@@ -1,11 +1,17 @@
+/**
+ * @typedef {import('../index').RecordPrivacyConfig} RecordPrivacyConfig
+ */
+
 import { window } from '../window';
-import { IncrementalSource, EventType, getRecordConsolePlugin } from './rrweb-entrypoint';
+import { EventType, getRecordConsolePlugin, IncrementalSource } from './rrweb-entrypoint';
 import { MAX_RECORDING_MS, MAX_VALUE_FOR_MIN_RECORDING_MS, console_with_prefix, NOOP_FUNC, _, localStorageSupported, canUseCompressionStream, navigator, userAgent, windowOpera} from '../utils'; // eslint-disable-line camelcase
 import { IDBStorageWrapper, RECORDING_EVENTS_STORE_NAME } from '../storage/indexed-db';
 import { addOptOutCheckMixpanelLib } from '../gdpr-utils';
 import { RequestBatcher } from '../request-batcher';
+
 import Config from '../config';
 import { RECORD_ENQUEUE_THROTTLE_MS } from './utils';
+import { shouldMaskInput, shouldMaskText, getPrivacyConfig } from './masking';
 
 var logger = console_with_prefix('recorder');
 var CompressionStream = window['CompressionStream'];
@@ -52,7 +58,7 @@ function isUserEvent(ev) {
  * @property {String} [options.replayId] - unique uuid for a single replay
  * @property {Function} [options.onIdleTimeout] - callback when a recording reaches idle timeout
  * @property {Function} [options.onMaxLengthReached] - callback when a recording reaches its maximum length
- * @property {Function} [options.rrwebRecord] - rrweb's `record` function
+ * @property {import('./rrweb-entrypoint').record} [options.rrwebRecord] - rrweb's `record` function
  * @property {Function} [options.onBatchSent] - callback when a batch of events is sent to the server
  * @property {Storage} [options.sharedLockStorage] - optional storage for shared lock, used for test dependency injection
  * optional properties for deserialization:
@@ -233,6 +239,8 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         blockSelector = undefined;
     }
 
+    var privacyConfig = getPrivacyConfig(this._mixpanel);
+
     try {
         this._stopRecording = this._rrwebRecord({
             'emit': function (ev) {
@@ -262,9 +270,11 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
                 'type': 'image/webp',
                 'quality': 0.6
             },
+            // mask all inputs and text by default, unmasking is applied via callbacks maskInputFn and maskTextFn
             'maskAllInputs': true,
-            'maskTextClass': this.getConfig('record_mask_text_class'),
-            'maskTextSelector': this.getConfig('record_mask_text_selector'),
+            'maskTextSelector': '*',
+            'maskInputFn': this._getMaskFn(shouldMaskInput, privacyConfig),
+            'maskTextFn': this._getMaskFn(shouldMaskText, privacyConfig),
             'recordCanvas': this.getConfig('record_canvas'),
             'sampling': {
                 'canvas': 15
@@ -536,4 +546,33 @@ SessionRecording.prototype._getRecordMinMs = function() {
     return configValue;
 };
 
+/**
+ * Creates a masking function for rrweb's maskInputFn or maskTextFn
+ * @param {(element: HTMLElement, privacyConfig: RecordPrivacyConfig) => boolean} shouldMaskFn - Function that determines if element should be masked
+ * @param {RecordPrivacyConfig} privacyConfig - Privacy configuration
+ * @returns {(text: string, element: HTMLElement) => string} Function that masks text based on privacy config
+ */
+SessionRecording.prototype._getMaskFn = function(shouldMaskFn, privacyConfig) {
+    return function(text, element) {
+        // prevent visual artifacts from random whitespace
+        if (!text.trim().length) {
+            return '';
+        }
+
+        var shouldMask = true;
+        try {
+            shouldMask = shouldMaskFn(element, privacyConfig);
+        } catch (err) {
+            this.reportError('Error checking if text should be masked, defaulting to masked', err);
+        }
+
+        if (shouldMask) {
+            var textLength = Math.min(text.length, 10000); // limit to 10000 chars to optimize performance
+            return '*'.repeat(textLength);
+        } else {
+            return text;
+        }
+    }.bind(this);
+};
+
 export { SessionRecording };

package/src/recorder/utils.js

@@ -7,6 +7,10 @@ var isRecordingExpired = function(serializedRecording) {
     return !serializedRecording || now > serializedRecording['maxExpires'] || now > serializedRecording['idleExpires'];
 };
 
+
 var RECORD_ENQUEUE_THROTTLE_MS = 250;
 
-export { isRecordingExpired, RECORD_ENQUEUE_THROTTLE_MS};
+export {
+    isRecordingExpired,
+    RECORD_ENQUEUE_THROTTLE_MS
+};

package/src/targeting/event-matcher.js

@@ -0,0 +1,97 @@
+import { _ } from '../utils';
+import jsonLogic from 'json-logic-js';
+
+/**
+ * Shared helper to recursively lowercase strings in nested structures
+ * @param {*} obj - Value to process
+ * @param {boolean} lowercaseKeys - Whether to lowercase object keys
+ * @returns {*} Processed value with lowercased strings
+ */
+var lowercaseJson = function(obj, lowercaseKeys) {
+    if (obj === null || obj === undefined) {
+        return obj;
+    } else if (typeof obj === 'string') {
+        return obj.toLowerCase();
+    } else if (Array.isArray(obj)) {
+        return obj.map(function(item) {
+            return lowercaseJson(item, lowercaseKeys);
+        });
+    } else if (obj === Object(obj)) {
+        var result = {};
+        for (var key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                var newKey = lowercaseKeys && typeof key === 'string' ? key.toLowerCase() : key;
+                result[newKey] = lowercaseJson(obj[key], lowercaseKeys);
+            }
+        }
+        return result;
+    } else {
+        return obj;
+    }
+};
+
+/**
+ * Lowercase all string keys and values in a nested structure
+ * @param {*} val - Value to process
+ * @returns {*} Processed value with lowercased strings
+ */
+var lowercaseKeysAndValues = function(val) {
+    return lowercaseJson(val, true);
+};
+
+/**
+ * Lowercase only leaf node string values in a nested structure (keys unchanged)
+ * @param {*} val - Value to process
+ * @returns {*} Processed value with lowercased leaf strings
+ */
+var lowercaseOnlyLeafNodes = function(val) {
+    return lowercaseJson(val, false);
+};
+
+/**
+ * Check if an event matches the given criteria
+ * @param {string} eventName - The name of the event being checked
+ * @param {Object} properties - Event properties to evaluate against property filters
+ * @param {Object} criteria - Criteria to match against, with:
+ *   - event_name: string - Required event name (case-sensitive match)
+ *   - property_filters: Object - Optional JsonLogic filters for properties
+ * @returns {Object} Result object with:
+ *   - matches: boolean - Whether the event matches the criteria
+ *   - error: string|undefined - Error message if evaluation failed
+ */
+var eventMatchesCriteria = function(eventName, properties, criteria) {
+    // Check exact event name match (case-sensitive)
+    if (eventName !== criteria.event_name) {
+        return { matches: false };
+    }
+
+    // Evaluate property filters using JsonLogic
+    var propertyFilters = criteria.property_filters;
+    var filtersMatch = true; // default to true if no filters
+
+    if (propertyFilters && !_.isEmptyObject(propertyFilters)) {
+        try {
+            // Lowercase all keys and values in event properties for case-insensitive matching
+            var lowercasedProperties = lowercaseKeysAndValues(properties || {});
+
+            // Lowercase only leaf nodes in JsonLogic filters (keep operators intact)
+            var lowercasedFilters = lowercaseOnlyLeafNodes(propertyFilters);
+
+            filtersMatch = jsonLogic.apply(lowercasedFilters, lowercasedProperties);
+        } catch (error) {
+            return {
+                matches: false,
+                error: error.toString()
+            };
+        }
+    }
+
+    return { matches: filtersMatch };
+};
+
+export {
+    lowercaseJson,
+    lowercaseKeysAndValues,
+    lowercaseOnlyLeafNodes,
+    eventMatchesCriteria
+};

package/src/targeting/index.js

@@ -0,0 +1,11 @@
+import { window } from '../window';
+import { TARGETING_GLOBAL_NAME } from '../globals';
+import { eventMatchesCriteria } from './event-matcher';
+
+// Create targeting library object
+var targetingLibrary = {};
+targetingLibrary['eventMatchesCriteria'] = eventMatchesCriteria;
+
+// Set global Promise (use bracket notation to prevent minification)
+// This is the ONE AND ONLY global - matches recorder pattern
+window[TARGETING_GLOBAL_NAME] = Promise.resolve(targetingLibrary);

package/src/targeting/loader.js

@@ -0,0 +1,36 @@
+import { window } from '../window';
+import { TARGETING_GLOBAL_NAME } from '../globals';
+
+/**
+ * Get the promise-based targeting loader
+ * @param {Function} loadExtraBundle - Function to load external bundle (callback-based)
+ * @param {string} targetingSrc - URL to targeting bundle
+ * @returns {Promise} Promise that resolves with targeting library
+ */
+var getTargetingPromise = function(loadExtraBundle, targetingSrc) {
+    // Return existing promise if already initialized or loading
+    if (window[TARGETING_GLOBAL_NAME] && typeof window[TARGETING_GLOBAL_NAME].then === 'function') {
+        return window[TARGETING_GLOBAL_NAME];
+    }
+
+    // Create loading promise and set it as the global immediately
+    // This makes minified build behavior consistent with dev/CJS builds
+    window[TARGETING_GLOBAL_NAME] = new Promise(function (resolve) {
+        loadExtraBundle(targetingSrc, resolve);
+    }).then(function () {
+        var p = window[TARGETING_GLOBAL_NAME];
+        if (p && typeof p.then === 'function') {
+            return p;
+        }
+        throw new Error('targeting failed to load');
+    }).catch(function (err) {
+        delete window[TARGETING_GLOBAL_NAME];
+        throw err;
+    });
+
+    return window[TARGETING_GLOBAL_NAME];
+};
+
+export {
+    getTargetingPromise
+};

package/src/utils.js

@@ -204,15 +204,8 @@ _.isArray = nativeIsArray || function(obj) {
     return toString.call(obj) === '[object Array]';
 };
 
-// from a comment on http://dbj.org/dbj/?p=286
-// fails on only one very rare and deliberate custom object:
-// var bomb = { toString : undefined, valueOf: function(o) { return "function BOMBA!"; }};
 _.isFunction = function(f) {
-    try {
-        return /^\s*\bfunction\b/.test(f);
-    } catch (x) {
-        return false;
-    }
+    return typeof f === 'function';
 };
 
 _.isArguments = function(obj) {
@@ -1115,8 +1108,17 @@ function _storageWrapper(storage, name, is_supported_fn) {
     };
 }
 
-_.localStorage = _storageWrapper(window.localStorage, 'localStorage', localStorageSupported);
-_.sessionStorage = _storageWrapper(window.sessionStorage, 'sessionStorage', sessionStorageSupported);
+// Safari errors out accessing localStorage/sessionStorage when cookies are disabled,
+// so create dummy storage wrappers that silently fail as a fallback.
+var windowLocalStorage = null, windowSessionStorage = null;
+try {
+    windowLocalStorage = window.localStorage;
+    windowSessionStorage = window.sessionStorage;
+    // eslint-disable-next-line no-empty
+} catch (_err) {}
+
+_.localStorage = _storageWrapper(windowLocalStorage, 'localStorage', localStorageSupported);
+_.sessionStorage = _storageWrapper(windowSessionStorage, 'sessionStorage', sessionStorageSupported);
 
 _.register_event = (function() {
     // written by Dean Edwards, 2005

package/testServer.js

@@ -1,14 +1,40 @@
 'use strict';
 
-var express      = require('express');
-var cookieParser = require('cookie-parser');
-var logger       = require('morgan');
+const express      = require('express');
+const cookieParser = require('cookie-parser');
+const logger       = require('morgan');
 
-var app = express();
+const app = express();
+
+// Test suite definitions
+const TEST_SUITES = {
+    'dev': {
+        name: 'Development Build',
+        description: 'Unminified library for easier debugging',
+        customLibUrl: './static/build/mixpanel.js',
+        snippetUrl: './static/src/loaders/mixpanel-jslib-snippet.js',
+        testUrl: './static/build/test/browser/snippet-test.js'
+    },
+    'minified': {
+        name: 'Minified Build',
+        description: 'Production build (closure compiled, served via Mixpanel CDN)',
+        customLibUrl: './static/build/mixpanel.min.js',
+        snippetUrl: './static/build/mixpanel-jslib-snippet.min.test.js',
+        testUrl: './static/build/test/browser/snippet-test.js'
+    },
+    'module-cjs': {
+        name: 'CommonJS Module',
+        description: 'Node.js compatible module (served via npm install)',
+        testUrl: './static/build/test/browser/module-cjs-test.js'
+    }
+};
 
 app.use(cookieParser());
 app.use(logger('dev'));
 
+app.set('views', __dirname + '/tests');
+app.set('view engine', 'pug');
+
 app.use('/tests', express.static(__dirname + "/tests"));
 app.get('/tests/cookie_included/:cookieName', function(req, res) {
     if (req.cookies && req.cookies[req.params.cookieName]) {
@@ -19,9 +45,27 @@ app.get('/tests/cookie_included/:cookieName', function(req, res) {
 });
 app.use(express.static(__dirname));
 app.get('/', function(req, res) {
-    res.redirect(301, '/tests/');
+    res.redirect(301, '/tests/new');
 });
 
-var server = app.listen(3000, function () {
-  console.log('Mixpanel test app listening on port %s', server.address().port);
+app.get('/tests/new', function(req, res) {
+    res.render('directory.pug', { testSuites: TEST_SUITES });
+});
+
+app.use('/tests/new/static', express.static(__dirname));
+
+// register routes for each test suite
+for (const [suiteId, suite] of Object.entries(TEST_SUITES)) {
+    app.get('/tests/new/' + suiteId, function(req, res) {
+        res.render('integration.pug', {
+            suiteName: suite.name,
+            customLibUrl: suite.customLibUrl,
+            snippetUrl: suite.snippetUrl,
+            testUrl: suite.testUrl
+        });
+    });
+}
+
+const server = app.listen(3001, function () {
+    console.log(`Mixpanel test app listening on port ${server.address().port}`);
 });

package/.github/workflows/tests.yml

@@ -1,25 +0,0 @@
-name: Tests
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x, 22.x]
-
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-      - run: npm ci
-      - run: npm test
-      - run: npm run build-dist