@gemx-dev/clarity-js 0.8.39

package/test/core.test.ts

@@ -0,0 +1,139 @@
+import { assert } from "chai";
+import { Browser, Page } from "playwright";
+import { changes, clicks, inputs, launch, markup, node, text } from "./helper";
+import { decode } from "clarity-decode";
+
+let browser: Browser;
+let page: Page;
+
+describe("Core Tests", () => {
+    before(async () => {
+        browser = await launch();
+    });
+
+    beforeEach(async () => {
+        page = await browser.newPage();
+        await page.goto("about:blank");
+    });
+
+    afterEach(async () => {
+        await page.close();
+    });
+
+    after(async () => {
+        await browser.close();
+        browser = null;
+    });
+
+    it("should mask sensitive content by default", async () => {
+        let encoded: string[] = await markup(page, "core.html");
+        let decoded = encoded.map((x) => decode(x));
+        let heading = text(decoded, "one");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let option = text(decoded, "option1");
+        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 #▫▪▪▫▫▫▪▪");
+
+        // 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, "••••• •••• ••••");
+        assert.equal(card.attributes.value, "•••••");
+        assert.equal(textarea, "••••• •••••");
+        assert.equal(option, "• •••••");
+
+        // Clicked text and input value should be consistent with uber masking configuration
+        assert.equal(click.data.text, "Hello ▪▪▪▫▪");
+        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 () => {
+        let encoded: string[] = await markup(page, "core.html", { content: false });
+        let decoded = encoded.map((x) => decode(x));
+        let heading = text(decoded, "one");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        let option = text(decoded, "option1");
+
+        // All fields are randomized and masked
+        assert.equal(heading, "• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(address, "•••••• ••••• ••••• ••••• ••••• •••••");
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(search.attributes.value, "••••• •••• ••••");
+        assert.equal(card.attributes.value, "•••••");
+        assert.equal(option, "• •••••");
+
+        // 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 non-sensitive 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");
+        let address = text(decoded, "two");
+        let email = node(decoded, "attributes.id", "eml");
+        let password = node(decoded, "attributes.id", "pwd");
+        let search = node(decoded, "attributes.id", "search");
+        let card = node(decoded, "attributes.id", "cardnum");
+        let click = clicks(decoded)[0];
+        let input = inputs(decoded)[0];
+        let option = text(decoded, "option1");
+
+        // 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, "••••• •••• ••••");
+        assert.equal(option, "• •••••");
+
+        // Sensitive fields are still masked
+        assert.equal(email.attributes.value, "••••• •••• •••• ••••");
+        assert.equal(password.attributes.value, "••••");
+        assert.equal(card.attributes.value, "•••••");
+
+        // 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, "••••• •••• •••• ••••");
+    });
+
+    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 and input value is also masked
+        assert.equal(click.data.text, "••••• •••• ••••");
+        assert.equal(input.data.value, "••••• •••• •••• ••••");
+    });
+});

package/test/helper.ts

