clarity-js 0.6.42 → 0.7.0

package/src/layout/index.ts

@@ -4,6 +4,8 @@ import * as dom from "@src/layout/dom";
 import * as mutation from "@src/layout/mutation";
 import * as region from "@src/layout/region";
 
+export { hashText } from "@src/layout/dom";
+
 export function start(): void {
     // The order below is important 
     // and is determined by interdependencies of modules

package/src/layout/node.ts

@@ -127,9 +127,20 @@ export default function (node: Node, source: Source): Node {
                     break;
                 case "HEAD":
                     let head = { tag, attributes };
-                    if (location) { head.attributes[Constant.Base] = location.protocol + "//" + location.hostname; }
+                    let l = insideFrame && node.ownerDocument?.location ? node.ownerDocument.location : location;
+                    head.attributes[Constant.Base] = l.protocol + "//" + l.hostname + l.pathname;
                     dom[call](node, parent, head, source);
                     break;
+                case "BASE":
+                    // Override the auto detected base path to explicit value specified in this tag
+                    let baseHead = dom.get(node.parentElement);
+                    if (baseHead) {
+                        // We create "a" element so we can generate protocol and hostname for relative paths like "/path/"
+                        let a = document.createElement("a");
+                        a.href = attributes["href"];
+                        baseHead.data.attributes[Constant.Base] = a.protocol + "//" + a.hostname + a.pathname;
+                    }
+                    break;
                 case "STYLE":
                     let styleData = { tag, attributes, value: getStyleValue(element as HTMLStyleElement) };
                     dom[call](node, parent, styleData, source);

package/src/performance/observer.ts

@@ -12,6 +12,11 @@ let observer: PerformanceObserver;
 const types: string[] = [Constant.Navigation, Constant.Resource, Constant.LongTask, Constant.FID, Constant.CLS, Constant.LCP];
 
 export function start(): void {
+    // Capture connection properties, if available
+    if (navigator && "connection" in navigator) {
+        dimension.log(Dimension.ConnectionType, navigator["connection"]["effectiveType"]);
+    }
+
     // Check the browser support performance observer as a pre-requisite for any performance measurement
     if (window["PerformanceObserver"] && PerformanceObserver.supportedEntryTypes) {
         // Start monitoring performance data after page has finished loading.

package/test/core.test.ts

@@ -1,7 +1,7 @@
 import { assert } from 'chai';
 import { Browser, Page } from 'playwright';
-import { clicks, inputs, launch, markup, node, text } from './helper';
-import { Data, decode } from "clarity-decode";
+import { changes, clicks, inputs, launch, markup, node, text } from './helper';
+import { decode } from "clarity-decode";
 
 let browser: Browser;
 let page: Page;
@@ -34,8 +34,10 @@ describe('Core Tests', () => {
         let password = node(decoded, "attributes.id", "pwd");
         let search = node(decoded, "attributes.id", "search");
         let card = node(decoded, "attributes.id", "cardnum");
+        let textarea = text(decoded, "textarea");
         let click = clicks(decoded)[0];
         let input = inputs(decoded)[0];
+        let group = changes(decoded);
         
         // Non-sensitive fields continue to pass through with sensitive bits masked off
         assert.equal(heading, "Thanks for your order #▫▪▪▫▫▫▪▪");
@@ -43,13 +45,23 @@ describe('Core Tests', () => {
         // 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 ▪▫▪▪▪");
-        assert.equal(card.attributes.value, "▫▫▫▫");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
+        assert.equal(card.attributes.value, "•••••");
+        assert.equal(textarea, "••••• •••••");
 
         // 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 ▪▪▪▪▫▪▪");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+        assert.equal(group.length, 2);
+        // Search change - we should captured mangled input and hash
+        assert.equal(group[0].data.type, "search");
+        assert.equal(group[0].data.value, "••••• •••• •••• ••••");
+        assert.equal(group[0].data.checksum, "4y7m6");
+        // Password change - we should capture placholder value and empty hash
+        assert.equal(group[1].data.type, "password");
+        assert.equal(group[1].data.value, "••••");
+        assert.equal(group[1].data.checksum, "");
     });
 
     it('should mask all text in strict mode', async () => {
@@ -68,7 +80,7 @@ describe('Core Tests', () => {
         assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
         assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
         assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••• ••••");
+        assert.equal(password.attributes.value, "••••");
         assert.equal(search.attributes.value, "••••• •••• ••••");
         assert.equal(card.attributes.value, "•••••");
 
@@ -89,19 +101,19 @@ describe('Core Tests', () => {
         let click = clicks(decoded)[0];
         let input = inputs(decoded)[0];
 
-        // Text flows through unmasked for non-sensitive fields, including input fields
+        // Text flows through unmasked for non-sensitive fields, with exception of input fields
         assert.equal(heading, "Thanks for your order #2AB700GH");
         assert.equal(address, "1 Microsoft Way, Redmond, WA - 98052");
-        assert.equal(search.attributes.value, "hello w0rld");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
 
         // Sensitive fields are still masked
         assert.equal(email.attributes.value, "••••• •••• •••• ••••");
-        assert.equal(password.attributes.value, "••••• ••••");
+        assert.equal(password.attributes.value, "••••");
         assert.equal(card.attributes.value, "•••••");
 
-        // Clicked text and input value (non-sensitive) both come through without masking in relaxed mode
+        // Clicked text comes through unmasked in relaxed mode but input is still masked
         assert.equal(click.data.text, "Hello Wor1d");
-        assert.equal(input.data.value, "query with numb3rs");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
     });
 
     it('should respect mask config even in relaxed mode', async () => {
@@ -114,8 +126,8 @@ describe('Core Tests', () => {
         // 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
+        // Clicked text is masked due to masked configuration and input value is also masked
         assert.equal(click.data.text, "••••• •••• ••••");
-        assert.equal(input.data.value, "query with numb3rs");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
     });
 });

package/test/helper.ts

@@ -26,7 +26,11 @@ export async function markup(page: Page, file: string, override: Core.Config = n
     `));
     await page.hover("#two");
     await page.click("#child");
-    await page.locator('#search').fill('query with numb3rs');
+    await page.locator('#search').fill('');
+    await page.locator('#search').type('query with numb3rs');
+    await page.locator('#pwd').type('p1ssw0rd');
+    await page.locator('#eml').fill('');
+    await page.locator('#eml').type('hello@world.com');
     await page.waitForFunction("payloads && payloads.length > 2");
     return await page.evaluate('payloads');
 }
@@ -57,6 +61,19 @@ export function inputs(decoded: Data.DecodedPayload[]): Interaction.InputEvent[]
     return output;
 }
 
+export function changes(decoded: Data.DecodedPayload[]): Interaction.ChangeEvent[] {
+    let output: Interaction.ChangeEvent[] = [];
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].change) {
+            for (let j = 0; j < decoded[i].change.length;j++)
+            {
+                output.push(decoded[i].change[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

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Core Tests</title>
+  <style>input, textarea, select { margin: 10px; display: block; }</style>
 </head>
 <body>
   <div>
@@ -16,6 +17,7 @@
     <input type="password" id="pwd" title="Password" maxlength="16" value="passw0rd">
     <input type="search" id="search" title="Search" value="hello w0rld">
     <input type="text" id="cardnum" title="CC" value="1234">
+    <textarea id="textarea" autocapitalize="off" role="combobox" rows="5" placeholder="" spellcheck="false">Hell0 World</textarea>
   </form>
 </body>
 </html>

package/types/core.d.ts

@@ -4,7 +4,7 @@ type TaskFunction = () => Promise<void>;
 type TaskResolve = () => void;
 type UploadCallback = (data: string) => void;
 type Region = [number /* RegionId */, string /* Query Selector */];
-type Fraud = [number /* FraudId */, string /* Query Selector */];
+type Checksum = [number /* FraudId */, string /* Query Selector */];
 export type Extract = ExtractSource /* Extraction Source */ | number /* Extract Id */ | string  | string[] /* Hash or Query Selector or String Token */;
 
 /* Enum */
@@ -123,12 +123,14 @@ export interface Config {
     lean?: boolean;
     track?: boolean;
     content?: boolean;
+    drop?: string[];
     mask?: string[];
     unmask?: string[];
     regions?: Region[];
     extract?: Extract[];
     cookies?: string[];
-    fraud?: Fraud[];
+    fraud?: boolean;
+    checksum?: Checksum[];
     report?: string;
     upload?: string | UploadCallback;
     fallback?: string;

package/types/data.d.ts

@@ -62,7 +62,8 @@ export const enum Event {
     Clipboard = 38,
     Submit = 39,
     Extract = 40,
-    Fraud = 41
+    Fraud = 41,
+    Change = 42
 }
 
 export const enum Metric {
@@ -96,7 +97,11 @@ export const enum Metric {
     Mobile = 27,
     UploadTime = 28,
     SinglePage = 29,
-    UsedMemory = 30
+    UsedMemory = 30,
+    Iframed = 31,
+    MaxTouchPoints = 32,
+    HardwareConcurrency = 33,
+    DeviceMemory = 34
 }
 
 export const enum Dimension {
@@ -125,7 +130,9 @@ export const enum Dimension {
     Platform = 22,
     PlatformVersion = 23,
     Brand = 24,
-    Model = 25
+    Model = 25,
+    DevicePixelRatio = 26,
+    ConnectionType = 27
 }
 
 export const enum Check {
@@ -170,6 +177,12 @@ export const enum BooleanFlag {
     True = 1
 }
 
+export const enum IframeStatus {
+    Unknown = 0,
+    TopFrame = 1,
+    Iframe = 2
+}
+
 export const enum Setting {
     Expire = 365, // 1 Year
     SessionExpire = 1, // 1 Day
@@ -200,7 +213,8 @@ export const enum Setting {
     UploadFactor = 3, // Slow down sequence by specified factor
     MinUploadDelay = 100, // Minimum time before we are ready to flush events to the server
     MaxUploadDelay = 30 * Time.Second, // Do flush out payload once every 30s,
-    ExtractLimit = 10000 // Do not extract more than 10000 characters
+    ExtractLimit = 10000, // Do not extract more than 10000 characters
+    ChecksumPrecision = 24 // n-bit integer to represent token hash 
 }
 
 export const enum Character {
@@ -227,6 +241,7 @@ export const enum Constant {
     Space = " ",
     Expires = "expires=",
     Domain = "domain=",
+    Dropped = "*na*",
     Comma = ",",
     Dot = ".",
     Semicolon = ";",

package/types/diagnostic.d.ts

@@ -20,5 +20,5 @@ export interface LogData {
 export interface FraudData {
     id: number;
     target: number;
-    hash: string;
+    checksum: string;
 }

package/types/interaction.d.ts

@@ -12,6 +12,7 @@ export const enum BrowsingContext {
 
 export const enum Setting {
     LookAhead = 500, // 500ms
+    InputLookAhead = 1000, // 1s
     Distance = 20, // 20 pixels
     Interval = 25, // 25 milliseconds
     TimelineSpan = 2 * Time.Second, // 2 seconds
@@ -54,6 +55,12 @@ export interface SubmitState {
     data: SubmitData;
 }
 
+export interface ChangeState {
+    time: number;
+    event: number;
+    data: ChangeData;
+}
+
 export interface InputState {
     time: number;
     event: number;
@@ -76,6 +83,13 @@ export interface TimelineData {
     context: number;
 }
 
+export interface ChangeData {
+    target: Target;
+    type: string;
+    value: string;
+    checksum: string;
+}
+
 export interface InputData {
     target: Target;
     value: string;

package/types/layout.d.ts

@@ -30,8 +30,9 @@ export const enum RegionVisibility {
 
 export const enum Mask {
     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"
+    Disable = "radio,checkbox,range,button,reset,submit",
+    Exclude = "password,secret,pass,social,ssn,code,hidden",
+    Tags = "INPUT,SELECT,TEXTAREA"
 }
 
 export const enum Constant {