@openreplay/tracker 15.1.3 → 15.2.1

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

@@ -13,6 +13,7 @@ import type { Options as TimingOptions } from './modules/timing.js';
 import type { Options as NetworkOptions } from './modules/network.js';
 import type { MouseHandlerOptions } from './modules/mouse.js';
 import type { SessionInfo } from './app/session.js';
+import type { Options as ViewportOptions } from './modules/viewport.js';
 import type { StartOptions } from './app/index.js';
 import type { StartPromiseReturn } from './app/index.js';
 export type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & InputOptions & PerformanceOptions & TimingOptions> & {
@@ -28,6 +29,7 @@ export type Options = Partial<AppOptions & ConsoleOptions & ExceptionOptions & I
         onFlagsLoad?: (flags: IFeatureFlag[]) => void;
     };
     __DISABLE_SECURE_MODE?: boolean;
+    urls?: Partial<ViewportOptions>;
 };
 export default class API {
     readonly options: Partial<Options>;

package/dist/cjs/main/modules/viewport.d.ts

@@ -1,2 +1,6 @@
 import type App from '../app/index.js';
-export default function (app: App): void;
+export interface Options {
+    urlSanitizer?: (url: string) => string;
+    titleSanitizer?: (title: string) => string;
+}
+export default function (app: App, options?: Options): void;

package/dist/lib/entry.js

@@ -4629,7 +4629,7 @@ class Session {
     }
 }
 
