@anyreplay/browser 0.1.2 → 0.1.4

package/README.md

@@ -3,8 +3,8 @@
 Session replay recorder for the browser, made by [AnyReplay](https://anyreplay.com):
 watch any user's session, translated into your own language.
 
-- DOM-based recording (built on rrweb), not video — about 26 KB gzipped
-- Every input masked by default; opt elements out with `ar-mask` / `ar-block`
+- DOM-based recording (built on rrweb), not video — about 28 KB gzipped
+- Records what people type; one line masks it, and passwords and payment fields never are
 - Tag moments with `track()` and see them on the player's timeline
 - Sessions survive reloads and route changes; chunked, retried, and flushed with `sendBeacon` on page close
 - Deterministic sampling per visitor, a circuit breaker, and an optional consent gate
@@ -22,7 +22,8 @@ const recorder = createRecorder({
   projectKey: 'ar_pk_live_…',      // from your AnyReplay project
   // ingestUrl: 'https://in.anyreplay.com',  // default; set for self-hosted
   // sampleRate: 1,                // 0..1, decided per visitor
-  // maskAllInputs: true,          // default; turn off deliberately
+  // maskAllInputs: true,          // off by default: field values are recorded
+  // maskAllTyping: true,          // the stricter switch: fields and rich-text editors
   // maxSessionsPerMonth: 5000,    // optional cap for this project
 });
 
@@ -48,9 +49,25 @@ from its setup page; it loads the same code from `cdn.anyreplay.com`.
 
 ## Privacy
 
-Inputs are masked before they leave the page; `password` fields are never
-recorded at all. Add `class="ar-block"` to remove an element's contents from the
-recording entirely, or `class="ar-mask"` to keep layout but hide text.
+A recording contains what visitors type into forms, because a replay of a form
+nobody could finish is worth watching only if you can see what they were trying
+to enter. Masking is a switch you turn on:
+
+- `maskAllInputs: true` — every form field value becomes asterisks of the same length.
+- `maskAllTyping: true` — the same, plus the text of every `contenteditable` editor.
+- `class="ar-mask"` — one element, or one field, masked while the rest records.
+- `class="ar-block"` — the element's contents are not recorded at all.
+
+Some fields are masked in every mode and no option records them: passwords and
+one-time codes; card numbers, security codes, expiry dates and cardholder names
+(from `autocomplete="cc-…"` or from a name, label or placeholder that reads like
+one); IBANs, routing numbers and sort codes; any value of 13–19 digits that
+passes the card-number check. Masking always happens in the page, before
+anything is sent.
+
+`type="email"` and `type="tel"` are not on that list. An address and a phone
+number are ordinary contact details, so they are recorded like any other field
+and masked by `maskAllInputs`, `maskAllTyping` or `class="ar-mask"`.
 
 ## License
 

package/dist/index.cjs

@@ -3674,10 +3674,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,
@@ -3710,11 +3712,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";
@@ -3744,6 +3753,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;
@@ -3839,7 +4012,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. */
@@ -4050,6 +4230,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);
@@ -4085,17 +4266,17 @@ function createRecorder(rawOptions) {
   const noteInteraction = (event, channel) => {
     var _a;
     const data = event.data;
-    if (event.type !== 3 || (data == null ? void 0 : data.source) !== 2 || typeof data.x !== "number") return;
+    if (event.type !== 3 || (data == null ? void 0 : data.source) !== 2 || data.type !== 2 || typeof data.x !== "number") return;
     const now = event.timestamp;
     recentClicks.push({ x: data.x, y: (_a = data.y) != null ? _a : 0, t: now });
     while (recentClicks.length > 0 && now - recentClicks[0].t > RAGE_CLICK_WINDOW_MS) recentClicks.shift();
-    if (recentClicks.length >= RAGE_CLICK_COUNT) {
-      const first = recentClicks[0];
-      const clustered = recentClicks.every(
-        (c) => Math.abs(c.x - first.x) < RAGE_CLICK_RADIUS_PX && Math.abs(c.y - first.y) < RAGE_CLICK_RADIUS_PX
-      );
-      if (clustered) channel.mergeFlags({ hasRageClick: true });
-    }
+    const near = recentClicks.filter(
+      (c) => {
+        var _a2;
+        return Math.abs(c.x - data.x) < RAGE_CLICK_RADIUS_PX && Math.abs(c.y - ((_a2 = data.y) != null ? _a2 : 0)) < RAGE_CLICK_RADIUS_PX;
+      }
+    );
+    if (near.length >= RAGE_CLICK_COUNT) channel.mergeFlags({ hasRageClick: true });
   };
   const pending = [];
   let draining = false;
@@ -4185,19 +4366,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