mixpanel-browser 2.73.0 → 2.74.0

package/src/index.d.ts

@@ -6,6 +6,8 @@ export type PushItem = Array<string | Dict | ((this: Mixpanel) => void)>;
 
 export type Query = string | Element | Element[];
 
+export type RemoteSettingType = "disabled" | "fallback" | "strict";
+
 export interface Dict {
   [key: string]: any;
 }
@@ -166,6 +168,8 @@ export interface Config {
     track?: string;
     engage?: string;
     groups?: string;
+    record?: string;
+    flags?: string;
   };
   api_method: string;
   api_transport: string;
@@ -225,12 +229,18 @@ export interface Config {
   record_idle_timeout_ms: number;
   record_inline_images: boolean;
   record_mask_text_class: string | RegExp;
-  record_mask_text_selector: string;
+  record_mask_text_selector: string | string[];
+  record_unmask_text_selector: string | string[];
+  record_mask_all_text: boolean;
+  record_mask_input_selector: string | string[];
+  record_unmask_input_selector: string | string[];
+  record_mask_all_inputs: boolean;
   record_min_ms: number;
   record_max_ms: number;
   record_sessions_percent: number;
   record_canvas: boolean;
   record_heatmap_data: boolean;
+  remote_settings_mode: RemoteSettingType;
   hooks: {
     before_identify?: (new_distinct_id: string) => string | null;
     before_register?: (
@@ -256,6 +266,7 @@ export interface Config {
   };
 }
 
+
 export type VerboseResponse =
   | {
       status: 1;

package/src/mixpanel-core.js

@@ -61,6 +61,9 @@ var INIT_SNIPPET = 1;
 /** @const */ var PAYLOAD_TYPE_BASE64   = 'base64';
 /** @const */ var PAYLOAD_TYPE_JSON     = 'json';
 /** @const */ var DEVICE_ID_PREFIX      = '$device:';
+/** @const */ var SETTING_STRICT        = 'strict';
+/** @const */ var SETTING_FALLBACK      = 'fallback';
+/** @const */ var SETTING_DISABLED      = 'disabled';
 
 
 /*
@@ -89,7 +92,8 @@ var DEFAULT_API_ROUTES = {
     'engage': 'engage/',
     'groups': 'groups/',
     'record': 'record/',
-    'flags':  'flags/'
+    'flags':  'flags/',
+    'settings': 'settings/'
 };
 
 /*
@@ -153,12 +157,12 @@ var DEFAULT_CONFIG = {
     'record_console':                    true,
     'record_heatmap_data':               false,
     'record_idle_timeout_ms':            30 * 60 * 1000, // 30 minutes
-    'record_mask_text_class':            new RegExp('^(mp-mask|fs-mask|amp-mask|rr-mask|ph-mask)$'),
-    'record_mask_text_selector':         '*',
+    'record_mask_inputs':                true,
     'record_max_ms':                     MAX_RECORDING_MS,
     'record_min_ms':                     0,
     'record_sessions_percent':           0,
-    'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js'
+    'recorder_src':                      'https://cdn.mxpnl.com/libs/mixpanel-recorder.min.js',
+    'remote_settings_mode':              SETTING_DISABLED // 'strict', 'fallback', 'disabled'
 };
 
 var DOM_LOADED = false;
@@ -396,7 +400,16 @@ MixpanelLib.prototype._init = function(token, config, name) {
     this.autocapture.init();
 
     this._init_tab_id();
-    this._check_and_start_session_recording();
+
+    // Based on remote_settings_mode, fetch remote settings and then start session recording if applicable
+    var mode = this.get_config('remote_settings_mode');
+    if (mode === SETTING_STRICT || mode === SETTING_FALLBACK) {
+        this._fetch_remote_settings(mode).then(_.bind(function() {
+            this._check_and_start_session_recording();
+        }, this));
+    } else {
+        this._check_and_start_session_recording();
+    }
 };
 
 /**
@@ -821,6 +834,77 @@ MixpanelLib.prototype._send_request = function(url, data, options, callback) {
     return succeeded;
 };
 
+MixpanelLib.prototype._fetch_remote_settings = function(mode) {
+    var disableRecordingIfStrict = function() {
+        if (mode === 'strict') {
+            self.set_config({'record_sessions_percent': 0});
+        }
+    };
+
+    if (!window['AbortController']) {
+        console.critical('Remote settings unavailable: missing minimum required APIs');
+        disableRecordingIfStrict();
+        return Promise.resolve();
+    }
+
+    var settings_endpoint = this.get_api_host('settings') + '/' + this.get_config('api_routes')['settings'];
+    var request_params = {
+        '$lib_version': Config.LIB_VERSION,
+        'mp_lib': 'web',
+        'sdk_config': '1',
+    };
+    var query_string = _.HTTPBuildQuery(request_params);
+    var full_url = settings_endpoint + '?' + query_string;
+    var self = this;
+
+    var abortController = new AbortController();
+    var timeout_id = setTimeout(function() {
+        abortController.abort();
+    }, 500);
+    var fetchOptions = {
+        'method': 'GET',
+        'headers': {
+            'Authorization': 'Basic ' + btoa(self.get_config('token') + ':'),
+        },
+        'signal': abortController.signal
+    };
+
+    return window['fetch'](full_url, fetchOptions).then(function(response) {
+        clearTimeout(timeout_id);
+        if (!response['ok']) {
+            console.critical('Network response was not ok');
+            disableRecordingIfStrict();
+            return;
+        }
+        return response.json();
+    }).then(function(result) {
+        if (result && result['sdk_config'] && result['sdk_config']['config']) {
+            var remote_config = result['sdk_config']['config'];
+
+            // Verify that remote config contains only valid keys from DEFAULT_CONFIG
+            var valid_config = {};
+            _.each(remote_config, function(value, key) {
+                if (DEFAULT_CONFIG.hasOwnProperty(key)) {
+                    valid_config[key] = value;
+                }
+            });
+
+            if (_.isEmptyObject(valid_config)) {
+                console.critical('No valid config keys found in remote settings.');
+                disableRecordingIfStrict();
+            } else {
+                self.set_config(valid_config);
+            }
+        } else {
+            disableRecordingIfStrict();
+        }
+    }).catch(function(err) {
+        clearTimeout(timeout_id);
+        console.critical('Failed to fetch remote settings', err);
+        disableRecordingIfStrict();
+    });
+};
+
 /**
  * _execute_array() deals with processing any mixpanel function
  * calls that were called before the Mixpanel library were loaded

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/utils.js

@@ -1115,8 +1115,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