@gemx-dev/clarity-visualize 0.8.46 → 0.8.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemx-dev/clarity-visualize",
-  "version": "0.8.46",
+  "version": "0.8.47",
   "description": "Clarity visualize",
   "author": "Microsoft Corp.",
   "license": "MIT",
@@ -9,7 +9,7 @@
   "unpkg": "build/clarity.visualize.min.js",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@gemx-dev/clarity-decode": "^0.8.46"
+    "@gemx-dev/clarity-decode": "^0.8.47"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",
@@ -21,7 +21,6 @@
     "husky": "^8.0.0",
     "lint-staged": "^13.1.0",
     "rollup": "^3.0.0",
-    "ts-node": "^10.1.0",
     "tslint": "^6.1.3",
     "typescript": "^4.3.5"
   },

package/src/heatmap.ts

@@ -20,7 +20,7 @@ export class HeatmapHelper {
         this.state = state;
         this.layout = layout;
     }
-
+    
     public reset = (): void => {
         this.data = null;
         this.scrollData = null;
@@ -43,7 +43,7 @@ export class HeatmapHelper {
         }
     }
 
-    public clear = (): void => {
+    public clear = () : void => {
         let doc = this.state.window.document;
         let win = this.state.window;
         let canvas = doc.getElementById(Constant.HeatmapCanvas) as HTMLCanvasElement;
@@ -68,8 +68,8 @@ export class HeatmapHelper {
         let doc = this.state.window.document;
         var body = doc.body;
         var de = doc.documentElement;
-        var height = Math.max(body.scrollHeight, body.offsetHeight,
-            de.clientHeight, de.scrollHeight, de.offsetHeight);
+        var height = Math.max( body.scrollHeight, body.offsetHeight, 
+            de.clientHeight, de.scrollHeight, de.offsetHeight );
         canvas.height = Math.min(height, Setting.ScrollCanvasMaxHeight);
         canvas.style.top = 0 + Constant.Pixel;
         if (canvas.width > 0 && canvas.height > 0) {
@@ -148,7 +148,7 @@ export class HeatmapHelper {
                 // For each pixel, we have 4 entries in data array: (r,g,b,a)
                 // To pick the right color from gradient pixels, we look at the alpha value of the pixel
                 // Alpha value ranges from 0-255
-                let alpha = pixels.data[i + 3];
+                let alpha = pixels.data[i+3];
                 if (alpha > 0) {
                     let offset = (alpha - 1) * 4;
                     pixels.data[i] = gradient.data[offset];
@@ -177,7 +177,7 @@ export class HeatmapHelper {
             win.addEventListener("scroll", this.redraw, true);
             win.addEventListener("resize", this.redraw, true);
             this.observer = this.state.window["ResizeObserver"] ? new ResizeObserver(this.redraw) : null;
-
+            
             if (this.observer) { this.observer.observe(doc.body); }
         }
 
@@ -253,7 +253,7 @@ export class HeatmapHelper {
                 let v = this.visible(el, r, height);
                 // Process clicks for only visible elements
                 if (this.max === null || v) {
-                    for (let i = 0; i < element.points; i++) {
+                    for(let i = 0; i < element.points; i++) {
                         let x = Math.round(r.left + (element.x[i] / Data.Setting.ClickPrecision) * r.width);
                         let y = Math.round(r.top + (element.y[i] / Data.Setting.ClickPrecision) * r.height);
                         let k = `${x}${Constant.Separator}${y}${Constant.Separator}${v ? 1 : 0}`;
@@ -281,7 +281,8 @@ export class HeatmapHelper {
         let doc: Document | ShadowRoot = this.state.window.document;
         let visibility = r.height > height ? true : false;
         if (visibility === false && r.width > 0 && r.height > 0) {
-            while (!visibility && doc) {
+            while (!visibility && doc)
+            {
                 let shadowElement = null;
                 let elements = doc.elementsFromPoint(r.left + (r.width / 2), r.top + (r.height / 2));
                 for (let e of elements) {

package/src/layout.ts

@@ -452,6 +452,13 @@ export class LayoutHelper {
                     this.setAttributes(iframeElement, node);
                     insert(node, parent, iframeElement, pivot);
                     break;
+                case "SCRIPT":
+                    {
+                        node.id = -1; // We want to ensure children of script tags are not processed
+                        node.value = null; // We don't want to set any potential script content
+                        this.insertDefaultElement(node, parent, pivot, doc, insert);
+                        break;
+                    }
                 default:
                     this.insertDefaultElement(node, parent, pivot, doc, insert);
                     break;
@@ -634,7 +641,7 @@ export class LayoutHelper {
                             node.setAttribute(Constant.Hide, size);
                         }
                     } else {
-                        node.setAttribute(attribute, v);
+                        node.setAttribute(attribute, this.isSuspiciousAttribute(attribute, v) ? Constant.Empty : v);
                     }
                 } catch (ex) {
                     console.warn("Node: " + node + " | " + JSON.stringify(attributes));
@@ -663,6 +670,23 @@ export class LayoutHelper {
         }
     }
 
+    private isSuspiciousAttribute(name: string, value: string): boolean {
+        // Block event handlers entirely
+        if (name.startsWith('on')) {
+            return true;
+        }
+        
+        // Check for JavaScript protocols and dangerous patterns
+        const dangerous = [
+            /^\s*javascript:/i,
+            /^\s*data:text\/html/i,
+            /^\s*vbscript:/i
+        ];
+        
+        return dangerous.some(pattern => pattern.test(value));
+    }
+
+
     private getMobileCustomStyle = (): string => {
         if(this.isMobile){
             return `*{scrollbar-width: none; scrollbar-gutter: unset;};`

package/tsconfig.json

@@ -1,15 +1,6 @@
 {
+    "extends": "../../tsconfig.json",
     "compilerOptions": {
-        "module": "esnext",
-        "target": "es6",
-        "lib": ["es6", "dom", "es2016", "es2017"],
-        "moduleResolution": "node",
-        "forceConsistentCasingInFileNames": true,
-        "noImplicitReturns": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
         "baseUrl": ".",
         "paths": {
             "@src/*": ["src/*"],

package/types/visualize.d.ts

@@ -199,7 +199,7 @@ export const enum Constant {
     NewPassword = "new-password",
     StyleSheet = "stylesheet",
     OriginalBackgroundColor = "data-clarity-background-color",
-    OriginalOpacity = "data-clarity-opacity"
+    OriginalOpacity = "data-clarity-opacity",
 }
 
 export const enum Setting {