mixpanel-browser 2.59.0 → 2.60.0

package/src/autocapture/utils.js

@@ -70,7 +70,7 @@ function getPreviousElementSibling(el) {
     }
 }
 
-function getPropertiesFromElement(el) {
+function getPropertiesFromElement(el, ev, blockAttrsSet, extraAttrs, allowElementCallback, allowSelectors) {
     var props = {
         '$classes': getClassName(el).split(' '),
         '$tag_name': el.tagName.toLowerCase()
@@ -80,9 +80,9 @@ function getPropertiesFromElement(el) {
         props['$id'] = elId;
     }
 
-    if (shouldTrackElement(el)) {
-        _.each(TRACKED_ATTRS, function(attr) {
-            if (el.hasAttribute(attr)) {
+    if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors)) {
+        _.each(TRACKED_ATTRS.concat(extraAttrs), function(attr) {
+            if (el.hasAttribute(attr) && !blockAttrsSet[attr]) {
                 var attrVal = el.getAttribute(attr);
                 if (shouldTrackValue(attrVal)) {
                     props['$attr-' + attr] = attrVal;
@@ -106,8 +106,21 @@ function getPropertiesFromElement(el) {
     return props;
 }
 
-function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
-    blockSelectors = blockSelectors || [];
+function getPropsForDOMEvent(ev, config) {
+    var allowElementCallback = config.allowElementCallback;
+    var allowSelectors = config.allowSelectors || [];
+    var blockAttrs = config.blockAttrs || [];
+    var blockElementCallback = config.blockElementCallback;
+    var blockSelectors = config.blockSelectors || [];
+    var captureTextContent = config.captureTextContent || false;
+    var captureExtraAttrs = config.captureExtraAttrs || [];
+
+    // convert array to set every time, as the config may have changed
+    var blockAttrsSet = {};
+    _.each(blockAttrs, function(attr) {
+        blockAttrsSet[attr] = true;
+    });
+
     var props = null;
 
     var target = typeof ev.target === 'undefined' ? ev.srcElement : ev.target;
@@ -115,7 +128,11 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
         target = target.parentNode;
     }
 
-    if (shouldTrackDomEvent(target, ev)) {
+    if (
+        shouldTrackDomEvent(target, ev) &&
+        isElementAllowed(target, ev, allowElementCallback, allowSelectors) &&
+        !isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+    ) {
         var targetElementList = [target];
         var curEl = target;
         while (curEl.parentNode && !isTag(curEl, 'body')) {
@@ -126,37 +143,20 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
         var elementsJson = [];
         var href, explicitNoTrack = false;
         _.each(targetElementList, function(el) {
-            var shouldTrackEl = shouldTrackElement(el);
+            var shouldTrackDetails = shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors);
 
             // if the element or a parent element is an anchor tag
             // include the href as a property
-            if (el.tagName.toLowerCase() === 'a') {
+            if (!blockAttrsSet['href'] && el.tagName.toLowerCase() === 'a') {
                 href = el.getAttribute('href');
-                href = shouldTrackEl && shouldTrackValue(href) && href;
+                href = shouldTrackDetails && 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);
-                    }
-                });
+            if (isElementBlocked(el, ev, blockElementCallback, blockSelectors)) {
+                explicitNoTrack = true;
             }
 
-            elementsJson.push(getPropertiesFromElement(el));
+            elementsJson.push(getPropertiesFromElement(el, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors));
         }, this);
 
         if (!explicitNoTrack) {
@@ -170,9 +170,17 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
                 '$viewportHeight': Math.max(docElement['clientHeight'], window['innerHeight'] || 0),
                 '$viewportWidth': Math.max(docElement['clientWidth'], window['innerWidth'] || 0)
             };
+            _.each(captureExtraAttrs, function(attr) {
+                if (!blockAttrsSet[attr] && target.hasAttribute(attr)) {
+                    var attrVal = target.getAttribute(attr);
+                    if (shouldTrackValue(attrVal)) {
+                        props['$el_attr__' + attr] = attrVal;
+                    }
+                }
+            });
 
             if (captureTextContent) {
-                elementText = getSafeText(target);
+                elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                 if (elementText && elementText.length) {
                     props['$el_text'] = elementText;
                 }
@@ -188,14 +196,22 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
             }
             // prioritize text content from "real" click target if different from original target
             if (captureTextContent) {
-                var elementText = getSafeText(target);
+                var elementText = getSafeText(target, ev, allowElementCallback, allowSelectors);
                 if (elementText && elementText.length) {
                     props['$el_text'] = elementText;
                 }
             }
 
             if (target) {
-                var targetProps = getPropertiesFromElement(target);
+                // target may have been recalculated; check allowlists and blocklists again
+                if (
+                    !isElementAllowed(target, ev, allowElementCallback, allowSelectors) ||
+                    isElementBlocked(target, ev, blockElementCallback, blockSelectors)
+                ) {
+                    return null;
+                }
+
+                var targetProps = getPropertiesFromElement(target, ev, blockAttrsSet, captureExtraAttrs, allowElementCallback, allowSelectors);
                 props['$target'] = targetProps;
                 // pull up more props onto main event props
                 props['$el_classes'] = targetProps['$classes'];
@@ -211,19 +227,20 @@ function getPropsForDOMEvent(ev, blockSelectors, captureTextContent) {
 }
 
 
-/*
+/**
  * 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
+ * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
  * @returns {string} the element's direct text content
  */
-function getSafeText(el) {
+function getSafeText(el, ev, allowElementCallback, allowSelectors) {
     var elText = '';
 
-    if (shouldTrackElement(el) && el.childNodes && el.childNodes.length) {
+    if (shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) && el.childNodes && el.childNodes.length) {
         _.each(el.childNodes, function(child) {
             if (isTextNode(child) && child.textContent) {
                 elText += _.trim(child.textContent)
@@ -262,6 +279,75 @@ function guessRealClickTarget(ev) {
     return target;
 }
 
+function isElementAllowed(el, ev, allowElementCallback, allowSelectors) {
+    if (allowElementCallback) {
+        try {
+            if (!allowElementCallback(el, ev)) {
+                return false;
+            }
+        } catch (err) {
+            logger.critical('Error while checking element in allowElementCallback', err);
+            return false;
+        }
+    }
+
+    if (!allowSelectors.length) {
+        // no allowlist; all elements are fair game
+        return true;
+    }
+
+    for (var i = 0; i < allowSelectors.length; i++) {
+        var sel = allowSelectors[i];
+        try {
+            if (el['matches'](sel)) {
+                return true;
+            }
+        } catch (err) {
+            logger.critical('Error while checking selector: ' + sel, err);
+        }
+    }
+    return false;
+}
+
+function isElementBlocked(el, ev, blockElementCallback, blockSelectors) {
+    var i;
+
+    if (blockElementCallback) {
+        try {
+            if (blockElementCallback(el, ev)) {
+                return true;
+            }
+        } catch (err) {
+            logger.critical('Error while checking element in blockElementCallback', err);
+            return true;
+        }
+    }
+
+    if (blockSelectors && blockSelectors.length) {
+        // programmatically prevent tracking of elements that match CSS selectors
+        for (i = 0; i < blockSelectors.length; i++) {
+            var sel = blockSelectors[i];
+            try {
+                if (el['matches'](sel)) {
+                    return true;
+                }
+            } catch (err) {
+                logger.critical('Error while checking selector: ' + sel, err);
+            }
+        }
+    }
+
+    // allow users to programmatically prevent tracking of elements by adding default classes such as 'mp-no-track'
+    var classes = getClasses(el);
+    for (i = 0; i < OPT_OUT_CLASSES.length; i++) {
+        if (classes[OPT_OUT_CLASSES[i]]) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
 /*
  * Check whether a DOM node has nodeType Node.ELEMENT_NODE
  * @param {Node} node - node to check
@@ -336,11 +422,16 @@ function shouldTrackDomEvent(el, ev) {
  * 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
+ * @param {Array<string>} allowSelectors - CSS selectors for elements that should be included
  * @returns {boolean} whether the element should be tracked
  */
-function shouldTrackElement(el) {
+function shouldTrackElementDetails(el, ev, allowElementCallback, allowSelectors) {
     var i;
 
+    if (!isElementAllowed(el, ev, allowElementCallback, allowSelectors)) {
+        return false;
+    }
+
     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++) {
@@ -428,7 +519,7 @@ export {
     getSafeText,
     logger,
     minDOMApisSupported,
-    shouldTrackDomEvent, shouldTrackElement, shouldTrackValue,
+    shouldTrackDomEvent, shouldTrackElementDetails, 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.59.0'
+    LIB_VERSION: '2.60.0'
 };
 
 export default Config;

package/src/mixpanel-persistence.js

@@ -345,8 +345,12 @@ MixpanelPersistence.prototype._add_to_people_queue = function(queue, data) {
                 if (!(k in union_q)) {
                     union_q[k] = [];
                 }
-                // We may send duplicates, the server will dedup them.
-                union_q[k] = union_q[k].concat(v);
+                // Prevent duplicate values
+                _.each(v, function(item) {
+                    if (!_.include(union_q[k], item)) {
+                        union_q[k].push(item);
+                    }
+                });
             }
         });
         this._pop_from_people_queue(UNSET_ACTION, q_data);