clarity-js 0.6.37 → 0.6.40

package/src/layout/dom.ts

@@ -5,7 +5,7 @@ import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as internal from "@src/diagnostic/internal";
 import * as region from "@src/layout/region";
-import selector from "@src/layout/selector";
+import * as selector from "@src/layout/selector";
 import * as mutation from "@src/layout/mutation";
 import * as extract from "@src/data/extract";
 let index: number = 1;
@@ -17,6 +17,7 @@ let override = [];
 let unmask = [];
 let updatedFragments: { [fragment: number]: string } = {};
 let maskText = [];
+let maskInput = [];
 let maskDisable = [];
 
 // The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced
@@ -43,11 +44,13 @@ function reset(): void {
     override = [];
     unmask = [];
     maskText = Mask.Text.split(Constant.Comma);
+    maskInput = Mask.Input.split(Constant.Comma);
     maskDisable = Mask.Disable.split(Constant.Comma);
     idMap = new WeakMap();
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
     fraudMap = new WeakMap();
+    selector.reset();
 }
 
 // We parse new root nodes for any regions or masked nodes in the beginning (document) and
@@ -234,37 +237,37 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
             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
+            // 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; 
+            let pSelector = parent && parent.selector ? parent.selector[Selector.Default] : Constant.Empty;
+            let tags : string[] = [Constant.StyleTag, Constant.TitleTag, Constant.SvgStyle];
+            metadata.privacy = tags.includes(pTag) || 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);
+            metadata.privacy  = inspect(attributes[Constant.Type], maskInput, 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;
             Object.keys(attributes).forEach(x => field += attributes[x].toLowerCase());
-            metadata.privacy = inspect(field, metadata);
+            metadata.privacy = inspect(field, maskInput, metadata);
             break;
         case current === Privacy.Sensitive && tag === Constant.InputTag:
+            // Look through class names to aggressively mask content
+            metadata.privacy = inspect(attributes[Constant.Class], maskText, metadata);
             // 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;
+            metadata.privacy = inspect(attributes[Constant.Class], maskText, metadata);
             break;
     }
 }
 
