clarity-js 0.6.35 → 0.6.38

package/package.json

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

package/src/core/scrub.ts

@@ -2,6 +2,13 @@ import { Privacy } from "@clarity-types/core";
 import * as Data from "@clarity-types/data";
 import * as Layout from "@clarity-types/layout";
 
+// Regular expressions using unicode property escapes
+// Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Unicode_Property_Escapes
+const digitRegex = /\p{N}/gu;
+const letterRegex = /\p{L}/gu;
+const currencyRegex = /\p{Sc}/u;
+const catchallRegex = /\S/gi;
+
 export default function(value: string, hint: string, privacy: Privacy, mangle: boolean = false): string {
     if (value) {
         switch (privacy) {
@@ -12,9 +19,9 @@ export default function(value: string, hint: string, privacy: Privacy, mangle: b
                     case Layout.Constant.TextTag:
                     case "value":
                     case "placeholder":
-                        return redact(value);
+                    case "click":
                     case "input":
-                        return mangleToken(value);
+                        return redact(value);
                 }
                 return value;
             case Privacy.Text:
@@ -53,7 +60,7 @@ function mangleText(value: string): string {
 }
 
 function mask(value: string): string {
-    return value.replace(/\S/gi, Data.Constant.Mask);
+    return value.replace(catchallRegex, Data.Constant.Mask);
 }
 
 function mangleToken(value: string): string {
@@ -67,6 +74,7 @@ function mangleToken(value: string): string {
 
 function redact(value: string): string {
     let spaceIndex = -1;
+    let gap = 0;
     let hasDigit = false;
     let hasEmail = false;
     let hasWhitespace = false;
@@ -82,7 +90,18 @@ function redact(value: string): string {
             // Performance optimization: Lazy load string -> array conversion only when required
             if (hasDigit || hasEmail) {
                 if (array === null) { array = value.split(Data.Constant.Empty); }
-                mutate(array, spaceIndex, hasWhitespace ? i : i + 1);
+                // Work on a token at a time so we don't have to apply regex to a larger string
+                let token = value.substring(spaceIndex + 1, hasWhitespace ? i : i + 1);
+                // Check if unicode regex is supported, otherwise fallback to calling mask function on this token
+                if (currencyRegex.unicode) {
+                    // Do not redact information if the token contains a currency symbol
+                    token = token.match(currencyRegex) ? token : token.replace(letterRegex, Data.Constant.Letter).replace(digitRegex, Data.Constant.Digit);
+                } else {
+                    token = mask(token);
+                }
+                // Merge token back into array at the right place
+                array.splice(spaceIndex + 1 - gap, token.length, token);
+                gap += token.length - 1;
             }
             // Reset digit and email flags after every word boundary, except the beginning of string
             if (hasWhitespace) {
@@ -94,9 +113,3 @@ function redact(value: string): string {
     }
     return array ? array.join(Data.Constant.Empty) : value;
 }
-
-function mutate(array: string[], start: number, end: number): void {
-    for (let i = start + 1; i < end; i++) {
-        array[i] = Data.Constant.Mask;
-    }
-}

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.35";
+let version = "0.6.38";
 export default version;

package/src/interaction/pointer.ts

@@ -20,7 +20,7 @@ export function observe(root: Node): void {
     bind(root, "mousedown", mouse.bind(this, Event.MouseDown, root), true);
     bind(root, "mouseup", mouse.bind(this, Event.MouseUp, root), true);
     bind(root, "mousemove", mouse.bind(this, Event.MouseMove, root), true);
-    bind(root, "mousewheel", mouse.bind(this, Event.MouseWheel, root), true);
+    bind(root, "wheel", mouse.bind(this, Event.MouseWheel, root), true);
     bind(root, "dblclick", mouse.bind(this, Event.DoubleClick, root), true);
     bind(root, "touchstart", touch.bind(this, Event.TouchStart, root), true);
     bind(root, "touchend", touch.bind(this, Event.TouchEnd, root), true);

package/src/layout/dom.ts

@@ -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,6 +44,7 @@ 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();
@@ -97,6 +99,7 @@ export function add(node: Node, parent: Node, data: NodeInfo, source: Source): v
         regionId = regionId === null ? parentValue.region : regionId;
         fragmentId = parentValue.fragment;
         fraudId = fraudId === null ? parentValue.metadata.fraud : fraudId;
+        privacyId = parentValue.metadata.privacy;
     }
 
     // If there's an explicit region attribute set on the element, use it to mark a region on the page
@@ -240,30 +243,29 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
             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;

package/src/layout/mutation.ts

@@ -114,7 +114,7 @@ function handle(m: MutationRecord[]): void {
   summary.track(Event.Mutation, now);
   mutations.push({ time: now, mutations: m});
   task.schedule(process, Priority.High).then((): void => {
-      measure(doc.compute)();
+      setTimeout(doc.compute)
       measure(region.compute)();
   });
 }

package/src/layout/node.ts

@@ -7,7 +7,7 @@ import * as interaction from "@src/interaction";
 import * as mutation from "@src/layout/mutation";
 import * as schema from "@src/layout/schema";
 
-const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror"];
+const IGNORE_ATTRIBUTES = ["title", "alt", "onload", "onfocus", "onerror", "data-drupal-form-submit-last"];
 const newlineRegex = /[\r\n]+/g;
 
 export default function (node: Node, source: Source): Node {

package/test/core.test.ts

@@ -1,6 +1,6 @@
-import { expect } from 'chai';
+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
-        expect(heading, "Thanks for your order •••••••••");
+        assert.equal(heading, "Thanks for your order #••••••••");
 
         // Sensitive fields, including input fields, are randomized and masked
-        expect(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
-        expect(search.attributes.value, "••••• •••• ••••");
+        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,16 +58,22 @@ 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
-        expect(heading, "• ••••• ••••• ••••• ••••• •••••");
-        expect(address, "•••••• ••••• ••••• ••••• ••••• •••••");
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
-        expect(search.attributes.value, "••••• •••• ••••");
+        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        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 mask all text in relaxed mode', async () => {
+    it('should unmask all text in relaxed mode', async () => {
         let encoded: string[] = await markup(page, "core.html", { unmask: ["body"] });
         let decoded = encoded.map(x => decode(x));
         let heading = text(decoded, "one");
@@ -69,14 +81,35 @@ 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
-        expect(heading, "Thanks for your order #2AB700GH");
-        expect(address, "1 Microsoft Way, Redmond, WA - 98052");
-        expect(search.attributes.value, "hello world");
+        assert.equal(heading, "Thanks for your order #2AB700GH");
+        assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
+        assert.equal(search.attributes.value, "hello w0rld");
 
         // Sensitive fields are still masked
-        expect(email.attributes.value, "••••• •••• •••• ••••");
-        expect(password.attributes.value, "••••• ••••");
+        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;
 
@@ -78,6 +106,10 @@ function config(override: Core.Config): string {
     const settings = {
         delay: 100,
         content: true,
+        fraud: [],
+        regions: [],
+        mask: [],
+        unmask: [],
         upload: payload => { window["payloads"].push(payload); window["clarity"]("upgrade", "test"); }
     }
 
@@ -100,6 +132,7 @@ function config(override: Core.Config): string {
             case "unmask":
             case "regions":
             case "cookies":
+            case "fraud":
                 output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
                 break;
             default:

package/test/html/core.html

@@ -8,10 +8,13 @@
     <h1 id="one">Thanks for your order #2AB700GH</h1>
     <p id="two" class="address-details">1 Microsoft Way, Redmond, WA - 98052</p>
   </div>
+  <div id="mask">
+    <span id="child">Hello Wor1d</span>
+  </div>
   <form name="login">
     <input type="email" id="eml" title="Email" value="random@email.test">
     <input type="password" id="pwd" title="Password" maxlength="16" value="passw0rd">
-    <input type="search" id="search" title="Search" value="hello world">
+    <input type="search" id="search" title="Search" value="hello w0rld">
   </form>
 </body>
 </html>

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/layout.d.ts

@@ -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"
 }