Better network sanitizer (#2969)

* tracker: improve network sanitization

* ui: fix hl image gen

* tracker: rm sanitizer thing

frontend/app/components/Session_/Highlight/HighlightPanel.tsx

@@ -111,7 +111,7 @@ function HighlightPanel({ onClose }: { onClose: () => void }) {
   const onSave = async () => {
     try {
       notesStore.setSaving(true)
-      const playerContainer = document.querySelector('iframe')?.contentWindow?.document.body;
+      const playerContainer = document.querySelector('iframe')?.contentWindow?.document;
       let thumbnail;
       if (playerContainer) {
         thumbnail = await elementToImage(playerContainer);
@@ -125,8 +125,8 @@ function HighlightPanel({ onClose }: { onClose: () => void }) {
         endAt: parseInt(uiPlayerStore.highlightSelection.endTs, 10),
         thumbnail,
       }
-      if (editNoteId) {
+      if (editNote) {
-        await notesStore.updateNote(editNoteId, note);
+        await notesStore.updateNote(editNote.noteId, note);
         toast.success('Highlight updated');
       } else {
         const sessionId = sessionStore.current.sessionId;
@@ -239,16 +239,21 @@ window.__debugElementToImage = (el) => elementToImage(el).then(img => {
   a.click();
 });
 
-function elementToImage(el) {
+function elementToImage(doc: Document) {
+  const el = doc.body;
   return import('html2canvas').then(({ default: html2canvas }) => {
+    const images = doc.querySelectorAll('img');
+    images.forEach((img) => {
+      img.setAttribute('crossorigin', 'Anonymous');
+    })
     return html2canvas(
       el,
       {
         scale: 1,
         allowTaint: true,
-        useCORS: false,
+        foreignObjectRendering: true,
+        useCORS: true,
         logging: true,
-        foreignObjectRendering: false,
         height: 900,
         width: 1200,
         x: 0,
@@ -263,4 +268,36 @@ function elementToImage(el) {
   })
 }
 
+const convertAllImagesToBase64 = (proxyURL, cloned) => {
+  const pendingImagesPromises = [];
+  const pendingPromisesData = [];
+
+  const images = cloned.getElementsByTagName('img');
+
+  for (let i = 0; i < images.length; i += 1) {
+    const promise = new Promise((resolve, reject) => {
+      pendingPromisesData.push({
+        index: i, resolve, reject,
+      });
+    });
+    pendingImagesPromises.push(promise);
+  }
+
+  for (let i = 0; i < images.length; i += 1) {
+    fetch(`${proxyURL}?url=${images[i].src}`)
+      .then((response) => response.json())
+      .then((data) => {
+        const pending = pendingPromisesData.find((p) => p.index === i);
+        images[i].src = data;
+        pending.resolve(data);
+      })
+      .catch((e) => {
+        const pending = pendingPromisesData.find((p) => p.index === i);
+        pending.reject(e);
+      });
+  }
+
+  return Promise.all(pendingImagesPromises);
+};
+
 export default observer(HighlightPanel);

tracker/tracker-assist/package.json

@@ -55,5 +55,5 @@
       "eslint --fix --quiet"
     ]
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.6.0"
 }

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "15.0.5",
+  "version": "15.0.6",
   "keywords": [
     "logging",
     "replay"
@@ -80,5 +80,5 @@
   "engines": {
     "node": ">=14.0"
   },
-  "packageManager": "yarn@4.5.1"
+  "packageManager": "yarn@4.6.0"
 }

tracker/tracker/src/main/modules/mouse.ts

@@ -10,8 +10,7 @@ function _getSelector(target: Element, document: Document, options?: MouseHandle
     root: document.body,
     seedMinLength: 3,
     optimizedMinLength: options?.minSelectorDepth || 2,
-    threshold: options?.nthThreshold || 1000,
+    maxNumberOfPathChecks: options?.maxOptimiseTries || 10_000,
-    maxNumberOfTries: options?.maxOptimiseTries || 10_000,
   })
 
   return selector

tracker/tracker/src/main/modules/network.ts

@@ -81,8 +81,8 @@ export default function (app: App, opts: Partial<Options> = {}) {
 
   const ignoreHeaders = options.ignoreHeaders
   const isHIgnored = Array.isArray(ignoreHeaders)
-    ? (name: string) => ignoreHeaders.includes(name)
+                     ? (name: string) => ignoreHeaders.includes(name)
-    : () => ignoreHeaders
+                     : () => ignoreHeaders
 
   const stHeader =
     options.sessionTokenHeader === true ? 'X-OpenReplay-SessionToken' : options.sessionTokenHeader
@@ -361,4 +361,4 @@ export default function (app: App, opts: Partial<Options> = {}) {
   if (options.captureInIframes) {
     app.observer.attachContextCallback(app.safe(patchWindow))
   }
-}
+}

tracker/tracker/src/main/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig-base.json",
   "compilerOptions": {
     "allowSyntheticDefaultImports": true,
-    "lib": ["es2020", "dom"],
+    "lib": ["es2022", "dom"],
     "declaration": true,
     "declarationDir": "../../dist/types",
   }

tracker/tracker/tsconfig-base.json

@@ -6,7 +6,7 @@
     "strictNullChecks": true,
     "alwaysStrict": false,
     "target": "es2020",
-    "lib": ["DOM", "ES2020"],
+    "lib": ["DOM", "ES2022"],
     "module": "ES2022",
     "moduleResolution":  "node",
     "esModuleInterop": true,