@sphoro/bugcatch-web-sdk 0.13.1

package/src/redact.js

@@ -0,0 +1,177 @@
+// Strips credentials out of captured URLs and error text, at the moment of
+// capture — before anything is buffered, and long before anything is sent.
+//
+// Request and response bodies are never read, so the URL is the whole attack
+// surface, and in practice it is a wide one: `?api_key=`, S3 presigned
+// signatures, OAuth fragments, JWTs sitting in a path segment. A presigned URL
+// is not a hint that a credential exists, it *is* the credential, and captured
+// network logs are shown on public share links and in the reporter portal.
+//
+// The goal is a redaction that leaves the log useful. `?token=[REDACTED]` still
+// tells a triager which endpoint was called with what shape of argument;
+// blanking the whole URL would make the Network tab worthless and push people
+// to turn capture off, which is the worse outcome.
+//
+// Twin implementations live in bugcatch-extension/src/collector.js (no build
+// step there, so it cannot import) and bugcatch-api/src/settings/redaction.util.ts
+// (defence in depth for older SDKs). tests/unit/redact-url.test.mjs runs one
+// corpus through all three and fails if they ever disagree.
+
+export const PLACEHOLDER = '[REDACTED]';
+
+// Keys whose value is a credential whatever it looks like. Matched after
+// normalising, so `X-Amz-Security-Token` arrives here as `xamzsecuritytoken`.
+const ALWAYS = new Set([
+  'auth', 'bearer', 'session', 'sid', 'phpsessid', 'otp',
+  'pass', 'passwd', 'pwd', 'sig', 'codeverifier',
+]);
+
+// Substrings that make a key sensitive wherever they appear, so app-specific
+// names like `x_auth_token` or `myAppApiKey` are covered without enumeration.
+// Deliberately excludes bare `auth` (matches `author`) and bare `key`
+// (matches `keyword`, `monkey`) — both are handled more precisely elsewhere.
+const MARKERS = [
+  'token', 'secret', 'password', 'passwd', 'apikey', 'signature',
+  'credential', 'sessionid', 'privatekey', 'accesskey', 'authorization',
+];
+
+// Keys that are only sometimes a credential. `?key=AIza…` is a Google API key;
+// `?key=name` is a sort order. `?code=` is an OAuth code or an error string.
+// These redact only when the value itself looks like a secret, because
+// over-redacting the common case costs more triage value than it buys.
+const AMBIGUOUS = new Set(['key', 'code', 'state', 'nonce', 'salt', 'hash']);
+
+// Recognisable credential formats, matched anywhere — query, path segment or
+// free text — so a secret still gets caught when it is not behind a named
+// parameter at all.
+const SHAPES = [
+  /eyJ[\w-]{8,}\.[\w-]{8,}\.[\w-]+/g,                                // JWT
+  /(?:AKIA|ASIA|AROA|AIDA|AGPA|ANPA|ANVA|APKA)[0-9A-Z]{16}/g,        // AWS key id
+  /AIza[\w-]{35}/g,                                                  // Google API key
+  /gh[pousr]_[A-Za-z0-9]{36,}/g,                                     // GitHub token
+  /github_pat_\w{22,}/g,                                             // GitHub fine-grained PAT
+  /[sprk]k_(?:live|test)_[0-9A-Za-z]{10,}/g,                         // Stripe
+  /xox[abposr]-[A-Za-z0-9-]{10,}/g,                                  // Slack
+  /sk-ant-[\w-]{20,}/g,                                              // Anthropic
+  /sk-[\w-]{20,}/g,                                                  // OpenAI
+  /glpat-[\w-]{20,}/g,                                               // GitLab
+  /shp(?:at|ss|ca|pa)_[A-Za-z0-9]{32}/g,                             // Shopify
+];
+
+// `Authorization: Bearer …` as it appears in thrown error text. The class is
+// written without a letter range because the `i` flag already covers case.
+const BEARER = /\bBearer\s+[\w.~+/=-]{8,}/gi;
+
+// Credentials in the authority, which fetch() honours: https://user:pass@host.
+const USERINFO = /^([A-Za-z][A-Za-z0-9+.-]*:\/\/)([^/?#@]+)@/;
+
+function safeDecode(value) {
+  try {
+    return decodeURIComponent(value.replace(/\+/g, ' '));
+  } catch {
+    return value; // a malformed escape is not a reason to give up on the rest
+  }
+}
+
+function normalizeKey(rawKey) {
+  return safeDecode(rawKey).toLowerCase().replace(/[^a-z0-9]/g, '');
+}
+
+/** Whether a value carried by an ambiguous key is credential-shaped. */
+function looksSecret(value) {
+  if (value.length >= 20) return true;
+  return SHAPES.some((re) => {
+    re.lastIndex = 0;
+    return re.test(value);
+  });
+}
+
+function isSensitiveKey(rawKey, rawValue) {
+  const key = normalizeKey(rawKey);
+  if (!key) return false;
+  if (ALWAYS.has(key)) return true;
+  for (const marker of MARKERS) if (key.includes(marker)) return true;
+  if (AMBIGUOUS.has(key)) return looksSecret(safeDecode(rawValue));
+  return false;
+}
+
+/** Redact the values of sensitive keys in an `a=1&b=2` string. */
+function redactPairs(query) {
+  return query
+    .split('&')
+    .map((pair) => {
+      const eq = pair.indexOf('=');
+      if (eq === -1) return pair;
+      const key = pair.slice(0, eq);
+      const value = pair.slice(eq + 1);
+      if (!value) return pair;
+      return isSensitiveKey(key, value) ? `${key}=${PLACEHOLDER}` : pair;
+    })
+    .join('&');
+}
+
+/** Replace every recognisable credential format in a string. */
+function redactShapes(text) {
+  let out = text;
+  for (const re of SHAPES) {
+    re.lastIndex = 0;
+    out = out.replace(re, PLACEHOLDER);
+  }
+  return out;
+}
+
+/**
+ * Scrub a single URL. Structure is preserved — scheme, host, path and the
+ * names of every parameter survive, only credential values are replaced.
+ * Works on relative URLs too, which is why this parses by hand rather than
+ * going through `new URL()`: that would also re-encode and reorder, so the
+ * logged URL would stop matching what the app actually requested.
+ */
+export function redactUrl(raw) {
+  if (raw === null || raw === undefined) return raw;
+  let url = String(raw);
+  if (!url) return url;
+
+  url = url.replace(USERINFO, `$1${PLACEHOLDER}@`);
+
+  const hashAt = url.indexOf('#');
+  let head = hashAt === -1 ? url : url.slice(0, hashAt);
+  let hash = hashAt === -1 ? '' : url.slice(hashAt);
+
+  const queryAt = head.indexOf('?');
+  if (queryAt !== -1) {
+    head = head.slice(0, queryAt + 1) + redactPairs(head.slice(queryAt + 1));
+  }
+
+  if (hash.length > 1) {
+    const body = hash.slice(1);
+    const innerQuery = body.indexOf('?');
+    if (innerQuery !== -1) {
+      // Hash-routed app: #/reset?token=…
+      hash = `#${body.slice(0, innerQuery + 1)}${redactPairs(body.slice(innerQuery + 1))}`;
+    } else if (body.includes('=')) {
+      // OAuth implicit flow drops the token here, where it never reaches a
+      // server but is very much still a credential.
+      hash = `#${redactPairs(body)}`;
+    }
+  }
+
+  return redactShapes(head + hash);
+}
+
+/**
+ * Scrub free text — a thrown error message, a console line. Any URL inside it
+ * is scrubbed as a URL, then bare credentials and `Bearer …` headers go too.
+ */
+export function redactText(raw) {
+  if (raw === null || raw === undefined) return raw;
+  let text = String(raw);
+  if (!text) return text;
+
+  // The scheme is length-bounded so a long run of scheme-legal characters that
+  // never reaches `://` cannot backtrack quadratically. The same source runs
+  // server-side over attacker-influenced text, where that would be a DoS.
+  text = text.replace(/[A-Za-z][A-Za-z0-9+.-]{0,30}:\/\/[^\s"'<>)\]]+/g, (m) => redactUrl(m));
+  text = text.replace(BEARER, `Bearer ${PLACEHOLDER}`);
+  return redactShapes(text);
+}

package/src/session.js

@@ -0,0 +1,189 @@
+// Signing in to a project's widget.
+//
+// Two different things call themselves "who is reporting this" in this SDK, and
+// they are not the same claim:
+//
+//   identify()  — the host application telling us about its own signed-in user.
+//                 Free, silent, and worth exactly as much as the application
+//                 saying it. Nothing here challenges it.
+//
+//   signIn()    — the person in front of the browser answering a code we mailed
+//                 to the address they typed. Costs them a round trip to their
+//                 inbox, and is the only one that survives a project deciding
+//                 it wants a real address on every report.
+//
+// Which of the two a project asks for is the project's own setting, read from
+// the API rather than configured here — see loginState(). A widget that guessed
+// would either hide a mandatory sign-in or put one in front of a project that
+// never asked for it.
+//
+// The session is stored per project, because that is the boundary the server
+// draws too: one live session per address per project. A browser on a page that
+// mounts two projects' widgets is two independent sign-ins, and signing out of
+// one leaves the other alone.
+
+const KEY_PREFIX = 'bugcatch.session.';
+
+const storageKey = (projectId) => `${KEY_PREFIX}${projectId}`;
+
+/**
+ * The same sessions, held for the life of the page.
+ *
+ * Not a cache — a fallback. localStorage is unavailable outright in some
+ * privacy modes and on some embedded webviews, and without this a project that
+ * requires sign-in would be unusable there: the code would be accepted and the
+ * session immediately forgotten, so the report that follows is refused. Held
+ * here, signing in still works for as long as the tab is open; all that is lost
+ * is surviving a reload, which is the part storage was buying.
+ */
+const inMemory = new Map();
+
+/**
+ * The session for one project, or null.
+ *
+ * Storage can throw outright in private modes, and can hold something another
+ * version of this SDK wrote — both come back as "not signed in" rather than an
+ * exception in the host application's page.
+ */
+export function readSession(projectId) {
+  if (!projectId) return null;
+  try {
+    const raw = window.localStorage?.getItem(storageKey(projectId));
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (parsed?.token) return parsed;
+    }
+  } catch { /* storage unavailable, or holding something we did not write */ }
+  return inMemory.get(projectId) || null;
+}
+
+export function writeSession(projectId, session) {
+  if (!projectId || !session?.token) return;
+  const held = {
+    token: session.token,
+    email: session.email || null,
+    name: session.name || null,
+  };
+  inMemory.set(projectId, held);
+  try {
+    window.localStorage?.setItem(storageKey(projectId), JSON.stringify(held));
+  } catch { /* the session just won't survive a reload */ }
+}
+
+export function clearSession(projectId) {
+  if (!projectId) return;
+  inMemory.delete(projectId);
+  try {
+    window.localStorage?.removeItem(storageKey(projectId));
+  } catch { /* ignore */ }
+}
+
+/** The headers every call here sends: the publishable key, plus who we are. */
+function headers({ apiKey, token }) {
+  return {
+    'Content-Type': 'application/json',
+    'X-BugCatch-Key': apiKey,
+    // Its own header rather than Authorization, which on these routes already
+    // carries the API key. The two answer different questions and a request
+    // carries both.
+    ...(token ? { 'X-BugCatch-Session': token } : {}),
+  };
+}
+
+async function readError(res) {
+  try {
+    const body = await res.json();
+    const message = Array.isArray(body.message) ? body.message.join(', ') : body.message;
+    if (message) return message;
+  } catch { /* non-JSON error */ }
+  return `Request failed (HTTP ${res.status})`;
+}
+
+/**
+ * What this project asks of the reporter, and who this browser is signed in as.
+ *
+ *   { mode: 'off' | 'optional' | 'required',
+ *     signedIn: { email, name } | null,
+ *     signedOutReason: string | null }
+ *
+ * Asked each time the panel opens rather than cached for the page: the session
+ * it reports on can end elsewhere — the same address signing in on a phone ends
+ * the one on this laptop — and a widget holding a cached "signed in as you"
+ * would only find out at the moment the report failed.
+ *
+ * Never throws. A deployment that has not been updated answers 404 here, and an
+ * SDK that treated that as fatal would take the whole widget down over a
+ * feature the project had not switched on; the answer is "off", which is what
+ * every project looked like before this existed.
+ */
+export async function loginState({ apiBase, apiKey, projectId, token }) {
+  const off = { mode: 'off', signedIn: null, signedOutReason: null };
+  try {
+    const res = await fetch(
+      `${apiBase}/ingest/login?projectId=${encodeURIComponent(projectId)}`,
+      { headers: headers({ apiKey, token }) },
+    );
+    if (!res.ok) return off;
+    const body = await res.json();
+    return {
+      mode: body.mode === 'optional' || body.mode === 'required' ? body.mode : 'off',
+      signedIn: body.signedIn || null,
+      signedOutReason: body.signedOutReason || null,
+    };
+  } catch {
+    return off;
+  }
+}
+
+/** Step one: ask for a code. Throws with the server's sentence on refusal. */
+export async function startSignIn({ apiBase, apiKey, projectId, email, name }) {
+  const res = await fetch(`${apiBase}/ingest/login/start`, {
+    method: 'POST',
+    headers: headers({ apiKey }),
+    body: JSON.stringify({ projectId, email, ...(name ? { name } : {}) }),
+  });
+  if (!res.ok) throw new Error(await readError(res));
+  return res.json();
+}
+
+/**
+ * Step two: spend the code.
+ *
+ * Stores the session on success, which is what makes it survive a reload and
+ * what every other call here reads. Signing in ends this address's session on
+ * this project everywhere else — that is the server's rule, not something this
+ * browser can opt out of.
+ */
+export async function confirmSignIn({ apiBase, apiKey, projectId, email, code }) {
+  const res = await fetch(`${apiBase}/ingest/login`, {
+    method: 'POST',
+    headers: headers({ apiKey }),
+    body: JSON.stringify({ projectId, email, code }),
+  });
+  if (!res.ok) throw new Error(await readError(res));
+
+  const body = await res.json();
+  const session = { token: body.sessionToken, email: body.email, name: body.name };
+  writeSession(projectId, session);
+  return session;
+}
+
+/**
+ * Sign out, here and on the server.
+ *
+ * Local storage is cleared whatever the network says. Somebody pressing sign
+ * out on a shared machine has to end up signed out on it, and a fetch that
+ * failed is not a reason to leave their address in the next person's widget.
+ */
+export async function endSignIn({ apiBase, apiKey, projectId, token }) {
+  clearSession(projectId);
+  if (!token) return { signedOut: true };
+  try {
+    await fetch(`${apiBase}/ingest/logout`, {
+      method: 'POST',
+      headers: headers({ apiKey, token }),
+      body: JSON.stringify({ projectId }),
+    });
+  } catch { /* the token is already unusable from this browser */ }
+  return { signedOut: true };
+}