@openreplay/tracker 16.2.0 → 16.2.2-beta.19

package/dist/cjs/entry.js

@@ -4046,6 +4046,7 @@ function ConstructedStyleSheets (app) {
             return replace.call(this, text).then((sheet) => {
                 const sheetID = styleSheetIDMap.get(this);
                 if (sheetID) {
+                    console.log('replace');
                     app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
                 }
                 return sheet;
@@ -4055,6 +4056,7 @@ function ConstructedStyleSheets (app) {
         context.CSSStyleSheet.prototype.replaceSync = function (text) {
             const sheetID = styleSheetIDMap.get(this);
             if (sheetID) {
+                console.log('replaceSync');
                 app.send(AdoptedSSReplaceURLBased(sheetID, text, app.getBaseHref()));
             }
             return replaceSync.call(this, text);
@@ -4697,11 +4699,52 @@ class IFrameOffsets {
 
 var InlineCssMode;
 (function (InlineCssMode) {
-    InlineCssMode[InlineCssMode["None"] = 0] = "None";
-    InlineCssMode[InlineCssMode["RemoteOnly"] = 1] = "RemoteOnly";
-    InlineCssMode[InlineCssMode["RemoteWithForceFetch"] = 2] = "RemoteWithForceFetch";
-    InlineCssMode[InlineCssMode["All"] = 3] = "All";
+    /** default behavior -- will parse and cache the css file on backend */
+    InlineCssMode[InlineCssMode["Disabled"] = 0] = "Disabled";
+    /** will attempt to record the linked css file as AdoptedStyleSheet object */
+    InlineCssMode[InlineCssMode["Inline"] = 1] = "Inline";
+    /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+    InlineCssMode[InlineCssMode["InlineFetched"] = 2] = "InlineFetched";
+    /** will fetch the file, then save it as plain css inside <style> node */
+    InlineCssMode[InlineCssMode["PlainFetched"] = 3] = "PlainFetched";
 })(InlineCssMode || (InlineCssMode = {}));
+function getInlineOptions(mode) {
+    switch (mode) {
+        case InlineCssMode.Inline:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: false,
+                    forcePlain: false,
+                },
+            };
+        case InlineCssMode.InlineFetched:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: true,
+                    forcePlain: false,
+                },
+            };
+        case InlineCssMode.PlainFetched:
+            return {
+                inlineRemoteCss: true,
+                inlinerOptions: {
+                    forceFetch: true,
+                    forcePlain: true,
+                },
+            };
+        case InlineCssMode.Disabled:
+        default:
+            return {
+                inlineRemoteCss: false,
+                inlinerOptions: {
+                    forceFetch: false,
+                    forcePlain: false,
+                },
+            };
+    }
+}
 const attachShadowNativeFn = IN_BROWSER ? Element.prototype.attachShadow : () => new ShadowRoot();
 class TopObserver extends Observer {
     constructor(params) {
@@ -4710,7 +4753,11 @@ class TopObserver extends Observer {
             disableSprites: false,
             inlineCss: 0,
         }, params.options);
-        super(params.app, true, opts);
+        const observerOptions = {
+            disableSprites: opts.disableSprites,
+            ...getInlineOptions(opts.inlineCss)
+        };
+        super(params.app, true, observerOptions);
         this.iframeOffsets = new IFrameOffsets();
         this.contextCallbacks = [];
         // Attached once per Tracker instance
@@ -5130,43 +5177,6 @@ function getTimezone() {
     return `UTC${sign}${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
 }
 const delay = (ms) => new Promise((res) => setTimeout(res, ms));
-function getInlineOptions(mode) {
-    switch (mode) {
-        case InlineCssMode.RemoteOnly:
-            return {
-                inlineRemoteCss: true,
-                inlinerOptions: {
-                    forceFetch: false,
-                    forcePlain: false,
-                },
-            };
-        case InlineCssMode.RemoteWithForceFetch:
-            return {
-                inlineRemoteCss: true,
-                inlinerOptions: {
-                    forceFetch: true,
-                    forcePlain: false,
-                },
-            };
-        case InlineCssMode.All:
-            return {
-                inlineRemoteCss: true,
-                inlinerOptions: {
-                    forceFetch: true,
-                    forcePlain: true,
-                },
-            };
-        case InlineCssMode.None:
-        default:
-            return {
-                inlineRemoteCss: false,
-                inlinerOptions: {
-                    forceFetch: false,
-                    forcePlain: false,
-                },
-            };
-    }
-}
 const proto = {
     // ask if there are any tabs alive
     ask: 'never-gonna-give-you-up',
@@ -5198,7 +5208,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '16.2.0'; // TODO: version compatability check inside each plugin.
+        this.version = '16.2.2-beta.19'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5521,19 +5531,6 @@ class App {
         this.onUxtCb = [];
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
-        this.inlineCss = getInlineOptions(options.inlineCss ?? 0);
-        if (Object.keys(options).findIndex((k) => ['fixedCanvasScaling', 'disableCanvas'].includes(k)) !==
-            -1) {
-            console.warn('Openreplay: canvas options are moving to separate key "canvas" in next update. Please update your configuration.');
-            options = {
-                ...options,
-                canvas: {
-                    __save_canvas_locally: options.__save_canvas_locally,
-                    fixedCanvasScaling: options.fixedCanvasScaling,
-                    disableCanvas: options.disableCanvas,
-                },
-            };
-        }
         this.networkOptions = options.network;
         const defaultOptions = {
             revID: '',
@@ -5548,13 +5545,10 @@ class App {
             __is_snippet: false,
             __debug_report_edp: null,
             __debug__: LogLevel.Silent,
-            __save_canvas_locally: false,
             localStorage: null,
             sessionStorage: null,
             forceSingleTab: false,
             assistSocketHost: '',
-            fixedCanvasScaling: false,
-            disableCanvas: false,
             captureIFrames: true,
             obscureTextEmails: false,
             obscureTextNumbers: false,
@@ -5592,7 +5586,7 @@ class App {
             forceNgOff: Boolean(options.forceNgOff),
             maintainer: this.options.nodes?.maintainer,
         });
-        this.observer = new TopObserver({ app: this, options: { ...options, ...this.inlineCss } });
+        this.observer = new TopObserver({ app: this, options });
         this.ticker = new Ticker(this);
         this.ticker.attach(() => this.commit());
         this.debug = new Logger(this.options.__debug__);
@@ -8049,60 +8043,107 @@ function Viewport (app) {
     app.ticker.attach(sendSetViewportSize, 5, false);
 }
 
-function CSSRules (app) {
-    if (app === null) {
+function CSSRules (app, opts) {
+    if (app === null)
         return;
-    }
     if (!window.CSSStyleSheet) {
         app.send(TechnicalInfo('no_stylesheet_prototype_in_window', ''));
         return;
     }
+    // Track CSS rule snapshots by sheetID:index
+    const ruleSnapshots = new Map();
+    let checkInterval = null;
+    const checkIntervalMs = opts.checkCssInterval || 200; // Check every 200ms
+    // Check all rules for changes
+    function checkRuleChanges() {
+        for (let i = 0; i < document.styleSheets.length; i++) {
+            try {
+                const sheet = document.styleSheets[i];
+                const sheetID = styleSheetIDMap.get(sheet);
+                if (!sheetID)
+                    continue;
+                // Check each rule in the sheet
+                for (let j = 0; j < sheet.cssRules.length; j++) {
+                    try {
+                        const rule = sheet.cssRules[j];
+                        const key = `${sheetID}:${j}`;
+                        const newText = rule.cssText;
+                        const oldText = ruleSnapshots.get(key);
+                        if (oldText !== newText) {
+                            // Rule is new or changed
+                            if (oldText !== undefined) {
+                                // Rule changed - send update
+                                app.send(AdoptedSSDeleteRule(sheetID, j));
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            else {
+                                // Rule added - send insert
+                                app.send(AdoptedSSInsertRuleURLBased(sheetID, newText, j, app.getBaseHref()));
+                            }
+                            ruleSnapshots.set(key, newText);
+                        }
+                    }
+                    catch (e) {
+                        /* Skip inaccessible rules */
+                    }
+                }
+                // Check for deleted rules
+                const keysToCheck = Array.from(ruleSnapshots.keys()).filter((key) => key.startsWith(`${sheetID}:`));
+                for (const key of keysToCheck) {
+                    const index = parseInt(key.split(':')[1], 10);
+                    if (index >= sheet.cssRules.length) {
+                        ruleSnapshots.delete(key);
+                    }
+                }
+            }
+            catch (e) {
+                /* Skip inaccessible sheets */
+            }
+        }
+    }
+    // Standard API hooks
     const sendInsertDeleteRule = app.safe((sheet, index, rule) => {
         const sheetID = styleSheetIDMap.get(sheet);
-        if (!sheetID) {
-            // OK-case. Sheet haven't been registered yet. Rules will be sent on registration.
+        if (!sheetID)
             return;
-        }
         if (typeof rule === 'string') {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, rule, index, app.getBaseHref()));
+            ruleSnapshots.set(`${sheetID}:${index}`, rule);
         }
         else {
             app.send(AdoptedSSDeleteRule(sheetID, index));
+            ruleSnapshots.delete(`${sheetID}:${index}`);
         }
     });
-    // TODO: proper rule insertion/removal (how?)
     const sendReplaceGroupingRule = app.safe((rule) => {
         let topmostRule = rule;
-        while (topmostRule.parentRule) {
+        while (topmostRule.parentRule)
             topmostRule = topmostRule.parentRule;
-        }
         const sheet = topmostRule.parentStyleSheet;
-        if (!sheet) {
-            app.debug.warn('No parent StyleSheet found for', topmostRule, rule);
+        if (!sheet)
             return;
-        }
         const sheetID = styleSheetIDMap.get(sheet);
-        if (!sheetID) {
-            app.debug.warn('No sheedID found for', sheet, styleSheetIDMap);
+        if (!sheetID)
             return;
-        }
         const cssText = topmostRule.cssText;
-        const ruleList = sheet.cssRules;
-        const idx = Array.from(ruleList).indexOf(topmostRule);
+        const idx = Array.from(sheet.cssRules).indexOf(topmostRule);
         if (idx >= 0) {
             app.send(AdoptedSSInsertRuleURLBased(sheetID, cssText, idx, app.getBaseHref()));
-            app.send(AdoptedSSDeleteRule(sheetID, idx + 1)); // Remove previous clone
-        }
-        else {
-            app.debug.warn('Rule index not found in', sheet, topmostRule);
+            app.send(AdoptedSSDeleteRule(sheetID, idx + 1));
+            ruleSnapshots.set(`${sheetID}:${idx}`, cssText);
         }
     });
+    // Patch prototype methods
     const patchContext = app.safe((context) => {
+        if (context.__css_tracking_patched__)
+            return;
+        context.__css_tracking_patched__ = true;
         const { insertRule, deleteRule } = context.CSSStyleSheet.prototype;
         const { insertRule: groupInsertRule, deleteRule: groupDeleteRule } = context.CSSGroupingRule.prototype;
         context.CSSStyleSheet.prototype.insertRule = function (rule, index = 0) {
-            sendInsertDeleteRule(this, index, rule);
-            return insertRule.call(this, rule, index);
+            const result = insertRule.call(this, rule, index);
+            sendInsertDeleteRule(this, result, rule);
+            return result;
         };
         context.CSSStyleSheet.prototype.deleteRule = function (index) {
             sendInsertDeleteRule(this, index);
@@ -8113,33 +8154,50 @@ function CSSRules (app) {
             sendReplaceGroupingRule(this);
             return result;
         };
-        context.CSSGroupingRule.prototype.deleteRule = function (index = 0) {
+        context.CSSGroupingRule.prototype.deleteRule = function (index) {
             const result = groupDeleteRule.call(this, index);
             sendReplaceGroupingRule(this);
             return result;
         };
     });
+    // Apply patches
     patchContext(window);
     app.observer.attachContextCallback(patchContext);
+    // Track style nodes
     app.nodes.attachNodeCallback((node) => {
-        if (!hasTag(node, 'style') || !node.sheet) {
+        if (!hasTag(node, 'style') || !node.sheet)
+            return;
+        if (node.textContent !== null && node.textContent.trim().length > 0)
             return;
-        }
-        if (node.textContent !== null && node.textContent.trim().length > 0) {
-            return; // Non-virtual styles captured by the observer as a text
-        }
         const nodeID = app.nodes.getID(node);
-        if (!nodeID) {
+        if (!nodeID)
             return;
-        }
         const sheet = node.sheet;
         const sheetID = nextID();
         styleSheetIDMap.set(sheet, sheetID);
         app.send(AdoptedSSAddOwner(sheetID, nodeID));
-        const rules = sheet.cssRules;
-        for (let i = 0; i < rules.length; i++) {
-            sendInsertDeleteRule(sheet, i, rules[i].cssText);
+        for (let i = 0; i < sheet.cssRules.length; i++) {
+            try {
+                sendInsertDeleteRule(sheet, i, sheet.cssRules[i].cssText);
+            }
+            catch (e) {
+                // Skip inaccessible rules
+            }
+        }
+    });
+    // Start checking and setup cleanup
+    function startChecking() {
+        if (checkInterval)
+            return;
+        checkInterval = window.setInterval(checkRuleChanges, checkIntervalMs);
+    }
+    setTimeout(startChecking, 50);
+    app.attachStopCallback(() => {
+        if (checkInterval) {
+            clearInterval(checkInterval);
+            checkInterval = null;
         }
+        ruleSnapshots.clear();
     });
 }
 
@@ -8355,6 +8413,152 @@ function isObject(thing) {
     return thing !== null && typeof thing === 'object';
 }
 
+const sensitiveParams = new Set([
+    "password",
+    "pass",
+    "pwd",
+    "mdp",
+    "token",
+    "bearer",
+    "jwt",
+    "api_key",
+    "api-key",
+    "apiKey",
+    "secret",
+    "ssn",
+    "zip",
+    "zipcode",
+    "x-api-key",
+    "www-authenticate",
+    "x-csrf-token",
+    "x-requested-with",
+    "x-forwarded-for",
+    "x-real-ip",
+    "cookie",
+    "authorization",
+    "auth",
+    "proxy-authorization",
+    "set-cookie",
+    "account_key",
+]);
+function numDigits(x) {
+    return (Math.log10((x ^ (x >> 31)) - (x >> 31)) | 0) + 1;
+}
+function obscure(value) {
+    if (typeof value === "number") {
+        const digits = numDigits(value);
+        return "9".repeat(digits);
+    }
+    if (typeof value === "string") {
+        return value.replace(/[^\f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff\s]/g, '*');
+    }
+    return value;
+}
+function filterHeaders(headers) {
+    const filteredHeaders = {};
+    if (Array.isArray(headers)) {
+        headers.forEach(({ name, value }) => {
+            if (sensitiveParams.has(name.toLowerCase())) {
+                filteredHeaders[name] = obscure(value);
+            }
+            else {
+                filteredHeaders[name] = value;
+            }
+        });
+    }
+    else {
+        for (const [key, value] of Object.entries(headers)) {
+            if (sensitiveParams.has(key.toLowerCase())) {
+                filteredHeaders[key] = obscure(value);
+            }
+            else {
+                filteredHeaders[key] = value;
+            }
+        }
+    }
+    return filteredHeaders;
+}
+function filterBody(body) {
+    if (!body) {
+        return body;
+    }
+    let parsedBody;
+    let isJSON = false;
+    try {
+        parsedBody = JSON.parse(body);
+        isJSON = true;
+    }
+    catch (e) {
+        // not json
+    }
+    if (isJSON) {
+        obscureSensitiveData(parsedBody);
+        return JSON.stringify(parsedBody);
+    }
+    else {
+        const isUrlSearch = typeof body === "string" && body.includes("?") && body.includes("=");
+        if (isUrlSearch) {
+            try {
+                const params = new URLSearchParams(body);
+                for (const key of params.keys()) {
+                    if (sensitiveParams.has(key.toLowerCase())) {
+                        const value = obscure(params.get(key));
+                        params.set(key, value);
+                    }
+                }
+                return params.toString();
+            }
+            catch (e) {
+                // not url query ?
+                return body;
+            }
+        }
+        else {
+            // not json or url query
+            return body;
+        }
+    }
+}
+function sanitizeObject(obj) {
+    obscureSensitiveData(obj);
+    return obj;
+}
+function obscureSensitiveData(obj) {
+    if (Array.isArray(obj)) {
+        obj.forEach(obscureSensitiveData);
+    }
+    else if (obj && typeof obj === "object") {
+        for (const key in obj) {
+            if (Object.hasOwn(obj, key)) {
+                if (sensitiveParams.has(key.toLowerCase())) {
+                    obj[key] = obscure(obj[key]);
+                }
+                else if (obj[key] !== null && typeof obj[key] === "object") {
+                    obscureSensitiveData(obj[key]);
+                }
+            }
+        }
+    }
+}
+function tryFilterUrl(url) {
+    if (!url)
+        return "";
+    try {
+        const urlObj = new URL(url);
+        if (urlObj.searchParams) {
+            for (const key of urlObj.searchParams.keys()) {
+                if (sensitiveParams.has(key.toLowerCase())) {
+                    urlObj.searchParams.set(key, "******");
+                }
+            }
+        }
+        return urlObj.toString();
+    }
+    catch (e) {
+        return url;
+    }
+}
+
 /**
  * I know we're not using most of the information from this class
  * but it can be useful in the future if we will decide to display more stuff in our ui
@@ -8386,13 +8590,18 @@ class NetworkMessage {
     }
     getMessage() {
         const { reqHs, resHs } = this.writeHeaders();
+        const reqBody = this.method === 'GET'
+            ? JSON.stringify(sanitizeObject(this.getData)) : filterBody(this.requestData);
         const request = {
-            headers: reqHs,
-            body: this.method === 'GET' ? JSON.stringify(this.getData) : this.requestData,
+            headers: filterHeaders(reqHs),
+            body: reqBody,
+        };
+        const response = {
+            headers: filterHeaders(resHs),
+            body: filterBody(this.response)
         };
-        const response = { headers: resHs, body: this.response };
         const messageInfo = this.sanitize({
-            url: this.url,
+            url: tryFilterUrl(this.url),
             method: this.method,
             status: this.status,
             request,
@@ -8708,9 +8917,10 @@ class ResponseProxyHandler {
         if (typeof this.resp.body.getReader !== 'function') {
             return;
         }
-        const _getReader = this.resp.body.getReader;
+        const clonedResp = this.resp.clone();
+        const _getReader = clonedResp.body.getReader;
         // @ts-ignore
-        this.resp.body.getReader = () => {
+        clonedResp.body.getReader = () => {
             const reader = _getReader.apply(this.resp.body);
             // when readyState is already 4,
             // it's not a chunked stream, or it had already been read.
@@ -9552,7 +9762,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '16.2.0',
+                trackerVersion: '16.2.2-beta.19',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9651,7 +9861,7 @@ class API {
         Mouse(app, options.mouse);
         // inside iframe, we ignore viewport scroll
         Scroll(app, this.crossdomainMode);
-        CSSRules(app);
+        CSSRules(app, options);
         ConstructedStyleSheets(app);
         Console(app, options);
         Exception(app, options);