@openreplay/tracker 16.2.0 → 16.2.1

package/dist/cjs/main/app/index.d.ts

@@ -13,6 +13,7 @@ import type { Options as SessOptions } from './session.js';
 import Session from './session.js';
 import Ticker from './ticker.js';
 import { MaintainerOptions } from './nodes/maintainer.js';
+export { InlineCssMode } from './observer/top_observer.js';
 export interface StartOptions {
     userID?: string;
     metadata?: Record<string, string>;
@@ -63,18 +64,12 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: ILogLevel;
-    /** @deprecated see canvas prop */
-    __save_canvas_locally?: boolean;
-    /** @deprecated see canvas prop */
-    fixedCanvasScaling?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
     /** Sometimes helps to prevent session breaking due to dict reset */
     disableStringDict?: boolean;
     assistSocketHost?: string;
-    /** @deprecated see canvas prop */
-    disableCanvas?: boolean;
     canvas: {
         disableCanvas?: boolean;
         /**
@@ -150,7 +145,7 @@ export default class App {
     private readonly startCallbacks;
     private readonly stopCallbacks;
     private readonly commitCallbacks;
-    readonly options: AppOptions;
+    readonly options: Options;
     readonly networkOptions?: NetworkOptions;
     private readonly revID;
     private activityState;
@@ -172,7 +167,6 @@ export default class App {
     private frameOderNumber;
     private features;
     private emptyBatchCounter;
-    private inlineCss;
     constructor(projectKey: string, sessionToken: string | undefined, options: Partial<Options>, signalError: (error: string, apis: string[]) => void, insideIframe: boolean);
     /** used by child iframes for crossdomain only */
     parentActive: boolean;
@@ -321,4 +315,3 @@ export default class App {
     trackWs(channelName: string): (msgType: string, data: string, dir: 'up' | 'down') => void;
     stop(stopWorker?: boolean): void;
 }
-export {};

package/dist/cjs/main/app/observer/observer.d.ts

@@ -1,7 +1,7 @@
 import App from '../index.js';
 interface Options {
-    inlineRemoteCss?: boolean;
     disableSprites?: boolean;
+    inlineRemoteCss?: boolean;
     inlinerOptions?: {
         forceFetch?: boolean;
         forcePlain?: boolean;

package/dist/cjs/main/app/observer/top_observer.d.ts

@@ -2,10 +2,14 @@ import Observer from './observer.js';
 import { Offset } from './iframe_offsets.js';
 import App from '../index.js';
 export declare enum InlineCssMode {
-    None = 0,
-    RemoteOnly = 1,
-    RemoteWithForceFetch = 2,
-    All = 3
+    /** default behavior -- will parse and cache the css file on backend */
+    Disabled = 0,
+    /** will attempt to record the linked css file as AdoptedStyleSheet object */
+    Inline = 1,
+    /** will fetch the file, then simulated AdoptedStyleSheets behavior programmaticaly for the replay */
+    InlineFetched = 2,
+    /** will fetch the file, then save it as plain css inside <style> node */
+    PlainFetched = 3
 }
 export interface Options {
     captureIFrames: boolean;
@@ -15,7 +19,7 @@ export interface Options {
      * we will try to parse the css text instead and send it as css rules set
      * can (and probably will) affect performance to certain degree,
      * especially if the css itself is crossdomain
-     * @default false
+     * @default InlineCssMode.None = 0
      * */
     inlineCss: InlineCssMode;
 }

package/dist/lib/entry.js

@@ -4693,11 +4693,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) {
@@ -4706,7 +4747,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
@@ -5126,43 +5171,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',
@@ -5194,7 +5202,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.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5517,19 +5525,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: '',
@@ -5544,13 +5539,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,
@@ -5588,7 +5580,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__);
@@ -8351,6 +8343,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
@@ -8382,13 +8520,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,
@@ -8704,9 +8847,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.
@@ -9548,7 +9692,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.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,