mixpanel-browser 2.57.1 → 2.59.0

package/src/autocapture/utils.js

@@ -0,0 +1,434 @@
+// stateless utils
+// mostly from https://github.com/mixpanel/mixpanel-js/blob/989ada50f518edab47b9c4fd9535f9fbd5ec5fc0/src/autotrack-utils.js
+
+import { _, console_with_prefix, document } from '../utils'; // eslint-disable-line camelcase
+import { window } from '../window';
+
+var EV_CHANGE = 'change';
+var EV_CLICK = 'click';
+var EV_HASHCHANGE = 'hashchange';
+var EV_MP_LOCATION_CHANGE = 'mp_locationchange';
+var EV_POPSTATE = 'popstate';
+// TODO scrollend isn't available in Safari: document or polyfill?
+var EV_SCROLLEND = 'scrollend';
+var EV_SUBMIT = 'submit';
+
+var CLICK_EVENT_PROPS = [
+    'clientX', 'clientY',
+    'offsetX', 'offsetY',
+    'pageX', 'pageY',
+    'screenX', 'screenY',
+    'x', 'y'
+];
+var OPT_IN_CLASSES = ['mp-include'];
+var OPT_OUT_CLASSES = ['mp-no-track'];
+var SENSITIVE_DATA_CLASSES = OPT_OUT_CLASSES.concat(['mp-sensitive']);
+var TRACKED_ATTRS = [
+    'aria-label', 'aria-labelledby', 'aria-describedby',
+    'href', 'name', 'role', 'title', 'type'
+];
+
+var logger = console_with_prefix('autocapture');
+
+
+function getClasses(el) {
+    var classes = {};
+    var classList = getClassName(el).split(' ');
+    for (var i = 0; i < classList.length; i++) {
+        var cls = classList[i];
+        if (cls) {
+            classes[cls] = true;
+        }
+    }
+    return classes;
+}
+
+/*
+ * Get the className of an element, accounting for edge cases where element.className is an object
+ * @param {Element} el - element to get the className of
+ * @returns {string} the element's class
+ */
+function getClassName(el) {
+    switch(typeof el.className) {
+        case 'string':
+            return el.className;
+        case 'object': // handle cases where className might be SVGAnimatedString or some other type
+            return el.className.baseVal || el.getAttribute('class') || '';
+        default: // future proof
+            return '';
+    }
+}
+
+function getPreviousElementSibling(el) {
+    if (el.previousElementSibling) {
+        return el.previousElementSibling;
+    } else {
+        do {
+            el = el.previousSibling;
+        } while (el && !isElementNode(el));
+        return el;
+    }
+}
+
+function getPropertiesFromElement(el) {
+    var props = {
+        '$classes': getClassName(el).split(' '),
+        '$tag_name': el.tagName.toLowerCase()
+    };
+    var elId = el.id;
+    if (elId) {
+        props['$id'] = elId;
+    }
+
+    if (shouldTrackElement(el)) {
+        _.each(TRACKED_ATTRS, function(attr) {
+            if (el.hasAttribute(attr)) {
+                var attrVal = el.getAttribute(attr);
+                if (shouldTrackValue(attrVal)) {
+                    props['$attr-' + attr] = attrVal;
+                }
+            }
+        });
+    }
+
+    var nthChild = 1;
+    var nthOfType = 1;
+    var currentElem = el;
+    while (currentElem = getPreviousElementSibling(currentElem)) { // eslint-disable-line no-cond-assign
+        nthChild++;
+        if (currentElem.tagName === el.tagName) {
+            nthOfType++;
+        }
+    }
+    props['$nth_child'] = nthChild;
+    props['$nth_of_type'] = nthOfType;
+
+    return props;
+}
+
+function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
+    blockSelectors = blockSelectors || [];
+    var props = null;
+
+    var target = typeof ev.target === 'undefined' ? ev.srcElement : ev.target;
+    if (isTextNode(target)) { // defeat Safari bug (see: http://www.quirksmode.org/js/events_properties.html)
+        target = target.parentNode;
+    }
+
+    if (shouldTrackDomEvent(target, ev)) {
+        var targetElementList = [target];
+        var curEl = target;
+        while (curEl.parentNode && !isTag(curEl, 'body')) {
+            targetElementList.push(curEl.parentNode);
+            curEl = curEl.parentNode;
+        }
+
+        var elementsJson = [];
+        var href, explicitNoTrack = false;
+        _.each(targetElementList, function(el) {
+            var shouldTrackEl = shouldTrackElement(el);
+
+            // if the element or a parent element is an anchor tag
+            // include the href as a property
+            if (el.tagName.toLowerCase() === 'a') {
+                href = el.getAttribute('href');
+                href = shouldTrackEl && shouldTrackValue(href) && href;
+            }
+
+            // allow users to programmatically prevent tracking of elements by adding classes such as 'mp-no-track'
+            var classes = getClasses(el);
+            _.each(OPT_OUT_CLASSES, function(cls) {
+                if (classes[cls]) {
+                    explicitNoTrack = true;
+                }
+            });
+
+            if (!explicitNoTrack) {
+                // programmatically prevent tracking of elements that match CSS selectors
+                _.each(blockSelectors, function(sel) {
+                    try {
+                        if (el['matches'](sel)) {
+                            explicitNoTrack = true;
+                        }
+                    } catch (err) {
+                        logger.critical('Error while checking selector: ' + sel, err);
+                    }
+                });
+            }
+
+            elementsJson.push(getPropertiesFromElement(el));
+        }, this);
+
+        if (!explicitNoTrack) {
+            var docElement = document['documentElement'];
+            props = {
+                '$event_type': ev.type,
+                '$host': window.location.host,
+                '$pathname': window.location.pathname,
+                '$elements':  elementsJson,
+                '$el_attr__href': href,
+                '$viewportHeight': Math.max(docElement['clientHeight'], window['innerHeight'] || 0),
+                '$viewportWidth': Math.max(docElement['clientWidth'], window['innerWidth'] || 0)
+            };
+
+            if (captureTextContent) {
+                elementText = getSafeText(target);
+                if (elementText && elementText.length) {
+                    props['$el_text'] = elementText;
+                }
+            }
+
+            if (ev.type === EV_CLICK) {
+                _.each(CLICK_EVENT_PROPS, function(prop) {
+                    if (prop in ev) {
+                        props['$' + prop] = ev[prop];
+                    }
+                });
+                target = guessRealClickTarget(ev);
+            }
+            // prioritize text content from "real" click target if different from original target
+            if (captureTextContent) {
+                var elementText = getSafeText(target);
+                if (elementText && elementText.length) {
+                    props['$el_text'] = elementText;
+                }
+            }
+
+            if (target) {
+                var targetProps = getPropertiesFromElement(target);
+                props['$target'] = targetProps;
+                // pull up more props onto main event props
+                props['$el_classes'] = targetProps['$classes'];
+                _.extend(props, _.strip_empty_properties({
+                    '$el_id': targetProps['$id'],
+                    '$el_tag_name': targetProps['$tag_name']
+                }));
+            }
+        }
+    }
+
+    return props;
+}
+
+
+/*
+ * Get the direct text content of an element, protecting against sensitive data collection.
+ * Concats textContent of each of the element's text node children; this avoids potential
+ * collection of sensitive data that could happen if we used element.textContent and the
+ * element had sensitive child elements, since element.textContent includes child content.
+ * Scrubs values that look like they could be sensitive (i.e. cc or ssn number).
+ * @param {Element} el - element to get the text of
+ * @returns {string} the element's direct text content
+ */
+function getSafeText(el) {
+    var elText = '';
+
+    if (shouldTrackElement(el) && el.childNodes && el.childNodes.length) {
+        _.each(el.childNodes, function(child) {
+            if (isTextNode(child) && child.textContent) {
+                elText += _.trim(child.textContent)
+                    // scrub potentially sensitive values
+                    .split(/(\s+)/).filter(shouldTrackValue).join('')
+                    // normalize whitespace
+                    .replace(/[\r\n]/g, ' ').replace(/[ ]+/g, ' ')
+                    // truncate
+                    .substring(0, 255);
+            }
+        });
+    }
+
+    return _.trim(elText);
+}
+
+function guessRealClickTarget(ev) {
+    var target = ev.target;
+    var composedPath = ev['composedPath']();
+    for (var i = 0; i < composedPath.length; i++) {
+        var node = composedPath[i];
+        if (
+            isTag(node, 'a') ||
+            isTag(node, 'button') ||
+            isTag(node, 'input') ||
+            isTag(node, 'select') ||
+            (node.getAttribute && node.getAttribute('role') === 'button')
+        ) {
+            target = node;
+            break;
+        }
+        if (node === target) {
+            break;
+        }
+    }
+    return target;
+}
+
+/*
+ * Check whether a DOM node has nodeType Node.ELEMENT_NODE
+ * @param {Node} node - node to check
+ * @returns {boolean} whether node is of the correct nodeType
+ */
+function isElementNode(node) {
+    return node && node.nodeType === 1; // Node.ELEMENT_NODE - use integer constant for browser portability
+}
+
+/*
+ * Check whether an element is of a given tag type.
+ * Due to potential reference discrepancies (such as the webcomponents.js polyfill),
+ * we want to match tagNames instead of specific references because something like
+ * element === document.body won't always work because element might not be a native
+ * element.
+ * @param {Element} el - element to check
+ * @param {string} tag - tag name (e.g., "div")
+ * @returns {boolean} whether el is of the given tag type
+ */
+function isTag(el, tag) {
+    return el && el.tagName && el.tagName.toLowerCase() === tag.toLowerCase();
+}
+
+/*
+ * Check whether a DOM node is a TEXT_NODE
+ * @param {Node} node - node to check
+ * @returns {boolean} whether node is of type Node.TEXT_NODE
+ */
+function isTextNode(node) {
+    return node && node.nodeType === 3; // Node.TEXT_NODE - use integer constant for browser portability
+}
+
+function minDOMApisSupported() {
+    try {
+        var testEl = document.createElement('div');
+        return !!testEl['matches'];
+    } catch (err) {
+        return false;
+    }
+}
+
+/*
+ * Check whether a DOM event should be "tracked" or if it may contain sensitive data
+ * using a variety of heuristics.
+ * @param {Element} el - element to check
+ * @param {Event} ev - event to check
+ * @returns {boolean} whether the event should be tracked
+ */
+function shouldTrackDomEvent(el, ev) {
+    if (!el || isTag(el, 'html') || !isElementNode(el)) {
+        return false;
+    }
+    var tag = el.tagName.toLowerCase();
+    switch (tag) {
+        case 'form':
+            return ev.type === EV_SUBMIT;
+        case 'input':
+            if (['button', 'submit'].indexOf(el.getAttribute('type')) === -1) {
+                return ev.type === EV_CHANGE;
+            } else {
+                return ev.type === EV_CLICK;
+            }
+        case 'select':
+        case 'textarea':
+            return ev.type === EV_CHANGE;
+        default:
+            return ev.type === EV_CLICK;
+    }
+}
+
+/*
+ * Check whether a DOM element should be "tracked" or if it may contain sensitive data
+ * using a variety of heuristics.
+ * @param {Element} el - element to check
+ * @returns {boolean} whether the element should be tracked
+ */
+function shouldTrackElement(el) {
+    var i;
+
+    for (var curEl = el; curEl.parentNode && !isTag(curEl, 'body'); curEl = curEl.parentNode) {
+        var classes = getClasses(curEl);
+        for (i = 0; i < SENSITIVE_DATA_CLASSES.length; i++) {
+            if (classes[SENSITIVE_DATA_CLASSES[i]]) {
+                return false;
+            }
+        }
+    }
+
+    var elClasses = getClasses(el);
+    for (i = 0; i < OPT_IN_CLASSES.length; i++) {
+        if (elClasses[OPT_IN_CLASSES[i]]) {
+            return true;
+        }
+    }
+
+    // don't send data from inputs or similar elements since there will always be
+    // a risk of clientside javascript placing sensitive data in attributes
+    if (
+        isTag(el, 'input') ||
+        isTag(el, 'select') ||
+        isTag(el, 'textarea') ||
+        el.getAttribute('contenteditable') === 'true'
+    ) {
+        return false;
+    }
+
+    // don't include hidden or password fields
+    var type = el.type || '';
+    if (typeof type === 'string') { // it's possible for el.type to be a DOM element if el is a form with a child input[name="type"]
+        switch(type.toLowerCase()) {
+            case 'hidden':
+                return false;
+            case 'password':
+                return false;
+        }
+    }
+
+    // filter out data from fields that look like sensitive fields
+    var name = el.name || el.id || '';
+    if (typeof name === 'string') { // it's possible for el.name or el.id to be a DOM element if el is a form with a child input[name="name"]
+        var sensitiveNameRegex = /^cc|cardnum|ccnum|creditcard|csc|cvc|cvv|exp|pass|pwd|routing|seccode|securitycode|securitynum|socialsec|socsec|ssn/i;
+        if (sensitiveNameRegex.test(name.replace(/[^a-zA-Z0-9]/g, ''))) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+
+/*
+ * Check whether a string value should be "tracked" or if it may contain sensitive data
+ * using a variety of heuristics.
+ * @param {string} value - string value to check
+ * @returns {boolean} whether the element should be tracked
+ */
+function shouldTrackValue(value) {
+    if (value === null || _.isUndefined(value)) {
+        return false;
+    }
+
+    if (typeof value === 'string') {
+        value = _.trim(value);
+
+        // check to see if input value looks like a credit card number
+        // see: https://www.safaribooksonline.com/library/view/regular-expressions-cookbook/9781449327453/ch04s20.html
+        var ccRegex = /^(?:(4[0-9]{12}(?:[0-9]{3})?)|(5[1-5][0-9]{14})|(6(?:011|5[0-9]{2})[0-9]{12})|(3[47][0-9]{13})|(3(?:0[0-5]|[68][0-9])[0-9]{11})|((?:2131|1800|35[0-9]{3})[0-9]{11}))$/;
+        if (ccRegex.test((value || '').replace(/[- ]/g, ''))) {
+            return false;
+        }
+
+        // check to see if input value looks like a social security number
+        var ssnRegex = /(^\d{3}-?\d{2}-?\d{4}$)/;
+        if (ssnRegex.test(value)) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+export {
+    getPropsForDOMEvent,
+    getSafeText,
+    logger,
+    minDOMApisSupported,
+    shouldTrackDomEvent, shouldTrackElement, shouldTrackValue,
+    EV_CHANGE, EV_CLICK, EV_HASHCHANGE, EV_MP_LOCATION_CHANGE, EV_POPSTATE,
+    EV_SCROLLEND, EV_SUBMIT
+};

package/src/config.js

@@ -1,6 +1,6 @@
 var Config = {
     DEBUG: false,
-    LIB_VERSION: '2.57.1'
+    LIB_VERSION: '2.59.0'
 };
 
 export default Config;

package/src/mixpanel-core.js

@@ -2,6 +2,7 @@
 import Config from './config';
 import { MAX_RECORDING_MS, _, console, userAgent, document, navigator, slice } from './utils';
 import { window } from './window';
+import { Autocapture } from './autocapture';
 import { FormTracker, LinkTracker } from './dom-trackers';
 import { RequestBatcher } from './request-batcher';
 import { MixpanelGroup } from './mixpanel-group';
@@ -105,6 +106,7 @@ var DEFAULT_CONFIG = {
     'api_transport':                     'XHR',
     'api_payload_format':                PAYLOAD_TYPE_BASE64,
     'app_host':                          'https://mixpanel.com',
+    'autocapture':                       false,
     'cdn':                               'https://cdn.mxpnl.com',
     'cross_site_cookie':                 false,
     'cross_subdomain_cookie':            true,
@@ -147,6 +149,7 @@ var DEFAULT_CONFIG = {
     'hooks':                             {},
     'record_block_class':                new RegExp('^(mp-block|fs-exclude|amp-block|rr-block|ph-no-capture)$'),
     'record_block_selector':             'img, video',
+    'record_canvas':                     false,
     'record_collect_fonts':              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)$'),
@@ -363,10 +366,8 @@ MixpanelLib.prototype._init = function(token, config, name) {
         }, '');
     }
 
-    var track_pageview_option = this.get_config('track_pageview');
-    if (track_pageview_option) {
-        this._init_url_change_tracking(track_pageview_option);
-    }
+    this.autocapture = new Autocapture(this);
+    this.autocapture.init();
 
     if (this.get_config('record_sessions_percent') > 0 && Math.random() * 100 <= this.get_config('record_sessions_percent')) {
         this.start_session_recording();
@@ -491,55 +492,6 @@ MixpanelLib.prototype._track_dom = function(DomClass, args) {
     return dt.track.apply(dt, args);
 };
 
-MixpanelLib.prototype._init_url_change_tracking = function(track_pageview_option) {
-    var previous_tracked_url = '';
-    var tracked = this.track_pageview();
-    if (tracked) {
-        previous_tracked_url = _.info.currentUrl();
-    }
-
-    if (_.include(['full-url', 'url-with-path-and-query-string', 'url-with-path'], track_pageview_option)) {
-        window.addEventListener('popstate', function() {
-            window.dispatchEvent(new Event('mp_locationchange'));
-        });
-        window.addEventListener('hashchange', function() {
-            window.dispatchEvent(new Event('mp_locationchange'));
-        });
-        var nativePushState = window.history.pushState;
-        if (typeof nativePushState === 'function') {
-            window.history.pushState = function(state, unused, url) {
-                nativePushState.call(window.history, state, unused, url);
-                window.dispatchEvent(new Event('mp_locationchange'));
-            };
-        }
-        var nativeReplaceState = window.history.replaceState;
-        if (typeof nativeReplaceState === 'function') {
-            window.history.replaceState = function(state, unused, url) {
-                nativeReplaceState.call(window.history, state, unused, url);
-                window.dispatchEvent(new Event('mp_locationchange'));
-            };
-        }
-        window.addEventListener('mp_locationchange', function() {
-            var current_url = _.info.currentUrl();
-            var should_track = false;
-            if (track_pageview_option === 'full-url') {
-                should_track = current_url !== previous_tracked_url;
-            } else if (track_pageview_option === 'url-with-path-and-query-string') {
-                should_track = current_url.split('#')[0] !== previous_tracked_url.split('#')[0];
-            } else if (track_pageview_option === 'url-with-path') {
-                should_track = current_url.split('#')[0].split('?')[0] !== previous_tracked_url.split('#')[0].split('?')[0];
-            }
-
-            if (should_track) {
-                var tracked = this.track_pageview();
-                if (tracked) {
-                    previous_tracked_url = current_url;
-                }
-            }
-        }.bind(this));
-    }
-};
-
 /**
  * _prepare_callback() should be called by callers of _send_request for use
  * as the callback argument.
@@ -1797,6 +1749,10 @@ MixpanelLib.prototype.set_config = function(config) {
             this['persistence'].update_config(this['config']);
         }
         Config.DEBUG = Config.DEBUG || this.get_config('debug');
+
+        if ('autocapture' in config && this.autocapture) {
+            this.autocapture.init();
+        }
     }
 };
 

package/src/recorder/session-recording.js

@@ -53,6 +53,7 @@ var SessionRecording = function(options) {
 
     this.seqNo = 0;
     this.replayStartTime = null;
+    this.replayStartUrl = null;
     this.batchStartUrl = null;
 
     this.idleTimeoutId = null;
@@ -104,6 +105,7 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
 
     this.replayStartTime = new Date().getTime();
     this.batchStartUrl = _.info.currentUrl();
+    this.replayStartUrl = _.info.currentUrl();
 
     if (shouldStopBatcher || this.recordMinMs > 0) {
         // the primary case for shouldStopBatcher is when we're starting recording after a reset
@@ -140,9 +142,17 @@ SessionRecording.prototype.startRecording = function (shouldStopBatcher) {
         'blockClass': this.getConfig('record_block_class'),
         'blockSelector': blockSelector,
         'collectFonts': this.getConfig('record_collect_fonts'),
+        'dataURLOptions': { // canvas image options (https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL)
+            'type': 'image/webp',
+            'quality': 0.6
+        },
         'maskAllInputs': true,
         'maskTextClass': this.getConfig('record_mask_text_class'),
-        'maskTextSelector': this.getConfig('record_mask_text_selector')
+        'maskTextSelector': this.getConfig('record_mask_text_selector'),
+        'recordCanvas': this.getConfig('record_canvas'),
+        'sampling': {
+            'canvas': 15
+        }
     });
 
     if (typeof this._stopRecording !== 'function') {
@@ -260,6 +270,7 @@ SessionRecording.prototype._flushEvents = addOptOutCheckMixpanelLib(function (da
             'replay_id': replayId,
             'replay_length_ms': replayLengthMs,
             'replay_start_time': this.replayStartTime / 1000,
+            'replay_start_url': this.replayStartUrl,
             'seq': this.seqNo
         };
         var eventsJson = _.JSONEncode(data);

package/src/utils.js

@@ -110,6 +110,29 @@ var console_with_prefix = function(prefix) {
 };
 
 
+var safewrap = function(f) {
+    return function() {
+        try {
+            return f.apply(this, arguments);
+        } catch (e) {
+            console.critical('Implementation error. Please turn on debug and contact support@mixpanel.com.');
+            if (Config.DEBUG){
+                console.critical(e);
+            }
+        }
+    };
+};
+
+var safewrapClass = function(klass) {
+    var proto = klass.prototype;
+    for (var func in proto) {
+        if (typeof(proto[func]) === 'function') {
+            proto[func] = safewrap(proto[func]);
+        }
+    }
+};
+
+
 // UNDERSCORE
 // Embed part of the Underscore Library
 _.bind = function(func, context) {
@@ -888,6 +911,7 @@ _.UUID = (function() {
 var BLOCKED_UA_STRS = [
     'ahrefsbot',
     'ahrefssiteaudit',
+    'amazonbot',
     'baiduspider',
     'bingbot',
     'bingpreview',
@@ -897,7 +921,7 @@ var BLOCKED_UA_STRS = [
     'pinterest',
     'screaming frog',
     'yahoo! slurp',
-    'yandexbot',
+    'yandex',
 
     // a whole bunch of goog-specific crawlers
     // https://developers.google.com/search/docs/advanced/crawling/overview-google-crawlers
@@ -1732,6 +1756,8 @@ export {
     MAX_RECORDING_MS,
     MAX_VALUE_FOR_MIN_RECORDING_MS,
     navigator,
+    safewrap,
+    safewrapClass,
     slice,
     userAgent,
 };

package/src/window.js

@@ -7,11 +7,14 @@ if (typeof(window) === 'undefined') {
     win = {
         navigator: { userAgent: '', onLine: true },
         document: {
+            createElement: function() { return {}; },
             location: loc,
             referrer: ''
         },
         screen: { width: 0, height: 0 },
-        location: loc
+        location: loc,
+        addEventListener: function() {},
+        removeEventListener: function() {}
     };
 } else {
     win = window;