@anyreplay/browser 0.1.1 → 0.1.3

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. */
@@ -4007,47 +4187,37 @@ function reserveSeq(session, next) {
 function touchSession(session, now = Date.now()) {
   session.set(SESSION_TS_KEY, String(now));
 }
+function forgetVisitor(local, session) {
+  local.remove(VISITOR_KEY);
+  for (const key of [SESSION_KEY, SESSION_TS_KEY, SEQ_KEY, PAGE_KEY, COOLDOWN_KEY]) session.remove(key);
+}
 
 // src/recorder.ts
 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);
   const session = safeStorage(() => globalThis.sessionStorage);
-  const identity = resolveIdentity(local, session);
   let status = "idle";
+  let identity;
+  let transport;
   let stopRecording;
-  let pageCount = identity.pageCount;
-  if (!isSampledIn(identity.visitorId, options.sampleRate)) {
-    return inertHandle("sampled-out", identity.sessionId);
-  }
-  if (inCooldown(session)) {
-    if (options.debug) console.warn("[anyreplay] not recording: ingest refused a new session recently");
-    return inertHandle("stopped", identity.sessionId);
-  }
-  const transport = new Transport(
-    options,
-    {
-      projectKey: options.projectKey,
-      sessionId: identity.sessionId,
-      visitorId: identity.visitorId,
-      initialSeq: identity.nextSeq
-    },
-    {
-      onSeqReserved: (next) => reserveSeq(session, next),
-      onStopped: (reason) => {
-        status = "stopped";
-        stopRecording == null ? void 0 : stopRecording();
-        stopRecording = void 0;
-        if (reason === "rejected_402") startCooldown(session);
-        if (options.debug) console.warn(`[anyreplay] recording stopped: ${reason}`);
-      }
-    }
-  );
-  const collectMeta = () => ({
+  let pageCount = 0;
+  let pendingTraits;
+  const sendIdentity = (who, traits) => {
+    void fetch(`${options.ingestUrl}/v1/ingest/identify`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "omit",
+      body: JSON.stringify({ projectKey: options.projectKey, sessionId: who.sessionId, ...traits })
+    }).catch(() => {
+    });
+  };
+  const collectMeta = (who) => ({
     startedAt: Date.now(),
     url: safeLocation(),
     lang: typeof navigator !== "undefined" ? navigator.language : void 0,
@@ -4057,10 +4227,10 @@ function createRecorder(rawOptions) {
     referrer: typeof document !== "undefined" ? document.referrer || void 0 : void 0,
     // The cap is a decision about starting a session, so it goes only where
     // ingest makes that decision: chunk 0. A resumed page starts later.
-    ...options.maxSessionsPerMonth !== void 0 && identity.nextSeq === 0 ? { sessionCap: options.maxSessionsPerMonth } : {}
+    ...options.maxSessionsPerMonth !== void 0 && who.nextSeq === 0 ? { sessionCap: options.maxSessionsPerMonth } : {}
   });
   const recentClicks = [];
-  const noteInteraction = (event) => {
+  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;
@@ -4072,7 +4242,7 @@ function createRecorder(rawOptions) {
       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) transport.mergeFlags({ hasRageClick: true });
+      if (clustered) channel.mergeFlags({ hasRageClick: true });
     }
   };
   const pending = [];
@@ -4100,7 +4270,7 @@ function createRecorder(rawOptions) {
     }
   };
   const emitCustom = (tag, payload) => {
-    if (status === "stopped") return;
+    if (status === "stopped" || status === "sampled-out") return;
     if (status === "recording") {
       try {
         record.addCustomEvent(tag, payload);
@@ -4114,63 +4284,104 @@ function createRecorder(rawOptions) {
     }
     pending.push({ tag, payload });
   };
-  let lastUrl = safeLocation();
-  const noteNavigation = () => {
+  let lastUrl;
+  const noteNavigation = (channel) => {
     const url = safeLocation();
     if (!url || url === lastUrl) return;
     lastUrl = url;
     pageCount += 1;
     notePageCount(session, pageCount);
-    transport.mergeFlags({ pageCount });
+    channel.mergeFlags({ pageCount });
     emitCustom(NAVIGATE_TAG, { url, title: typeof document !== "undefined" ? document.title : "" });
   };
   const begin = () => {
-    if (status === "recording" || status === "stopped") return;
+    if (status !== "idle" && status !== "awaiting-consent") return;
+    const who = resolveIdentity(local, session);
+    identity = who;
+    pageCount = who.pageCount;
+    if (!isSampledIn(who.visitorId, options.sampleRate)) {
+      status = "sampled-out";
+      return;
+    }
+    if (inCooldown(session)) {
+      status = "stopped";
+      if (options.debug) console.warn("[anyreplay] not recording: ingest refused a new session recently");
+      return;
+    }
+    const channel = new Transport(
+      options,
+      {
+        projectKey: options.projectKey,
+        sessionId: who.sessionId,
+        visitorId: who.visitorId,
+        initialSeq: who.nextSeq
+      },
+      {
+        onSeqReserved: (next) => reserveSeq(session, next),
+        onStopped: (reason) => {
+          status = "stopped";
+          stopRecording == null ? void 0 : stopRecording();
+          stopRecording = void 0;
+          if (reason === "rejected_402") startCooldown(session);
+          if (options.debug) console.warn(`[anyreplay] recording stopped: ${reason}`);
+        }
+      }
+    );
+    transport = channel;
     status = "recording";
-    transport.setMeta(collectMeta());
-    transport.mergeFlags({ pageCount });
-    transport.start();
+    lastUrl = safeLocation();
+    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;
-        noteInteraction(typed);
+        scrubEvent(typed, (id) => record.mirror.getNode(id), policy);
+        noteInteraction(typed, channel);
         touchSession(session, typed.timestamp);
-        transport.push(typed);
+        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
     });
     drainPending();
-    attachLifecycleHooks();
+    if (pendingTraits) {
+      sendIdentity(who, pendingTraits);
+      pendingTraits = void 0;
+    }
+    attachLifecycleHooks(channel);
   };
-  const attachLifecycleHooks = () => {
+  const attachLifecycleHooks = (channel) => {
     if (typeof window === "undefined") return;
     window.addEventListener("pagehide", () => {
-      transport.flushWithBeacon();
+      channel.flushWithBeacon();
     }, { capture: true });
     document.addEventListener("visibilitychange", () => {
-      if (document.visibilityState === "hidden") transport.flushWithBeacon();
+      if (document.visibilityState === "hidden") channel.flushWithBeacon();
     });
-    window.addEventListener("error", () => transport.mergeFlags({ hasError: true }));
-    window.addEventListener("unhandledrejection", () => transport.mergeFlags({ hasError: true }));
+    window.addEventListener("error", () => channel.mergeFlags({ hasError: true }));
+    window.addEventListener("unhandledrejection", () => channel.mergeFlags({ hasError: true }));
     const patch2 = (method) => {
       const original = history[method].bind(history);
       history[method] = function patched(...args) {
         const result = original(...args);
-        noteNavigation();
+        noteNavigation(channel);
         return result;
       };
     };
     patch2("pushState");
     patch2("replaceState");
-    window.addEventListener("popstate", noteNavigation);
+    window.addEventListener("popstate", () => noteNavigation(channel));
   };
   if (options.requireConsent) {
     status = "awaiting-consent";
@@ -4179,24 +4390,28 @@ function createRecorder(rawOptions) {
   }
   return {
     status: () => status,
-    sessionId: () => identity.sessionId,
+    sessionId: () => {
+      var _a;
+      return (_a = identity == null ? void 0 : identity.sessionId) != null ? _a : null;
+    },
     consent: (granted) => {
-      if (granted) begin();
-      else transport.stop("consent_withdrawn");
+      if (granted) {
+        begin();
+        return;
+      }
+      transport == null ? void 0 : transport.stop("consent_withdrawn");
+      if (status === "idle" || status === "awaiting-consent") status = "stopped";
+      pendingTraits = void 0;
+      forgetVisitor(local, session);
     },
     identify: (traits) => {
       if (!traits.userId && !traits.email) return;
-      void fetch(`${options.ingestUrl}/v1/ingest/identify`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "omit",
-        body: JSON.stringify({
-          projectKey: options.projectKey,
-          sessionId: identity.sessionId,
-          ...traits
-        })
-      }).catch(() => {
-      });
+      if (identity && transport) {
+        sendIdentity(identity, traits);
+        return;
+      }
+      if (status === "idle" || status === "awaiting-consent") pendingTraits = traits;
+      else if (options.debug) console.warn("[anyreplay] identify() ignored: not recording");
     },
     track: (name, properties) => {
       const payload = validateTrack(name, properties);
@@ -4206,8 +4421,15 @@ function createRecorder(rawOptions) {
       }
       emitCustom(TRACK_TAG, payload);
     },
-    stop: () => transport.stop("stopped_by_page"),
-    flush: () => transport.flush()
+    stop: () => {
+      transport == null ? void 0 : transport.stop("stopped_by_page");
+      if (status === "idle" || status === "awaiting-consent") status = "stopped";
+      pendingTraits = void 0;
+    },
+    flush: () => {
+      var _a;
+      return (_a = transport == null ? void 0 : transport.flush()) != null ? _a : Promise.resolve();
+    }
   };
 }
 function safeLocation() {
@@ -4217,22 +4439,6 @@ function safeLocation() {
     return void 0;
   }
 }
-function inertHandle(status, sessionId) {
-  return {
-    status: () => status,
-    sessionId: () => sessionId,
-    consent: () => {
-    },
-    identify: () => {
-    },
-    track: () => {
-    },
-    stop: () => {
-    },
-    flush: async () => {
-    }
-  };
-}
 export {
   ConfigError,
   DEFAULTS,
@@ -4242,6 +4448,7 @@ export {
   TRACK_TAG,
   Transport,
   createRecorder,
+  forgetVisitor,
   hashToUnitInterval,
   isSampledIn,
   resolveIdentity,