@@ -0,0 +1,167 @@
+import { Core, Data, decode, Interaction, Layout } from "clarity-decode";
+import * as fs from "fs";
+import * as url from "url";
+import * as path from "path";
+import { Browser, Page, chromium } from "playwright";
+
+export async function launch(): Promise<Browser> {
+    return chromium.launch({ headless: false, args: ["--no-sandbox"] });
+}
+
+export async function markup(page: Page, file: string, override: Core.Config = null): Promise<string[]> {
+    const htmlPath = path.resolve(__dirname, `./html/${file}`);
+    const htmlFileUrl = url.pathToFileURL(htmlPath).toString();
+    const html = fs.readFileSync(htmlPath, "utf8");
+    await Promise.all([page.goto(htmlFileUrl), page.waitForNavigation()]);
+    await page.setContent(
+        html.replace(
+            "</body>",
+            `
+        <script>
+          window.payloads = [];
+          ${fs.readFileSync(path.resolve(__dirname, `../build/clarity.min.js`), "utf8")};
+          clarity("start", ${config(override)});
+        </script>
+        </body>
+    `
+        )
+    );
+    await page.hover("#two");
+    await page.click("#child");
+    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");
+}
+
+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 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;
+
+    // Exploding nested keys into key and sub key
+    if (key.indexOf(".") > 0) {
+        const parts = key.split(".");
+        if (parts.length === 2) {
+            key = parts[0];
+            sub = parts[1];
+        }
+    }
+
+    // Walking over the decoded payload to find the right match
+    for (let i = decoded.length - 1; i >= 0; i--) {
+        if (decoded[i].dom) {
+            for (let j = 0; j < decoded[i].dom.length; j++) {
+                if (decoded[i].dom[j].data) {
+                    for (let k = 0; k < decoded[i].dom[j].data.length; k++) {
+                        let d = decoded[i].dom[j].data[k];
+                        if ((sub && d[key] && d[key][sub] === value) || (d[key] && d[key] === value)) {
+                            if ((tag && d.tag === tag) || tag === null) {
+                                return d;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return null;
+}
+
+export function text(decoded: Data.DecodedPayload[], id: string): string {
+    let parent = node(decoded, "attributes.id", id);
+    if (parent) {
+        let child = node(decoded, "parent", parent.id, "*T");
+        if (child && child.value) {
+            return child.value;
+        }
+    }
+    return null;
+}
+
+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");
+        },
+    };
+
+    // Process overrides
+    if (override) {
+        for (let key of Object.keys(override)) {
+            settings[key] = override[key];
+        }
+    }
+
+    // Serialize configuration
+    let output = "";
+    for (let key of Object.keys(settings)) {
+        switch (key) {
+            case "upload":
+                output += `${JSON.stringify(key)}: ${settings[key].toString()},`;
+                break;
+            case "projectId":
+            case "mask":
+            case "unmask":
+            case "regions":
+            case "cookies":
+            case "fraud":
+                output += `${JSON.stringify(key)}: ${JSON.stringify(settings[key])},`;
+                break;
+            default:
+                output += `${JSON.stringify(key)}: ${settings[key]},`;
+                break;
+        }
+    }
+    output += `"projectId": "test"`;
+    return "{" + output + "}";
+}

package/test/html/core.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Core Tests</title>
+        <style>
+            input,
+            textarea,
+            select {
+                margin: 10px;
+                display: block;
+            }
+        </style>
+    </head>
+    <body>
+        <div>
+            <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 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>
+            <select id="select" ng-options="origin.code" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                <option id="option1" label="Halifax" value="string:YHZ">Halifax</option>
+                <option id="option2" label="Montréal" value="string:YUL" selected="selected">Montréal</option>
+            </select>
+        </form>
+    </body>
+</html>

package/test/stub.test.ts

@@ -0,0 +1,7 @@
+import { assert } from 'chai';
+
+describe('Stub Tests! Replace with working real tests!', () => {
+    it('should be a successful test', () => {
+        assert.isTrue(true);
+    });
+});

package/test/tsconfig.test.json

@@ -0,0 +1,6 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "module": "commonjs"
+    }
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "module": "esnext",
+        "target": "es5",
+        "lib": ["es6", "dom", "es2016", "es2017"],
+        "moduleResolution": "node",
+        "forceConsistentCasingInFileNames": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "resolveJsonModule": true,
+        "esModuleInterop": true,
+        "baseUrl": ".",
+        "paths": {
+            "@src/*": ["src/*"],
+            "@clarity-types/*": ["types/*"]
+        }
+    },
+    "include":["src/**/*.ts","types/**/*.d.ts", "rollup.config.ts"],
+    "exclude": ["test", "node_modules", "build"]
+}

package/tslint.json

@@ -0,0 +1,33 @@
+{
+  "extends": "tslint:recommended",
+  "rules": {
+    "max-line-length": [
+      true,
+      140
+    ],
+    "no-console": [
+      false
+    ],
+    "no-string-literal": false,
+    "prefer-const": false,
+    "prefer-for-of": false,
+    "object-literal-sort-keys": false,
+    "one-variable-per-declaration": false,
+    "trailing-comma": [
+      false
+    ],
+    "variable-name": false,
+    "interface-name": false,
+    "interface-over-type-literal": false,
+    "only-arrow-functions": false,
+    "typedef": [
+      true,
+      "call-signature",
+      "parameter",
+      "property-declaration",
+      "member-variable-declaration",
+      "object-destructuring",
+      "array-destructuring"
+    ]
+  }
+}

package/types/agent.d.ts

