@anyreplay/browser 0.1.2 → 0.1.3

package/dist/index.d.cts

@@ -5,8 +5,42 @@ interface AnyReplayOptions {
     ingestUrl?: string;
     /** Fraction of visitors recorded, 0–1. Decided once per visitor, not per page. */
     sampleRate?: number;
-    /** Mask every text input. Leaving this on is the supported configuration. */
+    /**
+     * Mask the value of every form control.
+     *
+     * Off by default: a recording shows what a visitor typed into inputs,
+     * textareas and rich-text editors, because a replay of a form nobody could
+     * finish is worth watching only if you can see what they were trying to put
+     * in it. Turn this on for a site whose forms carry anything you would not
+     * want a teammate to read, and mark individual fields with the `maskClass`
+     * when it is only some of them.
+     *
+     * Some fields are masked whatever this says, in every mode: passwords,
+     * one-time codes, payment fields (card number, CVV, expiry, IBAN, routing
+     * number, sort code), anything inside an element with the mask class, and any
+     * value that looks like a card number. Email and telephone fields are not on
+     * that list — they are ordinary fields, recorded by default and masked by this
+     * option. See `isSensitiveField` in `masking.ts` for the exact list.
+     */
     maskAllInputs?: boolean;
+    /**
+     * Mask everything a person types, wherever they type it.
+     *
+     * `maskAllInputs` covers form controls. This covers those *and* the other
+     * place a person can type — an element with `contenteditable`, which is what
+     * a rich-text editor, a comment box or a chat composer is made of. Their text
+     * is not an input value but ordinary page text, so input masking does not
+     * reach it. With this on, the text of every editable region is replaced with
+     * asterisks in the first snapshot and in every change after it.
+     *
+     * The stricter of the two options, and a superset of it: `maskAllTyping: true`
+     * masks form fields too, whatever `maskAllInputs` says. It is separate
+     * because masking an editable region masks *all* of its text, including
+     * whatever the page put there before anyone typed — a loaded document, a
+     * quoted message — which is a bigger thing to ask for than hiding field
+     * values.
+     */
+    maskAllTyping?: boolean;
     /** Elements with this class have their text masked. */
     maskClass?: string;
     /** Elements with this class are not recorded at all. */

package/dist/index.d.ts

@@ -5,8 +5,42 @@ interface AnyReplayOptions {
     ingestUrl?: string;
     /** Fraction of visitors recorded, 0–1. Decided once per visitor, not per page. */
     sampleRate?: number;
-    /** Mask every text input. Leaving this on is the supported configuration. */
+    /**
+     * Mask the value of every form control.
+     *
+     * Off by default: a recording shows what a visitor typed into inputs,
+     * textareas and rich-text editors, because a replay of a form nobody could
+     * finish is worth watching only if you can see what they were trying to put
+     * in it. Turn this on for a site whose forms carry anything you would not
+     * want a teammate to read, and mark individual fields with the `maskClass`
+     * when it is only some of them.
+     *
+     * Some fields are masked whatever this says, in every mode: passwords,
+     * one-time codes, payment fields (card number, CVV, expiry, IBAN, routing
+     * number, sort code), anything inside an element with the mask class, and any
+     * value that looks like a card number. Email and telephone fields are not on
+     * that list — they are ordinary fields, recorded by default and masked by this
+     * option. See `isSensitiveField` in `masking.ts` for the exact list.
+     */
     maskAllInputs?: boolean;
+    /**
+     * Mask everything a person types, wherever they type it.
+     *
+     * `maskAllInputs` covers form controls. This covers those *and* the other
+     * place a person can type — an element with `contenteditable`, which is what
+     * a rich-text editor, a comment box or a chat composer is made of. Their text
+     * is not an input value but ordinary page text, so input masking does not
+     * reach it. With this on, the text of every editable region is replaced with
+     * asterisks in the first snapshot and in every change after it.
+     *
+     * The stricter of the two options, and a superset of it: `maskAllTyping: true`
+     * masks form fields too, whatever `maskAllInputs` says. It is separate
+     * because masking an editable region masks *all* of its text, including
+     * whatever the page put there before anyone typed — a loaded document, a
+     * quoted message — which is a bigger thing to ask for than hiding field
+     * values.
+     */
+    maskAllTyping?: boolean;
     /** Elements with this class have their text masked. */
     maskClass?: string;
     /** Elements with this class are not recorded at all. */

package/dist/index.js

@@ -3641,10 +3641,12 @@ record.mirror = mirror;
 var DEFAULTS = {
   ingestUrl: "https://in.anyreplay.com",
   sampleRate: 1,
-  // Default-deny. Recording a customer's password field once is a breach; the
-  // cost of the safe default is a configuration line for the rare field that
-  // genuinely needs to be visible.
-  maskAllInputs: true,
+  // Both masking switches are opt-in: a recording shows what people typed,
+  // which is the point of watching one. What that never includes is the floor
+  // in masking.ts — passwords, payment fields and the rest — which no option
+  // can switch off.
+  maskAllInputs: false,
+  maskAllTyping: false,
   maskClass: "ar-mask",
   blockClass: "ar-block",
   requireConsent: false,
@@ -3677,11 +3679,18 @@ function resolveOptions(input) {
     projectKey: input.projectKey,
     sampleRate,
     ingestUrl: ((_c = input.ingestUrl) != null ? _c : DEFAULTS.ingestUrl).replace(/\/+$/, ""),
-    // A caller who explicitly passes false gets what they asked for; anything
-    // else (including undefined) keeps masking on.
-    maskAllInputs: input.maskAllInputs === false ? false : true
+    maskAllInputs: readSwitch(input, "maskAllInputs"),
+    maskAllTyping: readSwitch(input, "maskAllTyping")
   };
 }
+function readSwitch(input, name) {
+  const value = input[name];
+  if (typeof value === "boolean") return value;
+  if (value !== void 0 && typeof console !== "undefined") {
+    console.warn(`[anyreplay] ${name} ignored: expected true or false, got ${typeof value}. Nothing is masked by this option.`);
+  }
+  return DEFAULTS[name];
+}
 
 // src/events.ts
 var TRACK_TAG = "anyreplay.track";
@@ -3711,6 +3720,170 @@ function byteLength(text) {
   return typeof TextEncoder === "function" ? new TextEncoder().encode(text).length : text.length * 3;
 }
 
+// src/masking.ts
+var maskValue = (text) => "*".repeat(text.length);
+var MASK_EVERY_FIELD = {
+  color: true,
+  date: true,
+  "datetime-local": true,
+  email: true,
+  month: true,
+  number: true,
+  range: true,
+  search: true,
+  tel: true,
+  text: true,
+  time: true,
+  url: true,
+  week: true,
+  textarea: true,
+  select: true,
+  password: true,
+  input: true
+};
+var SENSITIVE_AUTOCOMPLETE = /* @__PURE__ */ new Set([
+  "cc-number",
+  "cc-csc",
+  "cc-exp",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-name",
+  "cc-type",
+  "cc-given-name",
+  "cc-family-name",
+  "cc-additional-name",
+  "current-password",
+  "new-password",
+  "one-time-code"
+]);
+var PAYMENT_FIELD = new RegExp(
+  "(?:credit|debit|payment)[\\s_-]*card|card[\\s_-]*(?:number|num|no|nr|code|pin|cvv|cvc|csc)|(?:^|[^a-z])cc[\\s_-]*(?:number|num|no|nr|csc|cvv|cvc|exp)|(?:^|[^a-z])(?:cvv|cvc|cvn|csc)(?:[^a-z]|$)|security[\\s_-]*code|(?:^|[^a-z])iban(?:[^a-z]|$)|routing[\\s_-]*number|sort[\\s_-]*code",
+  "i"
+);
+var CREDENTIAL_FIELD = /pass(?:word|wd|phrase)|(?:^|[^a-z])pwd(?:[^a-z]|$)|(?:^|[^a-z])otp(?:[^a-z]|$)|one[\s_-]*time[\s_-]*code/i;
+var SENSITIVE_TYPES = /* @__PURE__ */ new Set(["password"]);
+var MASK_SENSITIVE_FIELDS = Object.fromEntries(
+  [...SENSITIVE_TYPES].map((type) => [type, true])
+);
+var NAMING_ATTRIBUTES = ["name", "id", "autocomplete", "placeholder", "aria-label", "data-testid"];
+function isSensitiveByAttributes(read, type) {
+  var _a;
+  if (read("data-rr-is-password") !== null) return true;
+  if (SENSITIVE_TYPES.has(type)) return true;
+  const autocomplete = ((_a = read("autocomplete")) != null ? _a : "").toLowerCase();
+  for (const token of autocomplete.split(/\s+/)) {
+    if (SENSITIVE_AUTOCOMPLETE.has(token)) return true;
+  }
+  for (const attribute of NAMING_ATTRIBUTES) {
+    const value = read(attribute);
+    if (value && (PAYMENT_FIELD.test(value) || CREDENTIAL_FIELD.test(value))) return true;
+  }
+  return false;
+}
+var asElement = (node) => node && typeof node.getAttribute === "function" ? node : null;
+function isSensitiveField(node) {
+  const element = asElement(node);
+  if (!element) return false;
+  const type = (element.type || element.getAttribute("type") || "").toLowerCase();
+  return isSensitiveByAttributes((name) => element.getAttribute(name), type);
+}
+function isSensitiveSerialised(attributes) {
+  var _a;
+  const read = (name) => typeof attributes[name] === "string" ? attributes[name] : null;
+  return isSensitiveByAttributes(read, ((_a = read("type")) != null ? _a : "").toLowerCase());
+}
+function looksLikeCardNumber(text) {
+  if (text.length < 13 || text.length > 24 || !/^[0-9][0-9 -]*[0-9]$/.test(text)) return false;
+  const digits = text.replace(/[ -]/g, "");
+  if (digits.length < 13 || digits.length > 19) return false;
+  let sum = 0;
+  let double = false;
+  for (let i = digits.length - 1; i >= 0; i -= 1) {
+    let digit = digits.charCodeAt(i) - 48;
+    if (double) {
+      digit *= 2;
+      if (digit > 9) digit -= 9;
+    }
+    sum += digit;
+    double = !double;
+  }
+  return sum % 10 === 0;
+}
+function isMarkedByCustomer(node, maskClass) {
+  var _a;
+  let element = asElement(node);
+  while (element) {
+    if ((_a = element.classList) == null ? void 0 : _a.contains(maskClass)) return true;
+    element = element.parentElement;
+  }
+  return false;
+}
+var hasClass = (attributes, maskClass) => typeof attributes.class === "string" && attributes.class.split(/\s+/).includes(maskClass);
+function shouldMaskValue(text, node, policy) {
+  if (policy.maskEveryField) return true;
+  if (isSensitiveField(node)) return true;
+  if (isMarkedByCustomer(node, policy.maskClass)) return true;
+  return looksLikeCardNumber(text);
+}
+var MUTATION = 0;
+var INPUT = 5;
+var ELEMENT_NODE = 2;
+var TEXT_NODE = 3;
+var FIELD_TAGS = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
+function maskTextChildren(node) {
+  var _a;
+  for (const child of (_a = node.childNodes) != null ? _a : []) {
+    if (child.type === TEXT_NODE && typeof child.textContent === "string") {
+      child.textContent = child.textContent.replace(/\S/g, "*");
+    }
+    maskTextChildren(child);
+  }
+}
+function scrubTree(node, policy, masked) {
+  var _a, _b;
+  if (!node) return;
+  const attributes = (_a = node.attributes) != null ? _a : {};
+  const inheritedMask = masked || hasClass(attributes, policy.maskClass);
+  if (node.type === ELEMENT_NODE && node.tagName && FIELD_TAGS.has(node.tagName.toLowerCase())) {
+    const value = attributes.value;
+    const shouldMask = policy.maskEveryField || inheritedMask || isSensitiveSerialised(attributes) || typeof value === "string" && looksLikeCardNumber(value);
+    if (shouldMask) {
+      if (typeof value === "string" && value !== "") attributes.value = maskValue(value);
+      if (node.tagName.toLowerCase() === "textarea") maskTextChildren(node);
+    }
+  }
+  for (const child of (_b = node.childNodes) != null ? _b : []) scrubTree(child, policy, inheritedMask);
+}
+function scrubEvent(event, getNode, policy) {
+  var _a, _b, _c, _d, _e;
+  if (!event.data) return;
+  if (event.type === 2) {
+    scrubTree(event.data.node, policy, false);
+    return;
+  }
+  if (event.type !== 3) return;
+  const data = event.data;
+  if (data.source === INPUT) {
+    if (typeof data.text !== "string" || data.text === "") return;
+    const node = typeof data.id === "number" ? getNode(data.id) : null;
+    const type = ((_b = (_a = asElement(node)) == null ? void 0 : _a.type) != null ? _b : "").toLowerCase();
+    if (type === "checkbox" || type === "radio") return;
+    if (shouldMaskValue(data.text, node, policy)) data.text = maskValue(data.text);
+    return;
+  }
+  if (data.source !== MUTATION) return;
+  for (const entry of (_c = data.attributes) != null ? _c : []) {
+    const value = (_d = entry == null ? void 0 : entry.attributes) == null ? void 0 : _d.value;
+    if (typeof value !== "string" || value === "") continue;
+    const node = typeof entry.id === "number" ? getNode(entry.id) : null;
+    if (shouldMaskValue(value, node, policy)) entry.attributes.value = maskValue(value);
+  }
+  for (const add of (_e = data.adds) != null ? _e : []) {
+    const parent = typeof (add == null ? void 0 : add.parentId) === "number" ? getNode(add.parentId) : null;
+    scrubTree(add == null ? void 0 : add.node, policy, isMarkedByCustomer(parent, policy.maskClass));
+  }
+}
+
 // src/sampling.ts
 function hashToUnitInterval(input) {
   let hash = 2166136261;
@@ -3806,7 +3979,14 @@ var Transport = class {
       seq: this.seq,
       events,
       ...this.pendingMeta ? { meta: this.pendingMeta } : {},
-      ...Object.keys(this.flags).length > 0 ? { flags: this.flags } : {}
+      ...Object.keys(this.flags).length > 0 ? { flags: this.flags } : {},
+      // This device's clock as the request leaves, on the same clock as the
+      // event timestamps. Ingest compares it with its own to catch a device
+      // that runs ahead — a test phone three weeks fast would otherwise list
+      // its sessions as starting "in 3 weeks". Stamped here, when the body is
+      // built, so a retry or a queue flushed after a spell offline carries
+      // the time it was actually sent rather than when it was recorded.
+      sentAt: Date.now()
     });
   }
   /** Sends whatever is buffered. Safe to call when there is nothing to send. */
@@ -4017,6 +4197,7 @@ var RAGE_CLICK_COUNT = 3;
 var RAGE_CLICK_WINDOW_MS = 1e3;
 var RAGE_CLICK_RADIUS_PX = 30;
 var MAX_PENDING_EVENTS = 32;
+var EDITABLE_SELECTOR = '[contenteditable]:not([contenteditable="false"])';
 function createRecorder(rawOptions) {
   const options = resolveOptions(rawOptions);
   const local = safeStorage(() => globalThis.localStorage);
@@ -4152,19 +4333,23 @@ function createRecorder(rawOptions) {
     channel.setMeta(collectMeta(who));
     channel.mergeFlags({ pageCount });
     channel.start();
+    const policy = {
+      maskEveryField: options.maskAllInputs || options.maskAllTyping,
+      maskClass: options.maskClass
+    };
     stopRecording = record({
       emit: (event) => {
         const typed = event;
+        scrubEvent(typed, (id) => record.mirror.getNode(id), policy);
         noteInteraction(typed, channel);
         touchSession(session, typed.timestamp);
         channel.push(typed);
         drainPending();
       },
-      maskAllInputs: options.maskAllInputs,
+      maskInputOptions: policy.maskEveryField ? MASK_EVERY_FIELD : MASK_SENSITIVE_FIELDS,
       maskTextClass: options.maskClass,
+      maskTextSelector: options.maskAllTyping ? EDITABLE_SELECTOR : void 0,
       blockClass: options.blockClass,
-      // Passwords are never recorded, regardless of configuration.
-      maskInputOptions: { password: true, email: true, tel: true },
       // Canvas capture is expensive and off unless a customer opts in later.
       recordCanvas: false,
       collectFonts: false