ui: swap html converter, fix tainted images map, forbid cors objects for highlight

frontend/app/components/AssistStats/pdfGenerator.ts

@@ -2,7 +2,7 @@ import { fileNameFormat } from 'App/utils';
 
 export const getPdf2 = async () => {
   // @ts-ignore
-  import('html2canvas').then(({ default: html2canvas }) => {
+  import('html2canvas-pro').then(({ default: html2canvas }) => {
     // @ts-ignore
     window.html2canvas = html2canvas;
 

frontend/app/components/Dashboard/components/WidgetForm/renderMap.ts

@@ -1,6 +1,6 @@
 export const renderClickmapThumbnail = () => {
     // @ts-ignore
-    return import('html2canvas').then(({ default: html2canvas }) => {
+    return import('html2canvas-pro').then(({ default: html2canvas }) => {
         // @ts-ignore
         window.html2canvas = html2canvas;
         const element = document.querySelector<HTMLIFrameElement>('#clickmap-render  * iframe').contentDocument.body

frontend/app/components/Session/Player/ClipPlayer/ClipPlayerContent.tsx

@@ -12,8 +12,6 @@ import styles from 'Components/Session_/playerBlock.module.css';
 import ClipPlayerOverlay from 'Components/Session/Player/ClipPlayer/ClipPlayerOverlay';
 import { observer } from 'mobx-react-lite';
 import { Icon } from 'UI';
-import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip';
-
 
 interface Props {
   session: Session;

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

@@ -240,36 +240,32 @@ window.__debugElementToImage = (el) => elementToImage(el).then(img => {
 });
 
 function elementToImage(doc: Document) {
-  const el = doc.body;
-  const srcMap = new WeakMap()
-  return import('html2canvas').then(({ default: html2canvas }) => {
-    const images = doc.querySelectorAll('img');
+  const el = doc.body
+  const srcMap = new WeakMap<HTMLImageElement, string>()
+  return import('html2canvas-pro').then(({ default: html2canvas }) => {
+    const images = doc.querySelectorAll('img')
     images.forEach((img) => {
-      srcMap.set(img, img.src);
-      img.src = ""
-    })
-    return html2canvas(
-      el,
-      {
-        scale: 1,
-        allowTaint: true,
-        foreignObjectRendering: false,
-        useCORS: false,
-        logging: true,
-        height: 900,
-        width: 1200,
-        x: 0,
-        y: 0,
+      const sameOrigin = new URL(img.src, location.href).origin === location.origin
+      if (!sameOrigin) {
+        srcMap.set(img, img.src)
+        img.src = ''
       }
-    ).then((canvas) => {
+    })
+    return html2canvas(el, {
+      scale: 1,
+      allowTaint: false,
+      foreignObjectRendering: false,
+      useCORS: true,
+      logging: false,
+    }).then((canvas) => {
       images.forEach((img) => {
-        img.src = srcMap.get(img)
+        if (srcMap.has(img)) img.src = srcMap.get(img)!
       })
-      return canvas.toDataURL('img/png');
+      return canvas.toDataURL('image/png')
     }).catch(e => {
-      console.log(e);
+      console.log(e)
       return undefined
-    });
+    })
   })
 }
 

frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx

@@ -1,4 +1,3 @@
-import { backgroundClip } from 'html2canvas/dist/types/css/property-descriptors/background-clip';
 import React from 'react';
 import Select from 'Shared/Select';
 

frontend/package.json

@@ -40,7 +40,7 @@
     "fzstd": "^0.1.1",
     "hls.js": "^1.5.13",
     "html-to-image": "^1.9.0",
-    "html2canvas": "^1.4.1",
+    "html2canvas-pro": "^1.5.8",
     "immutable": "^4.3.7",
     "jest-environment-jsdom": "^29.5.0",
     "js-untar": "^2.0.0",

frontend/yarn.lock

@@ -8652,7 +8652,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html2canvas@npm:^1.0.0-rc.5, html2canvas@npm:^1.4.1":
+"html2canvas-pro@npm:^1.5.8":
+  version: 1.5.8
+  resolution: "html2canvas-pro@npm:1.5.8"
+  dependencies:
+    css-line-break: "npm:^2.1.0"
+    text-segmentation: "npm:^1.0.3"
+  checksum: 10c1/1ee4751bc65e307a483e994c7d1ec446c8f2bab27fb1a623551a866c0043f1e5dbfc879d128885f4f6e82d760f620ee8b87f02e8969442d337f8cb5a01cd594b
+  languageName: node
+  linkType: hard
+
+"html2canvas@npm:^1.0.0-rc.5":
   version: 1.4.1
   resolution: "html2canvas@npm:1.4.1"
   dependencies:
@@ -11627,7 +11637,7 @@ __metadata:
     hls.js: "npm:^1.5.13"
     html-to-image: "npm:^1.9.0"
     html-webpack-plugin: "npm:^5.5.0"
-    html2canvas: "npm:^1.4.1"
+    html2canvas-pro: "npm:^1.5.8"
     immutable: "npm:^4.3.7"
     jest: "npm:^29.5.0"
     jest-environment-jsdom: "npm:^29.5.0"