-function inspect(input: string, metadata: NodeMeta): Privacy {
-    if (input && maskText.some(x => input.indexOf(x) >= 0)) {
+function inspect(input: string, lookup: string[], metadata: NodeMeta): Privacy {
+    if (input && lookup.some(x => input.indexOf(x) >= 0)) {
         return Privacy.Text;
     }
     return metadata.privacy;
@@ -297,10 +300,11 @@ function updateSelector(value: NodeValue): void {
     let prefix = parent ? parent.selector : null;
     let d = value.data;
     let p = position(parent, value);
-    let s: SelectorInput = { tag: d.tag, prefix, position: p, attributes: d.attributes };
-    value.selector = [selector(s), selector(s, true)];
+    let s: SelectorInput = { id: value.id, tag: d.tag, prefix, position: p, attributes: d.attributes };
+    value.selector = [selector.get(s, Selector.Alpha), selector.get(s, Selector.Beta)];
     value.hash = value.selector.map(x => x ? hash(x) : null) as [string, string];
     value.hash.forEach(h => hashMap[h] = value.id);
+    // Match fragment configuration against both alpha and beta hash
     if (value.hash.some(h => extract.fragments.indexOf(h) !== -1)) {
         value.fragment = value.id;
     }

package/src/layout/encode.ts

@@ -62,7 +62,7 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
                                     if (value.parent && active) { tokens.push(value.parent); }
                                     if (value.previous && active) { tokens.push(value.previous); }
                                     tokens.push(suspend ? Constant.SuspendMutationTag : data[key]);
-                                    if (box && box.length === 2) { tokens.push(`${Constant.Box}${str(box[0])}.${str(box[1])}`); }
+                                    if (box && box.length === 2) { tokens.push(`${Constant.Hash}${str(box[0])}.${str(box[1])}`); }
                                     break;
                                 case "attributes":
                                     for (let attr in data[key]) {

package/src/layout/selector.ts

@@ -1,12 +1,17 @@
 import { Character } from "../../types/data";
 import { Constant, Selector, SelectorInput } from "../../types/layout";
 
-const TAGS = ["DIV", "TR", "P", "LI", "UL", "A", "BUTTON"];
+const excludeClassNames = Constant.ExcludeClassNames.split(Constant.Comma);
+let selectorMap: { [selector: string]: number[] } = {};
 
-export default function(input: SelectorInput, beta: boolean = false): string {
+export function reset(): void {
+    selectorMap = {};
+}
+
+export function get(input: SelectorInput, type: Selector): string {
     let a = input.attributes;
-    let prefix = input.prefix ? input.prefix[beta ? Selector.Beta : Selector.Stable] : null;
-    let suffix = beta || ((a && !(Constant.Class in a)) || TAGS.indexOf(input.tag) >= 0) ? `:nth-of-type(${input.position})` : Constant.Empty;
+    let prefix = input.prefix ? input.prefix[type] : null;
+    let suffix = type === Selector.Alpha ? `${Constant.Tilde}${input.position-1}` : `:nth-of-type(${input.position})`;
     switch (input.tag) {
         case "STYLE":
         case "TITLE":
@@ -19,22 +24,28 @@ export default function(input: SelectorInput, beta: boolean = false): string {
             return Constant.HTML;
         default:
             if (prefix === null) { return Constant.Empty; }
-            prefix = `${prefix}>`;
+            prefix = `${prefix}${Constant.Separator}`;
             input.tag = input.tag.indexOf(Constant.SvgPrefix) === 0 ? input.tag.substr(Constant.SvgPrefix.length) : input.tag;
             let selector = `${prefix}${input.tag}${suffix}`;
-            let classes = Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/) : null;
-            if (beta) {
-                // In beta mode, update selector to use "id" field when available. There are two exceptions:
-                // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
-                // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
-                let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
-                classes = input.tag !== Constant.BodyTag && classes ? classes.filter(c => !hasDigits(c)) : [];
-                selector = classes.length > 0 ? `${prefix}${input.tag}.${classes.join(".")}${suffix}` : selector;
-                selector = id && hasDigits(id) === false ? `${getDomPrefix(prefix)}#${id}` : selector;
-            } else {
-                // Otherwise, fallback to stable mode, where we include class names as part of the selector
-                selector = classes ? `${prefix}${input.tag}.${classes.join(".")}${suffix}` : selector;
-            } 
+            let id = Constant.Id in a && a[Constant.Id].length > 0 ? a[Constant.Id] : null;
+            let classes = input.tag !== Constant.BodyTag && Constant.Class in a && a[Constant.Class].length > 0 ? a[Constant.Class].trim().split(/\s+/).filter(c => filter(c)).join(Constant.Period) : null;
+            if (classes && classes.length > 0) {
+                if (type === Selector.Alpha) {
+                    // In Alpha mode, update selector to use class names, with relative positioning within the parent id container.
+                    // If the node has valid class name(s) then drop relative positioning within the parent path to keep things simple.
+                    let key = `${getDomPath(prefix)}${input.tag}${Constant.Dot}${classes}`;
+                    if (!(key in selectorMap)) { selectorMap[key] = []; }
+                    if (selectorMap[key].indexOf(input.id) < 0) { selectorMap[key].push(input.id); }
+                    selector = `${key}${Constant.Tilde}${selectorMap[key].indexOf(input.id)}`;
+                } else {
+                    // In Beta mode, we continue to look at query selectors in context of the full page
+                    selector = `${prefix}${input.tag}.${classes}${suffix}`
+                }
+            }
+            // Update selector to use "id" field when available. There are two exceptions:
+            // (1) if "id" appears to be an auto generated string token, e.g. guid or a random id containing digits
+            // (2) if "id" appears inside a shadow DOM, in which case we continue to prefix up to shadow DOM to prevent conflicts
+            selector = id && filter(id) ? `${getDomPrefix(prefix)}${Constant.Hash}${id}` : selector;
             return selector;
     }
 }
@@ -44,19 +55,28 @@ function getDomPrefix(prefix: string): string {
   const iframeDomStart = prefix.lastIndexOf(`${Constant.IFramePrefix}${Constant.HTML}`);
   const domStart = Math.max(shadowDomStart, iframeDomStart);
   
-  if (domStart < 0) {
-    return "";
-  }
+  if (domStart < 0) { return Constant.Empty; }
 
-  const domEnd = prefix.indexOf(">", domStart) + 1;
-  return prefix.substr(0, domEnd);
+  return prefix.substring(0, prefix.indexOf(Constant.Separator, domStart) + 1);
+}
+
+function getDomPath(input: string): string {
+    let parts = input.split(Constant.Separator);
+    for (let i = 0; i < parts.length; i++) {
+        let tIndex = parts[i].indexOf(Constant.Tilde);
+        let dIndex = parts[i].indexOf(Constant.Dot);
+        parts[i] = parts[i].substring(0, dIndex > 0 ? dIndex : (tIndex > 0 ? tIndex : parts[i].length));
+    }
+    return parts.join(Constant.Separator);
 }
 
-// Check if the given input string has digits or not
-function hasDigits(value: string): boolean {
+// Check if the given input string has digits or excluded class names
+function filter(value: string): boolean {
+    if (!value) { return false; } // Do not process empty strings
+    if (excludeClassNames.some(x => value.toLowerCase().indexOf(x) >= 0)) { return false; }
     for (let i = 0; i < value.length; i++) {
         let c = value.charCodeAt(i);
-        if (c >= Character.Zero && c <= Character.Nine) { return true };
+        if (c >= Character.Zero && c <= Character.Nine) { return false };
     }
-    return false;
+    return true;
 }

package/test/core.test.ts

@@ -1,6 +1,6 @@
 import { assert } from 'chai';
 import { Browser, Page } from 'playwright';
-import { launch, markup, node, text } from './helper';
+import { clicks, inputs, launch, markup, node, text } from './helper';
 import { Data, decode } from "clarity-decode";
 
 let browser: Browser;
@@ -33,15 +33,21 @@ describe('Core Tests', () => {
         let email = node(decoded, "attributes.id", "eml");
         let password = node(decoded, "attributes.id", "pwd");
         let search = node(decoded, "attributes.id", "search");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
         
         // Non-sensitive fields continue to pass through with sensitive bits masked off
-        assert.equal(heading, "Thanks for your order •••••••••");
+        assert.equal(heading, "Thanks for your order #••••••••");
 
         // Sensitive fields, including input fields, are randomized and masked
         assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
         assert.equal(email.attributes.value, "••••• •••• •••• ••••");
         assert.equal(password.attributes.value, "••••• ••••");
         assert.equal(search.attributes.value, "hello •••••");
+
+        // Clicked text and input value should be consistent with uber masking configuration
+        assert.equal(click.data.text, "Hello •••••");
+        assert.equal(input.data.value, "query with •••••••");
     });
 
     it('should mask all text in strict mode', async () => {
@@ -52,6 +58,8 @@ describe('Core Tests', () => {
         let email = node(decoded, "attributes.id", "eml");
         let password = node(decoded, "attributes.id", "pwd");
         let search = node(decoded, "attributes.id", "search");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
 
         // All fields are randomized and masked
         assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
@@ -59,6 +67,10 @@ describe('Core Tests', () => {
         assert.equal(email.attributes.value, "••••• •••• •••• ••••");
         assert.equal(password.attributes.value, "••••• ••••");
         assert.equal(search.attributes.value, "••••• •••• ••••");
+
+        // Clicked text and input value should also be masked in strict mode
+        assert.equal(click.data.text, "••••• •••• ••••");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
     });
 
     it('should unmask all text in relaxed mode', async () => {
@@ -69,6 +81,8 @@ describe('Core Tests', () => {
         let email = node(decoded, "attributes.id", "eml");
         let password = node(decoded, "attributes.id", "pwd");
         let search = node(decoded, "attributes.id", "search");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
 
         // Text flows through unmasked for non-sensitive fields, including input fields
         assert.equal(heading, "Thanks for your order #2AB700GH");
@@ -78,14 +92,24 @@ describe('Core Tests', () => {
         // Sensitive fields are still masked
         assert.equal(email.attributes.value, "••••• •••• •••• ••••");
         assert.equal(password.attributes.value, "••••• ••••");
+
+        // Clicked text and input value (non-sensitive) both come through without masking in relaxed mode
+        assert.equal(click.data.text, "Hello Wor1d");
+        assert.equal(input.data.value, "query with numb3rs");
     });
 
     it('should respect mask config even in relaxed mode', async () => {
         let encoded: string[] = await markup(page, "core.html", { mask: ["#mask"], unmask: ["body"] });
         let decoded = encoded.map(x => decode(x));
         let subtree = text(decoded, "child");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
         
         // Masked sub-trees continue to stay masked
         assert.equal(subtree, "••••• •••••");
+
+        // Clicked text is masked due to masked configuration while input value is not masked in relaxed mode
+        assert.equal(click.data.text, "••••• •••• ••••");
+        assert.equal(input.data.value, "query with numb3rs");
     });
 });

package/test/helper.ts

@@ -1,4 +1,4 @@
-import { Core, Data, Layout } from "clarity-decode";
+import { Core, Data, decode, Interaction, Layout } from "clarity-decode";
 import * as fs from 'fs';
 import * as url from 'url';
 import * as path from 'path';
@@ -25,10 +25,38 @@ export async function markup(page: Page, file: string, override: Core.Config = n
         </body>
     `));
     await page.hover("#two");
-    await page.waitForFunction("payloads && payloads.length > 1");
+    await page.click("#child");
+    await page.locator('#search').fill('query with numb3rs');
+    await page.waitForFunction("payloads && payloads.length > 2");
     return await page.evaluate('payloads');
 }
 
+export function clicks(decoded: Data.DecodedPayload[]): Interaction.ClickEvent[] {
+    let output: Interaction.ClickEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].click) {
+            for (let j = 0; j < decoded[i].click.length;j++)
+            {
+                output.push(decoded[i].click[j]);
+            }
+        }
+    }
+    return output;
+}
+
+export function inputs(decoded: Data.DecodedPayload[]): Interaction.InputEvent[] {
+    let output: Interaction.InputEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].input) {
+            for (let j = 0; j < decoded[i].input.length;j++)
+            {
+                output.push(decoded[i].input[j]);
+            }
+        }
+    }
+    return output;
+}
+
 export function node(decoded: Data.DecodedPayload[], key: string, value: string | number, tag: string = null): Layout.DomData {
     let sub = null;
 

package/test/html/core.html

@@ -9,7 +9,7 @@
     <p id="two" class="address-details">1 Microsoft Way, Redmond, WA - 98052</p>
   </div>
   <div id="mask">
-    <span id="child">Hello World</span>
+    <span id="child">Hello Wor1d</span>
   </div>
   <form name="login">
     <input type="email" id="eml" title="Email" value="random@email.test">

package/types/data.d.ts

@@ -247,7 +247,9 @@ export const enum Constant {
     UserId = "userId",
     SessionId = "sessionId",
     PageId = "pageId",
-    Mask = "•",
+    Mask = "•", // Placeholder character for explicitly masked content
+    Digit = "•", // Placeholder character for digits
+    Letter = "•", // Placeholder character for letters
     SessionStorage = "sessionStorage",
     Cookie = "cookie",
     Navigation = "navigation",

package/types/index.d.ts

@@ -18,12 +18,17 @@ interface Clarity {
   metadata: (callback: Data.MetadataCallback, wait?: boolean) => void;
 }
 
+interface Selector {
+  get: (input: Layout.SelectorInput, type: Layout.Selector) => string;
+  reset: () => void;
+}
+
 interface Helper {
   get: (node: Node) => Layout.NodeValue;
   getNode: (id: number) => Node;
   hash: (input: string) => string;
   lookup: (hash: string) => number;
-  selector: (input: Layout.SelectorInput, beta?: boolean) => string;
+  selector: Selector;
 }
 
 declare const clarity: Clarity;

package/types/layout.d.ts

@@ -1,5 +1,4 @@
 import { Privacy } from "@clarity-types/core";
-import { BooleanFlag } from "@clarity-types/data";
 
 /* Enum */
 
@@ -12,8 +11,9 @@ export const enum Source {
 }
 
 export const enum Selector {
-    Stable = 0,
-    Beta = 1
+    Alpha = 0,
+    Beta = 1,
+    Default = 1
 }
 
 export const enum InteractionState {
@@ -29,7 +29,8 @@ export const enum RegionVisibility {
 }
 
 export const enum Mask {
-    Text = "password,secret,pass,social,ssn,name,code,dob,cell,mob,contact,hidden,account,cvv,ccv,email,tel,phone,address,addr,card,zip",
+    Text = "address,password,contact",
+    Input = "password,secret,pass,social,ssn,name,code,dob,cell,mob,contact,hidden,account,cvv,ccv,email,tel,phone,address,addr,card,zip",
     Disable = "radio,checkbox,range,button,reset,submit"
 }
 
@@ -44,7 +45,10 @@ export const enum Constant {
     Href = "href",
     Src = "src",
     Srcset = "srcset",
-    Box = "#",
+    Hash = "#",
+    Dot = ".",
+    Separator = ">",
+    Tilde = "~",
     Bang = "!",
     Period = ".",
     Comma = ",",
@@ -90,7 +94,9 @@ export const enum Constant {
     Content = "content",
     Generator = "generator",
     ogType = "og:type",
-    ogTitle = "og:title"
+    ogTitle = "og:title",
+    SvgStyle = "svg:style",
+    ExcludeClassNames = "load,active,fixed,visible,focus,show,collaps,animat"
 }
 
 export const enum JsonLD { 
@@ -138,6 +144,7 @@ export interface Attributes {
 }
 
 export interface SelectorInput {
+    id: number;
     tag: string;
     prefix: [string, string];
     position: number;