clarity-js 0.6.33 → 0.6.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clarity-js",
-  "version": "0.6.33",
+  "version": "0.6.36",
   "description": "An analytics library that uses web page interactions to generate aggregated insights",
   "author": "Microsoft Corp.",
   "license": "MIT",

package/src/core/config.ts

@@ -11,6 +11,7 @@ let config: Config = {
     regions: [],
     extract: [],
     cookies: [],
+    fraud: [],
     report: null,
     upload: null,
     fallback: null,

package/src/core/history.ts

@@ -1,7 +1,9 @@
-import { Code, Constant, Setting, Severity } from "@clarity-types/data";
+import { BooleanFlag, Code, Constant, Metric, Setting, Severity } from "@clarity-types/data";
 import * as clarity from "@src/clarity";
+import * as core from "@src/core"
 import { bind } from "@src/core/event";
 import * as internal from "@src/diagnostic/internal";
+import * as metric from "@src/data/metric";
 
 let pushState = null;
 let replaceState = null;
@@ -12,24 +14,29 @@ export function start(): void {
     url = getCurrentUrl();
     count = 0;
     bind(window, "popstate", compute);
-    
+
     // Add a proxy to history.pushState function
-    if (pushState === null) { pushState = history.pushState; }
-    history.pushState = function(): void {
-        if (check()) {
+    if (pushState === null) { 
+        pushState = history.pushState; 
+        history.pushState = function(): void {
             pushState.apply(this, arguments);
-            compute();
-        }
-    };
+            if (core.active() && check()) {
+                compute();
+            }
+        };
+    }
 
     // Add a proxy to history.replaceState function
-    if (replaceState === null) { replaceState = history.replaceState; }
-    history.replaceState = function(): void {
-        if (check()) {
+    if (replaceState === null) 
+    { 
+        replaceState = history.replaceState; 
+        history.replaceState = function(): void {
             replaceState.apply(this, arguments);
-            compute();
-        }
-    };
+            if (core.active() && check()) {
+                compute();
+            }
+        };
+    }
 }
 
 function check(): boolean {
@@ -45,27 +52,20 @@ function compute(): void {
     if (url !== getCurrentUrl()) {
         // If the url changed, start tracking it as a new page
         clarity.stop();
-        window.setTimeout(clarity.start, Setting.RestartDelay);
+        window.setTimeout(restart, Setting.RestartDelay);
     }
 }
 
+function restart(): void {
+    clarity.start();
+    metric.max(Metric.SinglePage, BooleanFlag.True);
+}
+
 function getCurrentUrl(): string {
     return location.href ? location.href.replace(location.hash, Constant.Empty) : location.href;
 }
 
 export function stop(): void {
-    // Restore original function definition of history.pushState
-    if (pushState !== null) {
-        history.pushState = pushState;
-        pushState = null;
-    }
-
-    // Restore original function definition of history.replaceState
-    if (replaceState !== null) {
-        history.replaceState = replaceState;
-        replaceState = null;
-    }
-    
     url = null;
     count = 0;
 }

package/src/core/timeout.ts

@@ -1,7 +1,7 @@
 import { Event } from "@clarity-types/data";
 import measure from "./measure";
 
-export function setTimeout(handler: (event?: Event | boolean) => void, timeout: number, event?: Event): number {
+export function setTimeout(handler: (event?: Event | boolean) => void, timeout?: number, event?: Event): number {
     return window.setTimeout(measure(handler), timeout, event);
 }
 

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.33";
+let version = "0.6.36";
 export default version;

package/src/data/metadata.ts

@@ -1,5 +1,5 @@
 import { Time } from "@clarity-types/core";
-import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, Metric, Session, User, Setting } from "@clarity-types/data";
+import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, MetadataCallbackOptions, Metric, Session, User, Setting } from "@clarity-types/data";
 import * as core from "@src/core";
 import config from "@src/core/config";
 import hash from "@src/core/hash";
@@ -8,11 +8,10 @@ import * as metric from "@src/data/metric";
 import { set } from "@src/data/variable";
 
 export let data: Metadata = null;
-export let callback: MetadataCallback = null;
+export let callbacks: MetadataCallbackOptions[] = [];
 let rootDomain = null;
 
 export function start(): void {
-  callback = null;
   rootDomain = null;
   const ua = navigator && "userAgent" in navigator ? navigator.userAgent : Constant.Empty;
   const title = document && document.title ? document.title : Constant.Empty;
@@ -40,7 +39,6 @@ export function start(): void {
   dimension.log(Dimension.DocumentDirection, document.dir);
   if (navigator) {
     dimension.log(Dimension.Language, (<any>navigator).userLanguage || navigator.language);
-    metric.max(Metric.Automation, navigator.webdriver ? BooleanFlag.True : BooleanFlag.False);
     userAgentData();
   }
 
@@ -64,7 +62,7 @@ export function start(): void {
   track(u);
 }
 
-export function userAgentData(): void {
+function userAgentData(): void {
   if (navigator["userAgentData"] && navigator["userAgentData"].getHighEntropyValues) {
     navigator["userAgentData"].getHighEntropyValues(
       ["model",
@@ -84,7 +82,6 @@ export function userAgentData(): void {
 }
 
 export function stop(): void {
-  callback = null;
   rootDomain = null;
   data = null;
 }
@@ -93,10 +90,9 @@ export function metadata(cb: MetadataCallback, wait: boolean = true): void {
   if (data && wait === false) {
     // Immediately invoke the callback if the caller explicitly doesn't want to wait for the upgrade confirmation
     cb(data, !config.lean);
-  } else {
-    // Save the callback for future reference; so we can inform the caller when page gets upgraded and we have a valid playback flag
-    callback = cb;
   }
+  
+  callbacks.push({callback: cb, wait: wait });
 }
 
 export function id(): string {
@@ -127,12 +123,20 @@ function tab(): string {
 
 export function save(): void {
   let ts = Math.round(Date.now());
-  let upgrade = config.lean ? BooleanFlag.False : BooleanFlag.True;
   let upload = config.upload && typeof config.upload === Constant.String ? (config.upload as string).replace(Constant.HTTPS, Constant.Empty) : Constant.Empty;
-  if (upgrade && callback) { callback(data, !config.lean); }
+  let upgrade = config.lean ? BooleanFlag.False : BooleanFlag.True;
+  processCallback(upgrade);
   setCookie(Constant.SessionKey, [data.sessionId, ts, data.pageNum, upgrade, upload].join(Constant.Pipe), Setting.SessionExpire);
 }
 
+function processCallback(upgrade: BooleanFlag) {
+  if (callbacks.length > 0) {
+    callbacks.forEach(x => {
+      if (x.callback && (!x.wait || upgrade)) { x.callback(data, !config.lean); }
+    })
+  }
+}
+
 function supported(target: Window | Document, api: string): boolean {
   try { return !!target[api]; } catch { return false; }
 }

package/src/data/metric.ts

@@ -15,11 +15,11 @@ export function stop(): void {
     updates = {};
 }
 
-export function count(metric: Metric, increment: number = 1): void {
+export function count(metric: Metric): void {
     if (!(metric in data)) { data[metric] = 0; }
     if (!(metric in updates)) { updates[metric] = 0; }
-    data[metric] += increment;
-    updates[metric] += increment;
+    data[metric]++;
+    updates[metric]++;
 }
 
 export function sum(metric: Metric, value: number): void {

package/src/diagnostic/encode.ts

@@ -1,6 +1,7 @@
 import { Event, Token } from "@clarity-types/data";
 import { time } from "@src/core/time";
 import { queue } from "@src/data/upload";
+import * as fraud from "@src/diagnostic/fraud";
 import * as internal from "@src/diagnostic/internal";
 import * as script from "@src/diagnostic/script";
 
@@ -26,5 +27,13 @@ export default async function (type: Event): Promise<void> {
                 queue(tokens, false);
             }
             break;
+        case Event.Fraud:
+            if (fraud.data) {
+                tokens.push(fraud.data.id);
+                tokens.push(fraud.data.target);
+                tokens.push(fraud.data.hash);
+                queue(tokens, false);
+            }
+            break;
     }
 }

package/src/diagnostic/fraud.ts

@@ -0,0 +1,29 @@
+import { BooleanFlag, Event, Metric, Setting } from "@clarity-types/data";
+import { FraudData } from "@clarity-types/diagnostic";
+import hash from "@src/core/hash";
+import * as metric from "@src/data/metric";
+import encode from "./encode";
+
+let history = [];
+export let data: FraudData;
+
+export function start(): void {
+    history = [];
+    metric.max(Metric.Automation, navigator.webdriver ? BooleanFlag.True : BooleanFlag.False);
+}
+
+export function check(id: number, target: number, input: string): void {
+    // Compute hash for fraud detection. Hash is computed only if input meets the minimum length criteria
+    if (id !== null && input && input.length >= Setting.WordLength) {
+        data = { id, target, hash: hash(input) };
+        // Only encode this event if we haven't already reported this hash
+        if (history.indexOf(data.hash) < 0) {
+            history.push(data.hash);
+            encode(Event.Fraud);
+        }
+    }
+}
+
+export function stop(): void {
+    history = [];
+}

package/src/diagnostic/index.ts

@@ -1,7 +1,9 @@
+import * as fraud from "./fraud";
 import * as internal from "./internal";
 import * as script from "./script";
 
 export function start(): void {
+    fraud.start();
     script.start();
     internal.start();
 }

package/src/diagnostic/script.ts

@@ -1,7 +1,6 @@
-import { Constant, Event, Setting } from "@clarity-types/data";
+import { Event, Setting } from "@clarity-types/data";
 import { ScriptErrorData } from "@clarity-types/diagnostic";
 import { bind } from "@src/core/event";
-import * as box from "@src/layout/box";
 import encode from "./encode";
 
 let history: { [key: string]: number } = {};
@@ -29,15 +28,6 @@ function handler(error: ErrorEvent): boolean {
             source: error["filename"]
         };
 
-        // In certain cases, ResizeObserver could lead to flood of benign errors - especially when video element is involved.
-        // Reference Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=809574
-        // Even though it doesn't impact user experience, or show up in console, it can still flood error reporting through on error
-        // To mitigate that, we turn off Clarity's ResizeObserver on getting the first instance of this error
-        if (e.message.indexOf(Constant.ResizeObserver) >= 0) {
-            box.stop();
-            return false;
-        }
-
         encode(Event.ScriptError);
     }
 

package/src/interaction/click.ts

@@ -65,7 +65,8 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
                 context: context(a),
                 text: text(t),
                 link: a ? a.href : null,
-                hash: null
+                hash: null,
+                trust: evt.isTrusted ? BooleanFlag.True : BooleanFlag.False
             }
         });
         schedule(encode.bind(this, event));

package/src/interaction/encode.ts

@@ -44,7 +44,7 @@ export default async function (type: Event): Promise<void> {
             break;
         case Event.Click:
             for (let entry of click.state) {
-                let cTarget = metadata(entry.data.target as Node, entry.event);
+                let cTarget = metadata(entry.data.target as Node, entry.event, entry.data.text);
                 tokens = [entry.time, entry.event];
                 let cHash = cTarget.hash.join(Constant.Dot);
                 tokens.push(cTarget.id);
@@ -58,6 +58,7 @@ export default async function (type: Event): Promise<void> {
                 tokens.push(scrub(entry.data.text, "click", cTarget.privacy));
                 tokens.push(entry.data.link);
                 tokens.push(cHash);
+                tokens.push(entry.data.trust);
                 queue(tokens);
                 timeline.track(entry.time, entry.event, cHash, entry.data.x, entry.data.y, entry.data.reaction, entry.data.context);
             }
@@ -91,10 +92,10 @@ export default async function (type: Event): Promise<void> {
             break;
         case Event.Input:
             for (let entry of input.state) {
-                let iTarget = metadata(entry.data.target as Node, entry.event);
+                let iTarget = metadata(entry.data.target as Node, entry.event, entry.data.value);
                 tokens = [entry.time, entry.event];
                 tokens.push(iTarget.id);
-                tokens.push(entry.data.value);
+                tokens.push(scrub(entry.data.value, "input", iTarget.privacy));
                 queue(tokens);
             }
             input.reset();

package/src/interaction/input.ts

@@ -1,7 +1,6 @@
 import { Event } from "@clarity-types/data";
 import { InputData, InputState, Setting } from "@clarity-types/interaction";
 import { bind } from "@src/core/event";
-import scrub from "@src/core/scrub";
 import { schedule } from "@src/core/task";
 import { time } from "@src/core/time";
 import { clearTimeout, setTimeout } from "@src/core/timeout";
@@ -24,18 +23,12 @@ function recompute(evt: UIEvent): void {
     let input = target(evt) as HTMLInputElement;
     let value = get(input);
     if (input && input.type && value) {
-        let v;
+        let v = input.value;
         switch (input.type) {
             case "radio":
             case "checkbox":
                 v = input.checked ? "true" : "false";
                 break;
-            case "range":
-                v = input.value;
-                break;
-            default:
-                v = scrub(input.value, "input", value.metadata.privacy);
-                break;
         }
 
         let data: InputData = { target: input, value: v };

package/src/layout/dom.ts

@@ -1,6 +1,6 @@
 import { Privacy } from "@clarity-types/core";
-import { Code, Setting, Severity } from "@clarity-types/data";
-import { Constant, NodeInfo, NodeValue, Selector, SelectorInput, Source } from "@clarity-types/layout";
+import { Code, Severity } from "@clarity-types/data";
+import { Constant, Mask, NodeInfo, NodeMeta, NodeValue, Selector, SelectorInput, Source } from "@clarity-types/layout";
 import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as internal from "@src/diagnostic/internal";
@@ -9,12 +9,6 @@ import selector from "@src/layout/selector";
 import * as mutation from "@src/layout/mutation";
 import * as extract from "@src/data/extract";
 let index: number = 1;
-
-// Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#%3Cinput%3E_types
-const DISALLOWED_TYPES = ["password", "hidden", "email", "tel"];
-const DISALLOWED_NAMES = ["addr", "cell", "code", "dob", "email", "mob", "name", "phone", "secret", "social", "ssn", "tel", "zip", "pass", "card", "account", "cvv", "ccv"];
-const DISALLOWED_MATCH = ["address", "password", "contact"];
-
 let nodes: Node[] = [];
 let values: NodeValue[] = [];
 let updateMap: number[] = [];
@@ -22,11 +16,14 @@ let hashMap: { [hash: string]: number } = {};
 let override = [];
 let unmask = [];
 let updatedFragments: { [fragment: number]: string } = {};
+let maskText = [];
+let maskDisable = [];
 
 // The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
 let idMap: WeakMap<Node, number> = null; // Maps node => id.
 let iframeMap: WeakMap<Document, HTMLIFrameElement> = null; // Maps iframe's contentDocument => parent iframe element
 let privacyMap: WeakMap<Node, Privacy> = null; // Maps node => Privacy (enum)
+let fraudMap: WeakMap<Node, number> = null; // Maps node => FraudId (number)
 
 export function start(): void {
     reset();
@@ -45,9 +42,12 @@ function reset(): void {
     hashMap = {};
     override = [];
     unmask = [];
+    maskText = Mask.Text.split(Constant.Comma);
+    maskDisable = Mask.Disable.split(Constant.Comma);
     idMap = new WeakMap();
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
+    fraudMap = new WeakMap();
 }
 
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
@@ -64,6 +64,7 @@ export function parse(root: ParentNode, init: boolean = false): void {
         if ("querySelectorAll" in root) {
             config.regions.forEach(x => root.querySelectorAll(x[1]).forEach(e => region.observe(e, `${x[0]}`))); // Regions
             config.mask.forEach(x => root.querySelectorAll(x).forEach(e => privacyMap.set(e, Privacy.TextImage))); // Masked Elements
+            config.fraud.forEach(x => root.querySelectorAll(x[1]).forEach(e => fraudMap.set(e, x[0]))); // Fraud Check
             unmask.forEach(x => root.querySelectorAll(x).forEach(e => privacyMap.set(e, Privacy.None))); // Unmasked Elements
         }
     } catch (e) { internal.log(Code.Selector, Severity.Warning, e ? e.name : null); }
@@ -84,22 +85,20 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
     let id = getId(node, true);
     let parentId = parent ? getId(parent) : null;
     let previousId = getPreviousId(node);
-    let privacy = config.content ? Privacy.Sensitive : Privacy.Text;
-    let parentValue = null;
+    let parentValue: NodeValue = null;
     let regionId = region.exists(node) ? id : null;
     let fragmentId = null;
+    let fraudId = fraudMap.has(node) ? fraudMap.get(node) : null;
+    let privacyId = config.content ? Privacy.Sensitive : Privacy.Text
 
     if (parentId >= 0 && values[parentId]) {
         parentValue = values[parentId];
         parentValue.children.push(id);
         regionId = regionId === null ? parentValue.region : regionId;
         fragmentId = parentValue.fragment;
-        privacy = parentValue.metadata.privacy;
+        fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
     }
 
-    // Check to see if this particular node should be masked or not
-    privacy = getPrivacy(node, data, parentValue, privacy);
-
     // If there's an explicit region attribute set on the element, use it to mark a region on the page
     if (data.attributes && Constant.RegionData in data.attributes) {
         region.observe(node, data.attributes[Constant.RegionData]);
@@ -116,12 +115,13 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
         selector: null,
         hash: null,
         region: regionId,
-        metadata: { active: true, suspend: false, privacy, position: null, size: null },
+        metadata: { active: true, suspend: false, privacy: privacyId, position: null, fraud: fraudId, size: null },
         fragment: fragmentId,
     };
 
+    privacy(node, values[id], parentValue);
     updateSelector(values[id]);
-    size(values[id], parentValue);
+    size(values[id]);
     track(id, source, values[id].fragment);
 }
 
@@ -210,66 +210,63 @@ export function iframe(node: Node): HTMLIFrameElement {
     return doc && iframeMap.has(doc) ? iframeMap.get(doc) : null;
 }
 
-function getPrivacy(node: Node, data: NodeInfo, parent: NodeValue, privacy: Privacy): Privacy {
-    let attributes = data.attributes;
+function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
+    let data = value.data;
+    let metadata = value.metadata;
+    let current = metadata.privacy;
+    let attributes = data.attributes || {};
     let tag = data.tag.toUpperCase();
 
-    // If this node was explicitly configured to contain sensitive content, use that information and return the value
-    if (privacyMap.has(node)) { return privacyMap.get(node); }
-
-    // If it's a text node belonging to a STYLE or TITLE tag; 
-    // Or, the text node belongs to one of SCRUB_EXCEPTIONS
-    // then reset the privacy setting to ensure we capture the content
-    if (tag === Constant.TextTag && parent && parent.data) {
-        let path = parent.selector ? parent.selector[Selector.Stable] : Constant.Empty;
-        privacy = parent.data.tag === Constant.StyleTag || parent.data.tag === Constant.TitleTag ? Privacy.None : privacy;
-        for (let entry of override) {
-            if (path.indexOf(entry) >= 0) {
-                privacy = Privacy.None;
-                break;
-            }
-        }
-    }
-
-    // Do not proceed if attributes are missing for the node
-    if (attributes === null || attributes === undefined) { return privacy; }
-
-    // Look up for sensitive fields
-    if (Constant.Class in attributes && privacy === Privacy.Sensitive) {
-        for (let match of DISALLOWED_MATCH) {
-            if (attributes[Constant.Class].indexOf(match) >= 0) {
-                privacy = Privacy.Text;
-                break;
-            }
-        }
-    }
-
-    // Check for disallowed list of fields (e.g. address, phone, etc.) only if the input node is not already masked
-    if (tag === Constant.InputTag) {
-        if (privacy === Privacy.None) {
+    switch (true) {
+        case Constant.MaskData in attributes:
+            metadata.privacy = Privacy.TextImage;
+            break;
+        case Constant.UnmaskData in attributes:
+            metadata.privacy = Privacy.None;
+            break;
+        case privacyMap.has(node):
+            // If this node was explicitly configured to contain sensitive content, honor that privacy setting
+            metadata.privacy = privacyMap.get(node);
+            break;
+        case fraudMap.has(node):
+            // If this node was explicitly configured to be evaluated for fraud, then also mask content
+            metadata.privacy = Privacy.Text;
+            break;
+        case tag === Constant.TextTag:
+            // If it's a text node belonging to a STYLE or TITLE tag or one of SCRUB_EXCEPTIONS, then capture content
+            let pTag = parent && parent.data ? parent.data.tag : Constant.Empty;
+            let pSelector = parent && parent.selector ? parent.selector[Selector.Stable] : Constant.Empty;
+            metadata.privacy = pTag === Constant.StyleTag || pTag === Constant.TitleTag || override.some(x => pSelector.indexOf(x) >= 0) ? Privacy.None : current; 
+            break;
+        case Constant.Type in attributes:
+            // If this node has an explicit type assigned to it, go through masking rules to determine right privacy setting
+            metadata.privacy  = inspect(attributes[Constant.Type], metadata);
+            break;
+        case tag === Constant.InputTag && current === Privacy.None:
+            // If even default privacy setting is to not mask, we still scan through input fields for any sensitive information
             let field: string = Constant.Empty;
-            // Be aggressive in looking up any attribute (id, class, name, etc.) for disallowed names
-            for (const attribute of Object.keys(attributes)) { field += attributes[attribute].toLowerCase(); }
-            for (let name of DISALLOWED_NAMES) {
-                if (field.indexOf(name) >= 0) {
-                    privacy = Privacy.Text;
-                    break;
-                }
-            }
-        } else if (privacy === Privacy.Sensitive) {
-            // Mask all input fields with an exception of type=submit; since they do not accept user input
-            privacy = attributes && attributes[Constant.Type] === Constant.Submit ? Privacy.None : Privacy.Text;
-        }
+            Object.keys(attributes).forEach(x => field += attributes[x].toLowerCase());
+            metadata.privacy = inspect(field, metadata);
+            break;
+        case current === Privacy.Sensitive && tag === Constant.InputTag:
+            // If it's a button or an input option, make an exception to disable masking
+            metadata.privacy = maskDisable.indexOf(attributes[Constant.Type]) >= 0 ? Privacy.None : current;
+            break;
+        case current === Privacy.Sensitive:
+            // In a mode where we mask sensitive information by default, look through class names to aggressively mask content
+            metadata.privacy = inspect(attributes[Constant.Class], metadata);
+            break;
+        default:
+            metadata.privacy = parent ? parent.metadata.privacy : metadata.privacy;
+            break;
     }
+}
 
-    // Check for disallowed list of types (e.g. password, email, etc.) and set the masked property appropriately
-    if (Constant.Type in attributes && DISALLOWED_TYPES.indexOf(attributes[Constant.Type]) >= 0) { privacy = Privacy.Text; }
-
-    // Following two conditions supersede any of the above. If there are explicit instructions to mask / unmask a field, we honor that.
-    if (Constant.MaskData in attributes) { privacy = Privacy.TextImage; }
-    if (Constant.UnmaskData in attributes) { privacy = Privacy.None; }
-
-    return privacy;
+function inspect(input: string, metadata: NodeMeta): Privacy {
+    if (input && maskText.some(x => input.indexOf(x) >= 0)) {
+        return Privacy.Text;
+    }
+    return metadata.privacy;
 }
 
 function diff(a: NodeInfo, b: NodeInfo, field: string): boolean {
@@ -358,19 +355,10 @@ function remove(id: number, source: Source): void {
     }
 }
 
-function size(value: NodeValue, parent: NodeValue): void {
-    let data = value.data;
-    let tag = data.tag;
-
-    // If this element is a text node, is masked, and longer than configured length, then track box model for the parent element
-    let isLongText = tag === Constant.TextTag && data.value && data.value.length > Setting.ResizeObserverThreshold;
-    let isMasked = value.metadata.privacy === Privacy.Text || value.metadata.privacy === Privacy.TextImage;
-    if (isLongText && isMasked && parent && parent.metadata.size === null) { parent.metadata.size = []; }
-
+function size(value: NodeValue): void {
     // If this element is a image node, and is masked, then track box model for the current element
-    if (data.tag === Constant.ImageTag && value.metadata.privacy === Privacy.TextImage) { value.metadata.size = []; }
+    if (value.data.tag === Constant.ImageTag && value.metadata.privacy === Privacy.TextImage) { value.metadata.size = []; }
 }
-
 function getPreviousId(node: Node): number {
     let id = null;