clarity-js 0.6.43 → 0.7.0

package/package.json

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

package/src/core/config.ts

@@ -6,12 +6,14 @@ let config: Config = {
     lean: false,
     track: true,
     content: true,
+    drop: [],
     mask: [],
     unmask: [],
     regions: [],
     extract: [],
     cookies: [],
-    fraud: [],
+    fraud: true,
+    checksum: [],
     report: null,
     upload: null,
     fallback: null,

package/src/core/hash.ts

@@ -1,5 +1,5 @@
 // tslint:disable: no-bitwise
-export default function(input: string): string {
+export default function(input: string, precision: number = null): string {
     // Code inspired from C# GetHashCode: https://github.com/Microsoft/referencesource/blob/master/mscorlib/system/string.cs
     let hash = 0;
     let hashOne = 5381;
@@ -15,5 +15,5 @@ export default function(input: string): string {
     // Replace the magic number from C# implementation (1566083941) with a smaller prime number (11579)
     // This ensures we don't hit integer overflow and prevent collisions
     hash = Math.abs(hashOne + (hashTwo * 11579));
-    return hash.toString(36);
+    return (precision ? hash % Math.pow(2, precision) : hash).toString(36);
 }

package/src/core/scrub.ts

@@ -1,6 +1,7 @@
 import { Privacy } from "@clarity-types/core";
 import * as Data from "@clarity-types/data";
 import * as Layout from "@clarity-types/layout";
+import config from "@src/core/config";
 
 const catchallRegex = /\S/gi;
 let unicodeRegex = true;
@@ -8,7 +9,7 @@ let digitRegex = null;
 let letterRegex = null;
 let currencyRegex = null;
 
-export default function(value: string, hint: string, privacy: Privacy, mangle: boolean = false): string {
+export function text(value: string, hint: string, privacy: Privacy, mangle: boolean = false): string {
     if (value) {
         switch (privacy) {
             case Privacy.None:
@@ -19,8 +20,10 @@ export default function(value: string, hint: string, privacy: Privacy, mangle: b
                     case "value":
                     case "placeholder":
                     case "click":
-                    case "input":
                         return redact(value);
+                    case "input":
+                    case "change":
+                        return mangleToken(value);
                 }
                 return value;
             case Privacy.Text:
@@ -36,16 +39,37 @@ export default function(value: string, hint: string, privacy: Privacy, mangle: b
                     case "value":
                     case "click":
                     case "input":
+                    case "change":
                         return mangleToken(value);
                     case "placeholder":
                         return mask(value);
                 }
                 break;
+            case Privacy.Exclude:
+                switch (hint) {
+                    case "value":
+                    case "input":
+                    case "click":
+                    case "change":
+                        return Array(Data.Setting.WordLength).join(Data.Constant.Mask);
+                    case "checksum":
+                        return Data.Constant.Empty;
+                }
         }
     }
     return value;
 }
 
+export function url(input: string): string {
+    let drop = config.drop;
+    if (drop && drop.length > 0 && input && input.indexOf("?") > 0) {
+      let [path, query] = input.split("?");
+      let swap = Data.Constant.Dropped;
+      return path + "?" + query.split("&").map(p => drop.some(x => p.indexOf(`${x}=`) === 0) ? `${p.split("=")[0]}=${swap}` : p).join("&");
+    }
+    return input;
+}
+
 function mangleText(value: string): string {
     let trimmed = value.trim();
     if (trimmed.length > 0) {

package/src/core/time.ts

@@ -4,8 +4,8 @@ export function start(): void {
     startTime = performance.now();
 }
 
-export function time(ts: number = null): number {
-    ts = ts ? ts : performance.now();
+export function time(event: UIEvent = null): number {
+    let ts = event && event.timeStamp > 0 ? event.timeStamp : performance.now();
     return Math.max(Math.round(ts - startTime), 0);
 }
 

package/src/core/version.ts

@@ -1,2 +1,2 @@
-let version = "0.6.43";
+let version = "0.7.0";
 export default version;

package/src/data/metadata.ts

@@ -3,6 +3,7 @@ import { BooleanFlag, Constant, Dimension, Metadata, MetadataCallback, MetadataC
 import * as core from "@src/core";
 import config from "@src/core/config";
 import hash from "@src/core/hash";
+import * as scrub from "@src/core/scrub";
 import * as dimension from "@src/data/dimension";
 import * as metric from "@src/data/metric";
 import { set } from "@src/data/variable";
@@ -19,32 +20,35 @@ export function start(): void {
   // Populate ids for this page
   let s = session();
   let u = user();
-  data = {
-    projectId: config.projectId || hash(location.host),
-    userId: u.id,
-    sessionId: s.session,
-    pageNum: s.count
-  }
+  let projectId = config.projectId || hash(location.host);
+  data = { projectId, userId: u.id, sessionId: s.session, pageNum: s.count };
 
   // Override configuration based on what's in the session storage, unless it is blank (e.g. using upload callback, like in devtools)
   config.lean = config.track && s.upgrade !== null ? s.upgrade === BooleanFlag.False : config.lean;
   config.upload = config.track && typeof config.upload === Constant.String && s.upload && s.upload.length > Constant.HTTPS.length ? s.upload : config.upload;
-  // Log dimensions
+  
+  // Log page metadata as dimensions
   dimension.log(Dimension.UserAgent, ua);
   dimension.log(Dimension.PageTitle, title);
-  dimension.log(Dimension.Url, location.href);
+  dimension.log(Dimension.Url, scrub.url(location.href));
   dimension.log(Dimension.Referrer, document.referrer);
   dimension.log(Dimension.TabId, tab());
   dimension.log(Dimension.PageLanguage, document.documentElement.lang);
   dimension.log(Dimension.DocumentDirection, document.dir);
+  dimension.log(Dimension.DevicePixelRatio, `${window.devicePixelRatio}`);
+  
+  // Capture additional metadata as metrics
+  metric.max(Metric.ClientTimestamp, s.ts);
+  metric.max(Metric.Playback, BooleanFlag.False); 
+
+  // Capture navigator specific dimensions
   if (navigator) {
-    dimension.log(Dimension.Language, (<any>navigator).userLanguage || navigator.language);
+    dimension.log(Dimension.Language, navigator.language);
+    metric.max(Metric.HardwareConcurrency, navigator.hardwareConcurrency);
+    metric.max(Metric.MaxTouchPoints, navigator.maxTouchPoints);
+    metric.max(Metric.DeviceMemory, Math.round((<any>navigator).deviceMemory));
     userAgentData();
-  }
-
-  // Metrics
-  metric.max(Metric.ClientTimestamp, s.ts);
-  metric.max(Metric.Playback, BooleanFlag.False);
+  } 
 
   if (screen) {
     metric.max(Metric.ScreenWidth, Math.round(screen.width));
@@ -63,22 +67,16 @@ export function start(): void {
 }
 
 function userAgentData(): void {
-  if (navigator["userAgentData"] && navigator["userAgentData"].getHighEntropyValues) {
-    navigator["userAgentData"].getHighEntropyValues(
-      ["model",
-      "platform",
-      "platformVersion",
-      "uaFullVersion"])
-      .then(ua => { 
-        dimension.log(Dimension.Platform, ua.platform); 
-        dimension.log(Dimension.PlatformVersion, ua.platformVersion); 
-        ua.brands?.forEach(brand => {
-          dimension.log(Dimension.Brand, brand.name + Constant.Tilde + brand.version); 
-        });
-        dimension.log(Dimension.Model, ua.model); 
-        metric.max(Metric.Mobile, ua.mobile ? BooleanFlag.True : BooleanFlag.False); 
-      });
-  }
+  let uaData = navigator["userAgentData"];
+  if (uaData && uaData.getHighEntropyValues) {
+    uaData.getHighEntropyValues(["model","platform","platformVersion","uaFullVersion"]).then(ua => { 
+      dimension.log(Dimension.Platform, ua.platform); 
+      dimension.log(Dimension.PlatformVersion, ua.platformVersion); 
+      ua.brands?.forEach(brand => { dimension.log(Dimension.Brand, brand.name + Constant.Tilde + brand.version); });
+      dimension.log(Dimension.Model, ua.model); 
+      metric.max(Metric.Mobile, ua.mobile ? BooleanFlag.True : BooleanFlag.False); 
+    });
+  } else { dimension.log(Dimension.Platform, navigator.platform); }
 }
 
 export function stop(): void {
@@ -91,7 +89,6 @@ export function metadata(cb: MetadataCallback, wait: boolean = true): void {
     // Immediately invoke the callback if the caller explicitly doesn't want to wait for the upgrade confirmation
     cb(data, !config.lean);
   }
-  
   callbacks.push({callback: cb, wait: wait });
 }
 

package/src/diagnostic/encode.ts

@@ -1,4 +1,5 @@
 import { Event, Token } from "@clarity-types/data";
+import * as scrub from "@src/core/scrub";
 import { time } from "@src/core/time";
 import { queue } from "@src/data/upload";
 import * as fraud from "@src/diagnostic/fraud";
@@ -14,7 +15,7 @@ export default async function (type: Event): Promise<void> {
             tokens.push(script.data.line);
             tokens.push(script.data.column);
             tokens.push(script.data.stack);
-            tokens.push(script.data.source);
+            tokens.push(scrub.url(script.data.source));
             queue(tokens);
             break;
         case Event.Log:
@@ -31,7 +32,7 @@ export default async function (type: Event): Promise<void> {
             if (fraud.data) {
                 tokens.push(fraud.data.id);
                 tokens.push(fraud.data.target);
-                tokens.push(fraud.data.hash);
+                tokens.push(fraud.data.checksum);
                 queue(tokens, false);
             }
             break;

package/src/diagnostic/fraud.ts

@@ -1,5 +1,6 @@
 import { BooleanFlag, Event, IframeStatus, Metric, Setting } from "@clarity-types/data";
 import { FraudData } from "@clarity-types/diagnostic";
+import config from "@src/core/config";
 import hash from "@src/core/hash";
 import * as metric from "@src/data/metric";
 import encode from "./encode";
@@ -19,12 +20,12 @@ export function start(): void {
 }
 
 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) };
+    // Compute hash for fraud detection, if enabled. Hash is computed only if input meets the minimum length criteria
+    if (config.fraud && id !== null && input && input.length >= Setting.WordLength) {
+        data = { id, target, checksum: hash(input, Setting.ChecksumPrecision) };
         // Only encode this event if we haven't already reported this hash
-        if (history.indexOf(data.hash) < 0) {
-            history.push(data.hash);
+        if (history.indexOf(data.checksum) < 0) {
+            history.push(data.checksum);
             encode(Event.Fraud);
         }
     }

package/src/interaction/change.ts

@@ -0,0 +1,37 @@
+import { Constant, Event, Setting } from "@clarity-types/data";
+import { ChangeState } from "@clarity-types/interaction";
+import config from "@src/core/config";
+import { bind } from "@src/core/event";
+import hash from "@src/core/hash";
+import { schedule } from "@src/core/task";
+import { time } from "@src/core/time";
+import { target } from "@src/layout/target";
+import encode from "./encode";
+
+export let state: ChangeState[] = [];
+
+export function start(): void {
+    reset();
+}
+
+export function observe(root: Node): void {
+    bind(root, "change", recompute, true);
+}
+
+function recompute(evt: UIEvent): void {
+    let element = target(evt) as HTMLInputElement;
+    if (element) {
+        let value = element.value;
+        let checksum = value && value.length >= Setting.WordLength && config.fraud ? hash(value, Setting.ChecksumPrecision) : Constant.Empty;
+        state.push({ time: time(evt), event: Event.Change, data: { target: target(evt), type: element.type, value, checksum } });
+        schedule(encode.bind(this, Event.Change));
+    }    
+}
+
+export function reset(): void {
+    state = [];
+}
+
+export function stop(): void {
+    reset();
+}

package/src/interaction/click.ts

@@ -54,7 +54,7 @@ function handler(event: Event, root: Node, evt: MouseEvent): void {
     // Check for null values before processing this event
     if (x !== null && y !== null) {
         state.push({
-            time: time(), event, data: {
+            time: time(evt), event, data: {
                 target: t,
                 x,
                 y,

package/src/interaction/clipboard.ts

@@ -19,7 +19,7 @@ export function observe(root: Node): void {
 }
 
 function recompute(action: Clipboard, evt: UIEvent): void {
-    state.push({ time: time(), event: Event.Clipboard, data: { target: target(evt), action } });
+    state.push({ time: time(evt), event: Event.Clipboard, data: { target: target(evt), action } });
     schedule(encode.bind(this, Event.Clipboard));
 }
 

package/src/interaction/encode.ts

@@ -1,9 +1,10 @@
 import { Constant, Event, Token } from "@clarity-types/data";
-import scrub from "@src/core/scrub";
+import * as scrub from "@src/core/scrub";
 import { time } from "@src/core/time";
 import * as baseline from "@src/data/baseline";
 import { queue } from "@src/data/upload";
 import { metadata } from "@src/layout/target";
+import * as change from "./change";
 import * as click from "./click";
 import * as clipboard from "./clipboard";
 import * as input from "./input";
@@ -16,8 +17,8 @@ import * as timeline from "./timeline";
 import * as unload from "./unload";
 import * as visibility from "./visibility";
 
-export default async function (type: Event): Promise<void> {
-    let t = time();
+export default async function (type: Event, ts: number = null): Promise<void> {
+    let t = ts || time();
     let tokens: Token[] = [t, type];
     switch (type) {
         case Event.MouseDown:
@@ -55,8 +56,8 @@ export default async function (type: Event): Promise<void> {
                 tokens.push(entry.data.button);
                 tokens.push(entry.data.reaction);
                 tokens.push(entry.data.context);
-                tokens.push(scrub(entry.data.text, "click", cTarget.privacy));
-                tokens.push(entry.data.link);
+                tokens.push(scrub.text(entry.data.text, "click", cTarget.privacy));
+                tokens.push(scrub.url(entry.data.link));
                 tokens.push(cHash);
                 tokens.push(entry.data.trust);
                 queue(tokens);
@@ -95,7 +96,7 @@ export default async function (type: Event): Promise<void> {
                 let iTarget = metadata(entry.data.target as Node, entry.event, entry.data.value);
                 tokens = [entry.time, entry.event];
                 tokens.push(iTarget.id);
-                tokens.push(scrub(entry.data.value, "input", iTarget.privacy));
+                tokens.push(scrub.text(entry.data.value, "input", iTarget.privacy));
                 queue(tokens);
             }
             input.reset();
@@ -127,6 +128,21 @@ export default async function (type: Event): Promise<void> {
             }
             scroll.reset();
             break;
+        case Event.Change:
+            for (let entry of change.state) {
+                tokens = [entry.time, entry.event];
+                let target = metadata(entry.data.target as Node, entry.event);
+                if (target.id > 0) {
+                    tokens = [entry.time, entry.event];
+                    tokens.push(target.id);
+                    tokens.push(entry.data.type);
+                    tokens.push(scrub.text(entry.data.value, "change", target.privacy));
+                    tokens.push(scrub.text(entry.data.checksum, "checksum", target.privacy));
+                    queue(tokens);
+                }
+            }
+            change.reset();
+            break;
         case Event.Submit:
             for (let entry of submit.state) {
                 tokens = [entry.time, entry.event];

package/src/interaction/index.ts

@@ -1,3 +1,4 @@
+import * as change from "@src/interaction/change";
 import * as click from "@src/interaction/click";
 import * as clipboard from "@src/interaction/clipboard";
 import * as input from "@src/interaction/input";
@@ -20,6 +21,7 @@ export function start(): void {
     visibility.start();
     scroll.start();
     selection.start();
+    change.start();
     submit.start();
     unload.start();
 }
@@ -34,6 +36,7 @@ export function stop(): void {
     visibility.stop();
     scroll.stop();
     selection.stop();
+    change.stop();
     submit.stop();
     unload.stop()
 }
@@ -48,6 +51,7 @@ export function observe(root: Node): void {
         pointer.observe(root);
         input.observe(root);
         selection.observe(root);
+        change.observe(root);
         submit.observe(root);
     }
 }

package/src/interaction/input.ts

@@ -36,10 +36,10 @@ function recompute(evt: UIEvent): void {
         // If last entry in the queue is for the same target node as the current one, remove it so we can later swap it with current data.
         if (state.length > 0 && (state[state.length - 1].data.target === data.target)) { state.pop(); }
 
-        state.push({ time: time(), event: Event.Input, data });
+        state.push({ time: time(evt), event: Event.Input, data });
 
         clearTimeout(timeout);
-        timeout = setTimeout(process, Setting.LookAhead, Event.Input);
+        timeout = setTimeout(process, Setting.InputLookAhead, Event.Input);
     }
 }
 

package/src/interaction/pointer.ts

@@ -41,7 +41,7 @@ function mouse(event: Event, root: Node, evt: MouseEvent): void {
     }
 
     // Check for null values before processing this event
-    if (x !== null && y !== null) { handler({ time: time(), event, data: { target: target(evt), x, y } }); }
+    if (x !== null && y !== null) { handler({ time: time(evt), event, data: { target: target(evt), x, y } }); }
 }
 
 function touch(event: Event, root: Node, evt: TouchEvent): void {
@@ -49,7 +49,7 @@ function touch(event: Event, root: Node, evt: TouchEvent): void {
     let d = frame ? frame.contentDocument.documentElement : document.documentElement;
     let touches = evt.changedTouches;
 
-    let t = time();
+    let t = time(evt);
     if (touches) {
         for (let i = 0; i < touches.length; i++) {
             let entry = touches[i];

package/src/interaction/scroll.ts

@@ -39,7 +39,7 @@ function recompute(event: UIEvent = null): void {
     // And, if for some reason that is not available, fall back to looking up scrollTop on document.documentElement.
     let x = element === de && "pageXOffset" in w ? Math.round(w.pageXOffset) : Math.round((element as HTMLElement).scrollLeft);
     let y = element === de && "pageYOffset" in w ? Math.round(w.pageYOffset) : Math.round((element as HTMLElement).scrollTop);
-    let current: ScrollState = { time: time(), event: Event.Scroll, data: {target: element, x, y} };
+    let current: ScrollState = { time: time(event), event: Event.Scroll, data: {target: element, x, y} };
 
     // We don't send any scroll events if this is the first event and the current position is top (0,0)
     if ((event === null && x === 0 && y === 0) || (x === null || y === null)) { return; }

package/src/interaction/submit.ts

@@ -17,7 +17,7 @@ export function observe(root: Node): void {
 }
 
 function recompute(evt: UIEvent): void {
-    state.push({ time: time(), event: Event.Submit, data: { target: target(evt) } });
+    state.push({ time: time(evt), event: Event.Submit, data: { target: target(evt) } });
     schedule(encode.bind(this, Event.Submit));
 }
 

package/src/interaction/unload.ts

@@ -2,6 +2,7 @@ import { Event } from "@clarity-types/data";
 import { UnloadData } from "@clarity-types/interaction";
 import * as clarity from "@src/clarity";
 import { bind } from "@src/core/event";
+import { time } from "@src/core/time";
 import encode from "./encode";
 
 export let data: UnloadData;
@@ -12,7 +13,7 @@ export function start(): void {
 
 function recompute(evt: UIEvent): void {
     data = { name: evt.type };
-    encode(Event.Unload);
+    encode(Event.Unload, time(evt));
     clarity.stop();
 }
 

package/src/interaction/visibility.ts

@@ -1,6 +1,7 @@
 import { Event } from "@clarity-types/data";
 import { VisibilityData } from "@clarity-types/interaction";
 import { bind } from "@src/core/event";
+import { time } from "@src/core/time";
 import encode from "./encode";
 
 export let data: VisibilityData;
@@ -10,9 +11,9 @@ export function start(): void {
     recompute();
 }
 
-function recompute(): void {
+function recompute(evt: UIEvent = null): void {
     data = { visible: "visibilityState" in document ? document.visibilityState : "default" };
-    encode(Event.Visibility);
+    encode(Event.Visibility, time(evt));
 }
 
 export function reset(): void {

package/src/layout/dom.ts

@@ -17,8 +17,9 @@ let override = [];
 let unmask = [];
 let updatedFragments: { [fragment: number]: string } = {};
 let maskText = [];
-let maskInput = [];
+let maskExclude = [];
 let maskDisable = [];
+let maskTags = [];
 
 // 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.
@@ -44,8 +45,9 @@ function reset(): void {
     override = [];
     unmask = [];
     maskText = Mask.Text.split(Constant.Comma);
-    maskInput = Mask.Input.split(Constant.Comma);
+    maskExclude = Mask.Exclude.split(Constant.Comma);
     maskDisable = Mask.Disable.split(Constant.Comma);
+    maskTags = Mask.Tags.split(Constant.Comma);
     idMap = new WeakMap();
     iframeMap = new WeakMap();
     privacyMap = new WeakMap();
@@ -67,7 +69,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
+            config.checksum.forEach(x => root.querySelectorAll(x[1]).forEach(e => fraudMap.set(e, x[0]))); // Fraud Checksum 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); }
@@ -221,6 +223,16 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
     let tag = data.tag.toUpperCase();
 
     switch (true) {
+        case maskTags.indexOf(tag) >= 0:
+            let type = attributes[Constant.Type];
+            let meta: string = Constant.Empty;
+            Object.keys(attributes).forEach(x => meta += attributes[x].toLowerCase());
+            let exclude = maskExclude.some(x => meta.indexOf(x) >= 0);
+            // Regardless of privacy mode, always mask off user input from input boxes or drop downs with two exceptions:
+            // (1) The node is detected to be one of the excluded fields, in which case we drop everything
+            // (2) The node's type is one of the allowed types (like checkboxes)
+            metadata.privacy = tag === Constant.InputTag && maskDisable.indexOf(type) >= 0 ? current : (exclude ? Privacy.Exclude : Privacy.Text);
+            break;
         case Constant.MaskData in attributes:
             metadata.privacy = Privacy.TextImage;
             break;
@@ -242,20 +254,6 @@ function privacy(node: Node, value: NodeValue, parent: NodeValue): void {
             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 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, maskInput, metadata);
-            break;
-        case tag === Constant.InputTag && current === Privacy.Sensitive:
-            // Look through class names to aggressively mask content
-            metadata.privacy = inspect(attributes[Constant.Class], maskText, metadata);
-            // 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], maskInput, metadata);
-            // If it's a button or an input option, make an exception to disable masking in sensitive mode
-            metadata.privacy = maskDisable.indexOf(attributes[Constant.Type]) >= 0 ? Privacy.None : metadata.privacy;
-            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], maskText, metadata);

package/src/layout/encode.ts

@@ -2,7 +2,7 @@ import { Privacy, Task, Timer } from "@clarity-types/core";
 import { Event, Setting, Token } from "@clarity-types/data";
 import { Constant, NodeInfo, NodeValue } from "@clarity-types/layout";
 import config from "@src/core/config";
-import scrub from "@src/core/scrub";
+import * as scrub from "@src/core/scrub";
 import * as task from "@src/core/task";
 import { time } from "@src/core/time";
 import tokenize from "@src/data/token";
@@ -73,7 +73,7 @@ export default async function (type: Event, timer: Timer = null, ts: number = nu
                                     break;
                                 case "value":
                                     fraud.check(value.metadata.fraud, value.id, data[key]);
-                                    tokens.push(scrub(data[key], data.tag, privacy, mangle));
+                                    tokens.push(scrub.text(data[key], data.tag, privacy, mangle));
                                     break;
                             }
                         }
@@ -106,5 +106,5 @@ function str(input: number): string {
 }
 
 function attribute(key: string, value: string, privacy: Privacy): string {
-    return `${key}=${scrub(value, key, privacy)}`;
+    return `${key}=${scrub.text(value, key, privacy)}`;
 }

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.