@openreplay/tracker 18.0.14-beta.2 → 18.0.15

package/dist/lib/index.js

@@ -1823,6 +1823,30 @@ class CanvasRecorder {
         this.MAX_QUEUE_SIZE = 50; // ~500 images max (50 batches × 10 images)
         this.pendingBatches = [];
         this.isProcessingQueue = false;
+        /**
+         * Reacts to a runtime sanitization change on a canvas: stop capturing if it
+         * just became masked, start if it just became visible. (Already-sent frames
+         * can't be retracted — escalation only stops future capture.)
+         */
+        this.resanitizeCanvas = (node, id) => {
+            if (!hasTag(node, 'canvas')) {
+                return;
+            }
+            const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id);
+            if (isIgnored) {
+                if (this.snapshots[id] || this.observers.has(id)) {
+                    const observer = this.observers.get(id);
+                    if (observer) {
+                        observer.disconnect();
+                        this.observers.delete(id);
+                    }
+                    this.cleanupCanvas(id);
+                }
+            }
+            else if (!this.snapshots[id] && !this.observers.has(id)) {
+                this.captureCanvas(node);
+            }
+        };
         this.restartTracking = () => {
             this.clear();
             this.app.nodes.scanTree(this.captureCanvas);
@@ -1926,6 +1950,7 @@ class CanvasRecorder {
         setTimeout(() => {
             this.app.nodes.scanTree(this.captureCanvas);
             this.app.nodes.attachNodeCallback(this.captureCanvas);
+            this.app.attachResanitizeCallback(this.resanitizeCanvas);
         }, 125);
     }
     sendSnaps(images, canvasId, createdAt) {
@@ -2810,6 +2835,120 @@ function ConstructedStyleSheets (app) {
     });
 }
 
