bug-report-js 2.3.0

package/sanitizer.js

@@ -0,0 +1,262 @@
+/**
+ * sanitizer.js — Shared sanitization module for Bug Report Extension
+ *
+ * Implements multi-layer privacy protection:
+ *   Layer 1: Data minimization (handled at collection sites)
+ *   Layer 2: Allowlist-based collection (handled at collection sites)
+ *   Layer 3: Field-level exclusion (handled at collection sites)
+ *   Layer 4: Pattern sanitization (this module)
+ *   Layer 5: Final JSON validation (this module)
+ */
+
+const Sanitizer = (() => {
+  // ── Query Parameter Allowlist & Blocklist ──────────────────────────
+
+  const SAFE_QUERY_PARAMS = new Set([
+    // Pagination & Navigation
+    'q','query','search','keyword','term','id','pid','post_id','item_id','article_id','slug','path','route',
+    'page','p','limit','offset','skip','take','cursor','start','end','per_page','size','index','first','last','next','prev','before','after',
+    // Sorting & Filtering
+    'sort','order','orderby','sortby','dir','direction','filter','max','min','category','tag','type','status','state','date','year','month','day',
+    // UI & Display
+    'view','mode','display','format','layout','theme','tab','panel','step','section','anchor','eventorigin',
+    // App State & Routing
+    'action','method','module','component','feature','flag','variant','experiment','version','v',
+    // Localization
+    'lang','locale','language','hl','gl','country','region','currency',
+    // Marketing & Analytics
+    'ref','source','utm_source','utm_medium','utm_campaign','utm_term','utm_content','gclid','fbclid','msclkid','mc_cid','mc_eid'
+  ]);
+
+  const SENSITIVE_QUERY_PARAMS = new Set([
+    'token', 'access_token', 'refresh_token', 'id_token', 'auth_token',
+    'session', 'sessionid', 'session_id', 'sid',
+    'apikey', 'api_key', 'key', 'client_secret', 'secret',
+    'password', 'passwd', 'pwd',
+    'email', 'mail', 'e-mail',
+    'userid', 'user_id', 'uid', 'customerid', 'customer_id',
+    'orderid', 'order_id',
+    'ssn', 'credit_card', 'cc', 'cvv',
+    'auth', 'authorization', 'bearer',
+    'code', 'otp', 'verification', 'reset_token',
+    'nonce', 'csrf', 'xsrf',
+  ]);
+
+  // ── Regex Patterns for Sensitive Data ──────────────────────────────
+
+  const SANITIZATION_PATTERNS = [
+    {
+      name: 'email',
+      pattern: /[a-zA-Z0-9._%+\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,}/g,
+      replacement: '[REDACTED_EMAIL]',
+    },
+    {
+      name: 'phone',
+      pattern: /(?<![a-zA-Z0-9])(?:\+?\d{1,4}[\s\-.]?)?\(?\d{2,4}\)?[\s\-.]?\d{3,4}[\s\-.]?\d{3,5}(?![a-zA-Z0-9])/g,
+      replacement: '[REDACTED_PHONE]',
+    },
+    {
+      name: 'bearer_token',
+      pattern: /Bearer\s+[A-Za-z0-9\-._~+/]+=*/gi,
+      replacement: 'Bearer [REDACTED_TOKEN]',
+    },
+    {
+      name: 'jwt',
+      pattern: /eyJ[A-Za-z0-9\-_]+\.eyJ[A-Za-z0-9\-_]+\.[A-Za-z0-9\-_.+/=]*/g,
+      replacement: '[REDACTED_JWT]',
+    },
+    {
+      name: 'api_key',
+      pattern: /(?:api[_\-]?key|apikey)\s*[:=]\s*["']?[A-Za-z0-9\-._~+/]{8,}["']?/gi,
+      replacement: '[REDACTED_API_KEY]',
+    },
+    {
+      name: 'generic_secret',
+      pattern: /(?:secret|private[_\-]?key|client[_\-]?secret)\s*[:=]\s*["']?[A-Za-z0-9\-._~+/]{8,}["']?/gi,
+      replacement: '[REDACTED_SECRET]',
+    },
+    {
+      name: 'password_field',
+      pattern: /(?:password|passwd|pwd)\s*[:=]\s*["']?[^\s"',}{]{1,}["']?/gi,
+      replacement: '[REDACTED_PASSWORD]',
+    },
+    {
+      name: 'session_id',
+      pattern: /(?:session[_\-]?id|sid|jsessionid|phpsessid)\s*[:=]\s*["']?[A-Za-z0-9\-._]{8,}["']?/gi,
+      replacement: '[REDACTED_SESSION]',
+    },
+    {
+      name: 'cookie',
+      pattern: /(?:cookie|set-cookie)\s*[:=]\s*["']?[^\n"']{8,}["']?/gi,
+      replacement: '[REDACTED_COOKIE]',
+    },
+    {
+      name: 'authorization',
+      pattern: /(?:authorization)\s*[:=]\s*["']?[^\n"']{8,}["']?/gi,
+      replacement: '[REDACTED_AUTH]',
+    },
+  ];
+
+  // ── URL Sanitization ───────────────────────────────────────────────
+
+  /**
+   * Sanitize a URL: preserve path, sanitize query parameters.
+   * - Safe params: kept as-is
+   * - Sensitive params: removed entirely
+   * - Unknown params: value replaced with [PARAM_REMOVED]
+   */
+  function sanitizeUrl(urlString) {
+    if (!urlString || typeof urlString !== 'string') return urlString;
+
+    try {
+      const url = new URL(urlString);
+      const sanitizedParams = new URLSearchParams();
+      let hadParams = false;
+
+      for (const [key, value] of url.searchParams) {
+        hadParams = true;
+        const keyLower = key.toLowerCase();
+
+        if (SENSITIVE_QUERY_PARAMS.has(keyLower)) {
+          // Sensitive: remove entirely (don't even include the key)
+          continue;
+        } else if (SAFE_QUERY_PARAMS.has(keyLower)) {
+          // Safe: keep as-is
+          sanitizedParams.set(key, value);
+        } else {
+          // Unknown: keep key, mask value
+          sanitizedParams.set(key, '[PARAM_REMOVED]');
+        }
+      }
+
+      url.search = sanitizedParams.toString();
+
+      // Also strip hash if it looks like it contains sensitive data
+      if (url.hash && url.hash.length > 100) {
+        url.hash = '';
+      }
+
+      return url.toString();
+    } catch {
+      // Not a valid URL — apply text sanitization instead
+      return sanitizeText(urlString);
+    }
+  }
+
+  // ── Text Sanitization ──────────────────────────────────────────────
+
+  /**
+   * Sanitize a text string by applying all regex patterns.
+   * Returns { text, redactions } where redactions counts per pattern.
+   */
+  function sanitizeText(text, redactions = null) {
+    if (!text || typeof text !== 'string') return text;
+
+    let result = text;
+    for (const { name, pattern, replacement } of SANITIZATION_PATTERNS) {
+      const before = result;
+      // Reset regex lastIndex for global patterns
+      pattern.lastIndex = 0;
+      result = result.replace(pattern, replacement);
+      if (redactions && result !== before) {
+        const count = (before.match(pattern) || []).length;
+        pattern.lastIndex = 0;
+        redactions[name] = (redactions[name] || 0) + count;
+      }
+    }
+
+    return result;
+  }
+
+  // ── Deep Sanitization ──────────────────────────────────────────────
+
+  /**
+   * Recursively sanitize all string values in an object/array.
+   * URL fields get URL-specific sanitization.
+   */
+  function sanitizeDeep(obj, redactions = {}) {
+    if (obj === null || obj === undefined) return obj;
+
+    if (typeof obj === 'string') {
+      return sanitizeText(obj, redactions);
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(item => sanitizeDeep(item, redactions));
+    }
+
+    if (typeof obj === 'object') {
+      const result = {};
+      for (const [key, value] of Object.entries(obj)) {
+        const keyLower = key.toLowerCase();
+
+        // URL fields get URL-specific sanitization
+        if (keyLower === 'url' || keyLower.endsWith('url') || keyLower === 'href') {
+          result[key] = typeof value === 'string' ? sanitizeUrl(value) : sanitizeDeep(value, redactions);
+        } else {
+          result[key] = sanitizeDeep(value, redactions);
+        }
+      }
+      return result;
+    }
+
+    return obj;
+  }
+
+  // ── Final Validation (Layer 5) ─────────────────────────────────────
+
+  /**
+   * Walk the entire JSON tree and flag any remaining suspicious patterns.
+   * Returns true if the data passes validation.
+   */
+  function validateFinalReport(report) {
+    const issues = [];
+    const jsonStr = JSON.stringify(report);
+
+    // Check for any remaining email-like patterns
+    const emailCheck = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g;
+    const emailMatches = jsonStr.match(emailCheck);
+    if (emailMatches) {
+      issues.push(`Found ${emailMatches.length} potential email address(es)`);
+    }
+
+    // Check for any remaining JWT-like patterns
+    const jwtCheck = /eyJ[A-Za-z0-9\-_]{10,}/g;
+    const jwtMatches = jsonStr.match(jwtCheck);
+    if (jwtMatches) {
+      issues.push(`Found ${jwtMatches.length} potential JWT token(s)`);
+    }
+
+    return {
+      passed: issues.length === 0,
+      issues,
+    };
+  }
+
+  // ── Build Sanitization Summary ─────────────────────────────────────
+
+  function buildSummary(redactions) {
+    const totalRedactions = Object.values(redactions).reduce((a, b) => a + b, 0);
+    return {
+      totalRedactions,
+      redactionsByType: { ...redactions },
+    };
+  }
+
+  // ── Public API ─────────────────────────────────────────────────────
+
+  return {
+    sanitizeUrl,
+    sanitizeText,
+    sanitizeDeep,
+    validateFinalReport,
+    buildSummary,
+    SAFE_QUERY_PARAMS,
+    SENSITIVE_QUERY_PARAMS,
+  };
+})();
+
+// Make available in different contexts
+if (typeof globalThis !== 'undefined') {
+  globalThis.Sanitizer = Sanitizer;
+}

package/website/README.md

@@ -0,0 +1,282 @@
+# Bug Report Widget
+
+A drop-in JavaScript widget for structured bug reporting. Users click a floating button, describe what happened, and download a self-contained HTML report with an annotated screenshot, interactions, console logs, JS errors, and network requests — all sanitized.
+
+---
+
+## Installation
+
+```bash
+npm install bug-report-js
+```
+
+---
+
+## Quick Start
+
+**Via script tag:**
+
+```html
+<script src="node_modules/bug-report-js/website/bug-report.js"></script>
+```
+
+The widget auto-initializes and auto-detects the browser language. A floating button appears bottom-right.
+
+**Via import (bundler):**
+
+```js
+import BugReportWidget from 'bug-report-js';
+
+BugReportWidget.init({
+  language: 'en',
+  primaryColor: '#6366f1',
+});
+```
+
+---
+
+## Branding / Corporate Identity
+
+### Colors
+
+```js
+BugReportWidget.init({
+  primaryColor: '#E63946',       // buttons, hover borders, scrollbars, report accent
+  primaryColorHover: '#C1121F',  // hover state (defaults to primaryColor if omitted)
+});
+```
+
+### Icon
+
+The `icon` value is rendered as `innerHTML` — use an emoji or an inline SVG:
+
+```js
+// Emoji
+BugReportWidget.init({ icon: '🚨' });
+
+// Inline SVG (e.g. your logo)
+BugReportWidget.init({
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="white">
+    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+  </svg>`
+});
+```
+
+### Onboarding Tooltip
+
+An optional speech-bubble tooltip above the button, auto-hides after 8 seconds. Use `{icon}` as a placeholder for the configured icon. Supports HTML:
+
+```js
+BugReportWidget.init({
+  tooltipMessage: '<strong>Found a bug?</strong><br>Click {icon} to report it.',
+});
+```
+
+### Full Branding Example
+
+```js
+BugReportWidget.init({
+  icon: '🚨',
+  primaryColor: '#0052CC',
+  primaryColorHover: '#0747A6',
+  tooltipMessage: '<strong>Found a bug?</strong><br>Click {icon} to send a report.',
+  language: 'en',
+});
+```
+
+---
+
+## Language & i18n
+
+The widget auto-detects the browser language (`navigator.language`). Built-in translations: `en`, `de`.
+
+**Force a language:**
+
+```js
+BugReportWidget.init({ language: 'en' });
+```
+
+**Add a new language:**
+
+```js
+BugReportWidget.init({
+  language: 'fr',
+  translations: {
+    fr: {
+      btnTitle: 'Signaler un bug',
+      modalTitle: 'Rapport de bug',
+      actualPrompt: 'Que s\'est-il passé ?',
+      actualPlaceholder: 'État actuel…',
+      expectedPrompt: 'Qu\'est-ce que vous attendiez ?',
+      expectedPlaceholder: 'État attendu…',
+      cancel: 'Annuler',
+      download: 'Télécharger le rapport',
+      // see Translation Keys table for all keys
+    }
+  }
+});
+```
+
+**Override individual strings in an existing language:**
+
+```js
+BugReportWidget.init({
+  translations: {
+    en: { btnTitle: 'Report an Issue' }
+  }
+});
+```
+
+### Translation Keys
+
+| Key | Default (en) | What it controls |
+|-----|-------------|-----------------|
+| `btnTitle` | `Create Bug Report` | Floating button tooltip |
+| `modalTitle` | `Bug Report` | Report title |
+| `actualPrompt` | `What happened?` | "Actual state" field heading |
+| `actualDesc` | `Briefly describe the problem…` | "Actual state" field description |
+| `actualPlaceholder` | `Actual state…` | "Actual state" textarea placeholder |
+| `expectedPrompt` | `What did you expect?` | "Expected state" field heading |
+| `expectedDesc` | `Describe the expected behavior…` | "Expected state" field description |
+| `expectedPlaceholder` | `Expected state…` | "Expected state" textarea placeholder |
+| `drawTitle` | `Mark Screenshot` | Screenshot annotation modal title |
+| `drawDesc` | `You can draw on the screenshot…` | Screenshot annotation modal description |
+| `drawInstruction` | `Draw on the screenshot…` | Instruction inside the annotation view |
+| `cancel` | `Cancel` | Cancel button |
+| `download` | `Download Report` | Download button |
+| `actualLabel` | `Actual state` | Label in the downloaded report |
+| `expectedLabel` | `Expected state` | Label in the downloaded report |
+| `screenshotTitle` | `Annotated Screenshot…` | Screenshot section heading in report |
+| `screenshotNA` | `Screenshot not available` | Shown when capture fails |
+| `interactions` | `User Interactions` | Section heading in report |
+| `consoleLogs` | `Console Logs` | Section heading in report |
+| `jsErrors` | `JavaScript Errors` | Section heading in report |
+| `networkRequests` | `Network Requests` | Section heading in report |
+| `sanitizationSummary` | `Sanitization Summary` | Section heading in report |
+| `redactions` | `redactions` | Counter label ("3 redactions") |
+| `noRedactions` | `No redactions were necessary.` | Shown when nothing was redacted |
+| `limitations` | `Capture Limitations` | Section heading in report |
+| `reportTitle` | `Bug Report` | `<title>` and heading of the HTML report file |
+| `createdAt` | `Created on` | Date prefix in report header |
+| `metaUrl` | `URL` | Metadata card label |
+| `metaBrowser` | `Browser` | Metadata card label |
+| `metaViewport` | `Viewport` | Metadata card label |
+| `metaScreenResolution` | `Screen Resolution` | Metadata card label |
+| `metaScrollPosition` | `Scroll Position` | Metadata card label |
+| `metaZoomLevel` | `Zoom Level` | Metadata card label |
+| `metaUserAgent` | `User Agent` | Metadata card label |
+| `noInfo` | `No information provided` | Fallback when user skips a field |
+| `unknown` | `Unknown` | Fallback for undetected browser name |
+| `generatedAt` | `Generated` | Footer prefix |
+| `reportFooter` | `Bug Report Dashboard` | Footer label |
+
+---
+
+## Capture Limits
+
+```js
+BugReportWidget.init({
+  limits: {
+    interactions: 50,  // default: 50
+    console: 100,      // default: 100
+    errors: 50,        // default: 50
+    network: 200,      // default: 200
+  }
+});
+```
+
+---
+
+## Sanitization
+
+Sensitive data is automatically redacted from URLs and console logs. You can extend or replace the built-in rules.
+
+> Setting any of these fields **replaces** the built-in list for that field.
+
+**Extend the URL parameter allowlist** (values kept as-is):
+
+```js
+BugReportWidget.init({
+  sanitization: {
+    safeParams: ['q', 'page', 'sort', 'my_custom_param'],
+  }
+});
+```
+
+**Extend the sensitive parameter blocklist** (removed entirely from URLs):
+
+```js
+BugReportWidget.init({
+  sanitization: {
+    sensitiveParams: ['token', 'api_key', 'my_internal_id'],
+  }
+});
+```
+
+**Add custom regex redaction patterns:**
+
+```js
+BugReportWidget.init({
+  sanitization: {
+    patterns: [
+      { name: 'invoice_id', p: /INV-\d{6}/g, r: '[REDACTED_INVOICE]' },
+    ]
+  }
+});
+```
+
+---
+
+## Full `init()` Reference
+
+```js
+BugReportWidget.init({
+  // Appearance
+  icon: '🐛',                    // emoji or inline SVG string
+  primaryColor: '#6366f1',       // hex color
+  primaryColorHover: '#7577f5',  // hex color (defaults to primaryColor)
+  tooltipMessage: null,          // HTML string, or null to disable
+
+  // Language
+  language: 'en',                // 'en' | 'de' | any key added via translations
+  translations: {                // add languages or override individual strings
+    en: { btnTitle: 'Report Issue' }
+  },
+
+  // Capture limits (ring buffer sizes)
+  limits: {
+    interactions: 50,
+    console: 100,
+    errors: 50,
+    network: 200,
+  },
+
+  // Sanitization
+  sanitization: {
+    safeParams: [...],      // URL params whose values are kept
+    sensitiveParams: [...], // URL params removed entirely
+    patterns: [...],        // { name, p: RegExp, r: string }
+  },
+});
+```
+
+---
+
+## Extension vs. Widget
+
+| Feature | Chrome Extension | Website Widget |
+|---------|-----------------|----------------|
+| Network capture | All requests via `webRequest` API | `fetch()` + `XHR` only |
+| Installation | Chrome Extensions page | Single `<script>` tag or NPM |
+| Scope | Any website | Only the site that includes it |
+| Script/image requests | ✅ Captured | ❌ Not captured |
+
+---
+
+## Local Demo
+
+```bash
+cd website
+python3 -m http.server 8080
+# open http://localhost:8080
+```