@@ -0,0 +1,39 @@
+export const enum Action {
+  AgentOnline,
+  AgentOffline,
+  AgentHidden,
+  AgentMaximized,
+  AgentMinimized,
+  AgentMessage,
+  HumanMessage,
+}
+
+export const enum AuthorType {
+  Agent = "agent",
+  Customer = "customer",
+}
+
+export const enum Visibility {
+  Maximized = "maximized",
+  Minimized = "minimized",
+  Hidden = "hidden",
+}
+
+export const enum Availability {
+  Online = "online",
+  Offline = "offline",
+}
+
+export interface VisibilityEvent {
+  visibility: Visibility;
+}
+
+export interface AvailabilityEvent {
+  availability: Availability;
+}
+
+export interface NewEvent {
+  author: {
+    type: AuthorType;
+  };
+}

package/types/core.d.ts

@@ -0,0 +1,150 @@
+import * as Data from "./data";
+
+type TaskFunction = () => Promise<void>;
+type TaskResolve = () => void;
+type UploadCallback = (data: string) => void;
+type Region = [number /* RegionId */, string /* Query Selector */];
+type Checksum = [number /* FraudId */, string /* Query Selector */];
+
+/* Enum */
+
+export const enum Priority {
+    Normal = 0,
+    High = 1
+}
+
+export const enum Time {
+    Second = 1000,
+    Minute = 60 * 1000,
+    Hour = 60 * 60 * 1000,
+    Day = 24 * 60 * 60 * 1000
+}
+
+export const enum Task {
+    Wait = 0,
+    Run = 1,
+    Stop = 2
+}
+
+export const enum ExtractSource {
+    Javascript = 0,
+    Cookie = 1,
+    Text = 2,
+    Fragment = 3,
+    Hash = 4
+}
+
+export const enum Type {
+    Array = 1,
+    Object = 2,
+    Simple = 3
+}
+
+export type Syntax = {
+    name: string,
+    type: Type,
+    condition: string
+}
+
+export const enum Privacy {
+    None = 0,
+    Sensitive = 1,
+    Text = 2,
+    TextImage = 3,
+    Exclude = 4,
+    Snapshot = 5
+}
+
+/* Helper Interfaces */
+
+export interface Module {
+    start: () => void;
+    stop: () => void;
+}
+
+export interface Tasks {
+    [key: number]: TaskInfo;
+}
+
+export interface TaskInfo {
+    start: number;
+    calls: number;
+    yield: number;
+}
+
+export interface Timer {
+    id: string;
+    cost: Data.Metric;
+}
+
+export interface RequestIdleCallbackOptions {
+    timeout: number;
+}
+
+export interface RequestIdleCallbackDeadline {
+    didTimeout: boolean;
+    timeRemaining: (() => number);
+}
+
+export interface AsyncTask {
+    task: TaskFunction;
+    resolve: TaskResolve;
+    id: string;
+}
+
+export interface OffsetDistance {
+    x: number;
+    y: number;
+}
+
+export interface BrowserEvent {
+    event: string;
+    listener: EventListener;
+    options: {
+        capture: boolean;
+        passive: boolean;
+    };
+}
+
+export interface Report {
+    v: string; // Version
+    p: string; // Project Id
+    u: string; // User Id
+    s: string; // Session Id
+    n: number; // Page Number
+    m?: string; // Message, optional
+    e?: string; // Error Stack, optional
+}
+
+export interface Config {
+    projectId?: string;
+    delay?: number;
+    lean?: boolean;
+    lite?: boolean;
+    track?: boolean;
+    content?: boolean;
+    drop?: string[];
+    mask?: string[];
+    unmask?: string[];
+    regions?: Region[];
+    cookies?: string[];
+    fraud?: boolean;
+    checksum?: Checksum[];
+    report?: string;
+    upload?: string | UploadCallback;
+    fallback?: string;
+    upgrade?: (key: string) => void;
+    action?: (key: string) => void;
+    dob?: number;
+    delayDom?: boolean;
+    throttleDom?: boolean;
+    conversions?: boolean;
+    includeSubdomains?: boolean;
+}
+
+export const enum Constant {
+    Zone = "Zone",
+    Symbol = "__symbol__",
+    AddEventListener = "addEventListener",
+    RemoveEventListener = "removeEventListener"
+}