+var SanitizeLevel;
+(function (SanitizeLevel) {
+    SanitizeLevel[SanitizeLevel["Plain"] = 0] = "Plain";
+    SanitizeLevel[SanitizeLevel["Obscured"] = 1] = "Obscured";
+    SanitizeLevel[SanitizeLevel["Hidden"] = 2] = "Hidden";
+})(SanitizeLevel || (SanitizeLevel = {}));
+const stringWiper = (input) => input
+    .trim()
+    .replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
+class Sanitizer {
+    constructor(params) {
+        // Node id -> level. Plain (0) is never stored; a missing entry means Plain.
+        // A map (not the old grow-only Sets) so levels can be raised and lowered.
+        this.levels = new Map();
+        this.app = params.app;
+        const defaultOptions = {
+            obscureTextEmails: true,
+            obscureTextNumbers: false,
+            privateMode: false,
+            domSanitizer: undefined,
+        };
+        this.privateMode = params.options?.privateMode ?? false;
+        this.options = Object.assign(defaultOptions, params.options);
+    }
+    // Pure recomputation of a node's level from the live DOM + parent level.
+    // Reading current state on every call is what lets resanitize() pick up
+    // runtime attribute/domSanitizer changes.
+    computeLevel(node, parentLevel) {
+        if (this.options.privateMode) {
+            if (isElementNode(node) && !hasOpenreplayAttribute(node, 'unmask')) {
+                return SanitizeLevel.Obscured;
+            }
+            if (isTextNode(node) && !hasOpenreplayAttribute(node.parentNode, 'unmask')) {
+                return SanitizeLevel.Obscured;
+            }
+        }
+        let level = SanitizeLevel.Plain;
+        if (parentLevel >= SanitizeLevel.Obscured ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'masked') || hasOpenreplayAttribute(node, 'obscured')))) {
+            level = SanitizeLevel.Obscured;
+        }
+        if (parentLevel === SanitizeLevel.Hidden ||
+            (isElementNode(node) &&
+                (hasOpenreplayAttribute(node, 'htmlmasked') || hasOpenreplayAttribute(node, 'hidden')))) {
+            level = SanitizeLevel.Hidden;
+        }
+        if (this.options.domSanitizer !== undefined && isElementNode(node)) {
+            const sanitizeLevel = this.options.domSanitizer(node);
+            if (sanitizeLevel === SanitizeLevel.Obscured && level < SanitizeLevel.Obscured) {
+                level = SanitizeLevel.Obscured;
+            }
+            if (sanitizeLevel === SanitizeLevel.Hidden) {
+                level = SanitizeLevel.Hidden;
+            }
+        }
+        return level;
+    }
+    getLevel(id) {
+        return this.levels.get(id) ?? SanitizeLevel.Plain;
+    }
+    // Sets a node's level (either direction) and returns the previous one.
+    setLevel(id, level) {
+        const prev = this.getLevel(id);
+        if (level === SanitizeLevel.Plain) {
+            this.levels.delete(id);
+        }
+        else {
+            this.levels.set(id, level);
+        }
+        return prev;
+    }
+    handleNode(id, parentID, node) {
+        const level = this.computeLevel(node, this.getLevel(parentID));
+        // Escalate-only: commits never lower a level, only resanitize/setLevel do.
+        if (level > this.getLevel(id)) {
+            this.setLevel(id, level);
+        }
+    }
+    sanitize(id, data) {
+        if (this.getLevel(id) >= SanitizeLevel.Obscured) {
+            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
+            return stringWiper(data);
+        }
+        if (this.options.obscureTextNumbers) {
+            data = data.replace(/\d/g, '0');
+        }
+        if (this.options.obscureTextEmails) {
+            data = data.replace(/^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w{2,3}$/g, (email) => {
+                const [name, domain] = email.split('@');
+                const [domainName, host] = domain.split('.');
+                return `${stars(name)}@${stars(domainName)}.${stars(host)}`;
+            });
+        }
+        return data;
+    }
+    isObscured(id) {
+        return this.getLevel(id) >= SanitizeLevel.Obscured;
+    }
+    isHidden(id) {
+        return this.getLevel(id) === SanitizeLevel.Hidden;
+    }
+    getInnerTextSecure(el) {
+        const id = this.app.nodes.getID(el);
+        if (!id) {
+            return '';
+        }
+        return this.sanitize(id, el.innerText);
+    }
+    clear() {
+        this.levels.clear();
+    }
+}
+
 const iconCache = {};
 const svgUrlCache = {};
 async function parseUseEl(useElement, mode, domParser) {
@@ -3399,6 +3538,100 @@ class Observer {
         beforeCommit(this.app.nodes.getID(node));
         this.commitNodes(true);
     }
+    /**
+     * Re-evaluates sanitization for every tracked node in `root`'s subtree against
+     * the current DOM and re-emits whatever changed. Pass the highest node you
+     * changed (or the document root) so inherited levels propagate correctly.
+     */
+    resanitizeSubtree(root) {
+        if (!isObservable(root)) {
+            return;
+        }
+        const parent = root.parentNode;
+        const parentId = parent !== null ? this.app.nodes.getID(parent) : undefined;
+        const parentLevel = parentId !== undefined ? this.app.sanitizer.getLevel(parentId) : SanitizeLevel.Plain;
+        this.resanitizeNode(root, parentLevel);
+    }
+    resanitizeNode(node, parentLevel) {
+        if (isIgnored(node)) {
+            return;
+        }
+        const id = this.app.nodes.getID(node);
+        if (id === undefined) {
+            // Untracked (new, or under a hidden ancestor): the live observer handles it.
+            return;
+        }
+        const newLevel = this.app.sanitizer.computeLevel(node, parentLevel);
+        const prevLevel = this.app.sanitizer.getLevel(id);
+        const wasHidden = prevLevel === SanitizeLevel.Hidden;
+        const willHidden = newLevel === SanitizeLevel.Hidden;
+        // Crossing the hidden boundary changes the rendered structure (placeholder vs
+        // real subtree), so rebuild rather than re-emit.
+        if (wasHidden !== willHidden) {
+            this.recreateSubtree(node);
+            return;
+        }
+        if (willHidden) {
+            return;
+        }
+        // Plain <-> Obscured: same structure, only leaf content changes.
+        if (prevLevel !== newLevel) {
+            this.app.sanitizer.setLevel(id, newLevel);
+            this.reemitNode(id, node);
+        }
+        for (let child = node.firstChild; child !== null; child = child.nextSibling) {
+            this.resanitizeNode(child, newLevel);
+        }
+    }
+    // Destroys the node player-side and re-emits its subtree from scratch (new ids)
+    // so it materializes at the freshly-computed level.
+    recreateSubtree(node) {
+        const id = this.app.nodes.getID(node);
+        if (id === undefined) {
+            return;
+        }
+        this.app.send(RemoveNode(id));
+        this.clearSubtreeRegistration(node);
+        this.bindTree(node);
+        this.commitNodes();
+    }
+    clearSubtreeRegistration(node) {
+        const clearOne = (n) => {
+            const oldId = this.app.nodes.getID(n);
+            if (oldId !== undefined) {
+                this.app.sanitizer.setLevel(oldId, SanitizeLevel.Plain);
+            }
+            this.app.nodes.unregisterNode(n);
+        };
+        const walker = document.createTreeWalker(node, NodeFilter.SHOW_ELEMENT + NodeFilter.SHOW_TEXT, {
+            acceptNode: (n) => isIgnored(n) || this.app.nodes.getID(n) === undefined
+                ? NodeFilter.FILTER_REJECT
+                : NodeFilter.FILTER_ACCEPT,
+        }, 
+        // @ts-ignore
+        false);
+        // Collect first, then clear: unregistering mutates the ids the walker reads.
+        const subtree = [];
+        while (walker.nextNode()) {
+            subtree.push(walker.currentNode);
+        }
+        clearOne(node);
+        subtree.forEach(clearOne);
+    }
+    reemitNode(id, node) {
+        if (isTextNode(node)) {
+            const parent = node.parentNode;
+            if (parent !== null && isElementNode(parent)) {
+                // re-runs sanitize() at the level we just set
+                this.sendNodeData(id, parent, node.data);
+            }
+            return;
+        }
+        if (isElementNode(node)) {
+            // inputs/images/canvas re-emit their own payload via registered callbacks
+            this.app.callResanitizeCallbacks(node, id);
+        }
+    }
     disconnect() {
         // THEORY S3: a disconnect may discard MutationRecords still queued by the
         // browser. takeRecords() drains them — they would be discarded by
@@ -3748,94 +3981,6 @@ class TopObserver extends Observer {
     }
 }
 
-var SanitizeLevel;
-(function (SanitizeLevel) {
-    SanitizeLevel[SanitizeLevel["Plain"] = 0] = "Plain";
-    SanitizeLevel[SanitizeLevel["Obscured"] = 1] = "Obscured";
-    SanitizeLevel[SanitizeLevel["Hidden"] = 2] = "Hidden";
-})(SanitizeLevel || (SanitizeLevel = {}));
-const stringWiper = (input) => input
-    .trim()
-    .replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
-class Sanitizer {
-    constructor(params) {
-        this.obscured = new Set();
-        this.hidden = new Set();
-        this.app = params.app;
-        const defaultOptions = {
-            obscureTextEmails: true,
-            obscureTextNumbers: false,
-            privateMode: false,
-            domSanitizer: undefined,
-        };
-        this.privateMode = params.options?.privateMode ?? false;
-        this.options = Object.assign(defaultOptions, params.options);
-    }
-    handleNode(id, parentID, node) {
-        if (this.options.privateMode) {
-            if (isElementNode(node) && !hasOpenreplayAttribute(node, 'unmask')) {
-                return this.obscured.add(id);
-            }
-            if (isTextNode(node) && !hasOpenreplayAttribute(node.parentNode, 'unmask')) {
-                return this.obscured.add(id);
-            }
-        }
-        if (this.obscured.has(parentID) ||
-            (isElementNode(node) &&
-                (hasOpenreplayAttribute(node, 'masked') || hasOpenreplayAttribute(node, 'obscured')))) {
-            this.obscured.add(id);
-        }
-        if (this.hidden.has(parentID) ||
-            (isElementNode(node) &&
-                (hasOpenreplayAttribute(node, 'htmlmasked') || hasOpenreplayAttribute(node, 'hidden')))) {
-            this.hidden.add(id);
-        }
-        if (this.options.domSanitizer !== undefined && isElementNode(node)) {
-            const sanitizeLevel = this.options.domSanitizer(node);
-            if (sanitizeLevel === SanitizeLevel.Obscured) {
-                this.obscured.add(id);
-            }
-            if (sanitizeLevel === SanitizeLevel.Hidden) {
-                this.hidden.add(id);
-            }
-        }
-    }
-    sanitize(id, data) {
-        if (this.obscured.has(id)) {
-            // TODO: is it the best place to put trim() ? Might trimmed spaces be considered in layout in certain cases?
-            return stringWiper(data);
-        }
-        if (this.options.obscureTextNumbers) {
-            data = data.replace(/\d/g, '0');
-        }
-        if (this.options.obscureTextEmails) {
-            data = data.replace(/^\w+([+.-]\w+)*@\w+([.-]\w+)*\.\w{2,3}$/g, (email) => {
-                const [name, domain] = email.split('@');
-                const [domainName, host] = domain.split('.');
-                return `${stars(name)}@${stars(domainName)}.${stars(host)}`;
-            });
-        }
-        return data;
-    }
-    isObscured(id) {
-        return this.obscured.has(id);
-    }
-    isHidden(id) {
-        return this.hidden.has(id);
-    }
-    getInnerTextSecure(el) {
-        const id = this.app.nodes.getID(el);
-        if (!id) {
-            return '';
-        }
-        return this.sanitize(id, el.innerText);
-    }
-    clear() {
-        this.obscured.clear();
-        this.hidden.clear();
-    }
-}
-
 const tokenSeparator = '_$_';
 class Session {
     constructor(params) {
@@ -4087,6 +4232,8 @@ class App {
     constructor(projectKey, sessionToken, options, signalError, insideIframe) {
         this.signalError = signalError;
         this.insideIframe = insideIframe;
+        // Registered by input/img/canvas to re-emit a node when its level changes.
+        this.resanitizeCallbacks = [];
         this.messages = [];
         /**
          * we need 2 buffers, so we don't lose anything
@@ -4098,7 +4245,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '18.0.14-beta.2'; // TODO: version compatability check inside each plugin.
+        this.version = '18.0.15'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -4629,6 +4776,26 @@ class App {
         this.restartCanvasTracking = () => {
             this.canvasRecorder?.restartTracking();
         };
+        this.attachResanitizeCallback = (cb) => {
+            this.resanitizeCallbacks.push(cb);
+        };
+        this.callResanitizeCallbacks = (node, id) => {
+            this.resanitizeCallbacks.forEach((cb) => cb(node, id));
+        };
+        this.resanitize = (el) => {
+            const root = el ?? (IN_BROWSER ? document.documentElement : undefined);
+            if (!root) {
+                return;
+            }
+            this.observer.resanitizeSubtree(root);
+        };
+        this.checkSanitization = (el) => {
+            const id = this.nodes.getID(el);
+            if (id === undefined) {
+                return undefined;
+            }
+            return this.sanitizer.getLevel(id);
+        };
         this.flushBuffer = async (buffer) => {
             return new Promise((res, reject) => {
                 if (buffer.length === 0) {
@@ -6324,6 +6491,12 @@ function Img (app) {
         sendImgAttrs(node);
         observer.observe(node, { attributes: true, attributeFilter: ['src', 'srcset'] });
     });
+    // On a runtime level change, re-evaluate placeholder vs real src for this image.
+    app.attachResanitizeCallback((node) => {
+        if (hasTag(node, 'img')) {
+            sendImgAttrs(node);
+        }
+    });
 }
 
 const INPUT_TYPES = [
@@ -6510,6 +6683,13 @@ function Input (app, opts) {
         }
         app.send(InputChange(id, value, mask !== 0, label, hesitationTime, inputTime));
     }
+    // Re-emit a field's value when its sanitization level changes at runtime.
+    // getInputValue() reads the current level, so re-sending applies the new mask.
+    app.attachResanitizeCallback((node, id) => {
+        if (isTextFieldElement(node) || hasTag(node, 'select')) {
+            sendInputValue(id, node);
+        }
+    });
     app.nodes.attachNodeCallback(app.safe((node) => {
         const id = app.nodes.getID(node);
         if (id === undefined) {
@@ -9400,7 +9580,7 @@ class ConstantProperties {
             user_id: this.user_id,
             distinct_id: this.deviceId,
             sdk_edition: 'web',
-            sdk_version: '18.0.14-beta.2',
+            sdk_version: '18.0.15',
             timezone: getUTCOffsetString(),
             search_engine: this.searchEngine,
         };
@@ -10102,7 +10282,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '18.0.14-beta.2',
+                trackerVersion: '18.0.15',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -10114,6 +10294,31 @@ class API {
             }
             this.app.restartCanvasTracking();
         };
+        /**
+         * Re-evaluates sanitization against the current DOM and re-emits whatever
+         * changed, updating already-recorded nodes mid-session. Call after toggling
+         * `data-openreplay-*` attributes or after changing whatever your `domSanitizer`
+         * keys on (class/id/etc).
+         *
+         * @param el - the highest node you changed; omit to re-scan the whole document;
+         * scanning the entire doc is O(dom size)
+         * */
+        this.resanitize = (el) => {
+            if (this.app === null) {
+                return;
+            }
+            this.app.resanitize(el);
+        };
+        /**
+         * Returns the sanitization level the tracker currently has for a node
+         * (0 = Plain, 1 = Obscured, 2 = Hidden), or undefined if it isn't tracked.
+         * */
+        this.checkSanitization = (el) => {
+            if (this.app === null) {
+                return undefined;
+            }
+            return this.app.checkSanitization(el);
+        };
         this.getSessionURL = (options) => {
             if (this.app === null) {
                 return undefined;
@@ -10127,7 +10332,10 @@ class API {
             }
         };
         this.identify = this.setUserID;
-        this.track = this.analytics?.track;
+        // Delegates at call time: `this.analytics` is assigned in the constructor body,
+        // which runs AFTER field initializers, so binding it here directly would always
+        // capture `undefined`.
+        this.track = (eventName, properties, options) => this.analytics?.track(eventName, properties, options);
         this.userID = (id) => {
             deprecationWarn("'userID' method", "'setUserID' method", '/');
             this.setUserID(id);