-function wrap(callback, n) {
+function wrap$1(callback, n) {
     let t = 0;
     return () => {
         if (t++ >= n) {
@@ -4657,7 +4657,7 @@ class Ticker {
         if (useSafe) {
             callback = this.app.safe(callback);
         }
-        this.callbacks.unshift(n ? wrap(callback, n) : callback) - 1;
+        this.callbacks.unshift(n ? wrap$1(callback, n) : callback) - 1;
     }
     start() {
         if (this.timer === null) {
@@ -4733,7 +4733,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '15.1.3'; // TODO: version compatability check inside each plugin.
+        this.version = '15.2.1'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.bc = null;
@@ -5371,6 +5371,7 @@ class App {
             }
         }
         this.emptyBatchCounter = 0;
+        console.log('messages', this.messages.join(', '));
         try {
             requestIdleCb(() => {
                 this.messages.unshift(Timestamp(this.timestamp()), TabData(this.session.getTabId()));
@@ -7528,15 +7529,19 @@ function Scroll (app, insideIframe) {
     }, 5, false);
 }
 
-function Viewport (app) {
+function Viewport (app, options) {
     let url, width, height;
     let navigationStart;
     let referrer = document.referrer;
+    const urlSanitizer = options?.urlSanitizer || ((u) => u);
+    const titleSanitizer = options?.titleSanitizer || ((t) => t);
     const sendSetPageLocation = app.safe(() => {
         const { URL } = document;
         if (URL !== url) {
             url = URL;
-            app.send(SetPageLocation(url, referrer, navigationStart, document.title));
+            const sanitizedURL = urlSanitizer(url);
+            const title = titleSanitizer(document.title);
+            app.send(SetPageLocation(sanitizedURL, referrer, navigationStart, title));
             navigationStart = 0;
             referrer = url;
         }
@@ -8005,6 +8010,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
@@ -8036,13 +8187,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,
@@ -8128,42 +8284,47 @@ const genStringBody = (body) => {
         return null;
     }
     let result;
-    if (typeof body === 'string') {
-        if (body[0] === '{' || body[0] === '[') {
-            result = body;
+    try {
+        if (typeof body === 'string') {
+            if (body[0] === '{' || body[0] === '[') {
+                result = body;
+            }
+            // 'a=1&b=2' => try to parse as query
+            const arr = body.split('&');
+            if (arr.length === 1) {
+                // not a query, parse as original string
+                result = body;
+            }
+            else {
+                // 'a=1&b=2&c' => parse as query
+                result = arr.join(',');
+            }
         }
-        // 'a=1&b=2' => try to parse as query
-        const arr = body.split('&');
-        if (arr.length === 1) {
-            // not a query, parse as original string
+        else if (isIterable(body)) {
+            // FormData or URLSearchParams or Array
+            const arr = [];
+            for (const [key, value] of body) {
+                arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`);
+            }
+            result = arr.join(',');
+        }
+        else if (body instanceof Blob ||
+            body instanceof ReadableStream ||
+            body instanceof ArrayBuffer) {
+            result = 'byte data';
+        }
+        else if (isPureObject(body)) {
+            // overriding ArrayBufferView which is not convertable to string
             result = body;
         }
         else {
-            // 'a=1&b=2&c' => parse as query
-            result = arr.join(',');
-        }
-    }
-    else if (isIterable(body)) {
-        // FormData or URLSearchParams or Array
-        const arr = [];
-        for (const [key, value] of body) {
-            arr.push(`${key}=${typeof value === 'string' ? value : '[object Object]'}`);
+            result = `can't parse body ${typeof body}`;
         }
-        result = arr.join(',');
-    }
-    else if (body instanceof Blob ||
-        body instanceof ReadableStream ||
-        body instanceof ArrayBuffer) {
-        result = 'byte data';
+        return result;
     }
-    else if (isPureObject(body)) {
-        // overriding ArrayBufferView which is not convertable to string
-        result = body;
+    catch (_) {
+        return "can't parse body";
     }
-    else {
-        result = `can't parse body ${typeof body}`;
-    }
-    return result;
 };
 const genGetDataByUrl = (url, getData = {}) => {
     if (!isPureObject(getData)) {
@@ -8358,9 +8519,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.
@@ -8805,10 +8967,17 @@ class XHRProxy {
     }
 }
 
-const getWarning = (api) => {
+const warn = (api) => {
     const str = `Openreplay: Can't find ${api} in global context.`;
     console.warn(str);
 };
+const OR_FLAG = Symbol('OpenReplayProxyOriginal');
+const isProxied = (fn) => !!fn && fn[OR_FLAG] !== undefined;
+const unwrap = (fn) => isProxied(fn) ? fn[OR_FLAG] : fn;
+const wrap = (proxy, orig) => {
+    proxy[OR_FLAG] = orig;
+    return proxy;
+};
 /**
  * Creates network proxies for XMLHttpRequest, fetch, and sendBeacon to intercept and monitor network requests and
  * responses.
@@ -8842,26 +9011,24 @@ function createNetworkProxy(context, ignoredHeaders, setSessionTokenHeader, sani
     if (!context)
         return;
     if (modules.xhr) {
-        if (context.XMLHttpRequest) {
-            context.XMLHttpRequest = XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-        }
+        const original = unwrap(context.XMLHttpRequest);
+        if (!original)
+            warn('XMLHttpRequest');
         else {
-            getWarning("XMLHttpRequest");
+            context.XMLHttpRequest = wrap(XHRProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher), original);
         }
     }
     if (modules.fetch) {
-        if (context.fetch) {
-            context.fetch = FetchProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher);
-        }
+        const original = unwrap(context.fetch);
+        if (!original)
+            warn('fetch');
         else {
-            getWarning("fetch");
+            context.fetch = wrap(FetchProxy.create(ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl, tokenUrlMatcher), original);
         }
     }
-    if (modules.beacon) {
-        if ((_a = context.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon) {
-            const origBeacon = context.navigator.sendBeacon;
-            context.navigator.sendBeacon = BeaconProxy.create(origBeacon, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl);
-        }
+    if (modules.beacon && ((_a = context.navigator) === null || _a === void 0 ? void 0 : _a.sendBeacon)) {
+        const original = unwrap(context.navigator.sendBeacon);
+        context.navigator.sendBeacon = wrap(BeaconProxy.create(original, ignoredHeaders, setSessionTokenHeader, sanitize, sendMessage, isServiceUrl), original);
     }
 }
 
@@ -9201,7 +9368,7 @@ class API {
         this.signalStartIssue = (reason, missingApi) => {
             const doNotTrack = this.checkDoNotTrack();
             console.log("Tracker couldn't start due to:", JSON.stringify({
-                trackerVersion: '15.1.3',
+                trackerVersion: '15.2.1',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,
@@ -9289,7 +9456,7 @@ class API {
         this.app = app;
         if (!this.crossdomainMode) {
             // no need to send iframe viewport data since its a node for us
-            Viewport(app);
+            Viewport(app, options.urls);
             // calculated in main window
             Connection(app);
             // while we can calculate it here, trying to compute it for all parts is hard