npm - @bugspotter/sdk - Versions diffs - 0.3.1 → 1.1.0 - Mend

@bugspotter/sdk 0.3.1 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/.husky/pre-commit +1 -0
package/CHANGELOG.md +15 -0
package/CONTRIBUTING.md +200 -0
package/README.md +18 -16
package/SECURITY.md +65 -0
package/dist/bugspotter.min.js +2 -1
package/dist/bugspotter.min.js.map +1 -0
package/dist/capture/console.js +2 -2
package/dist/capture/network.js +2 -2
package/dist/core/offline-queue.d.ts +13 -0
package/dist/core/offline-queue.js +49 -4
package/dist/core/transport.js +20 -8
package/dist/index.d.ts +1 -0
package/dist/index.esm.js +1460 -1178
package/dist/index.esm.js.map +1 -1
package/dist/index.js +2 -0
package/dist/utils/config-validator.js +6 -0
package/dist/utils/sanitize-patterns.d.ts +3 -76
package/dist/utils/sanitize-patterns.js +18 -216
package/dist/utils/url-helpers.d.ts +2 -25
package/dist/utils/url-helpers.js +10 -61
package/dist/version.d.ts +1 -1
package/dist/version.js +1 -1
package/dist/widget/button.d.ts +10 -0
package/dist/widget/button.js +200 -3
package/docs/CDN.md +5 -5
package/eslint.config.js +10 -0
package/package.json +15 -4
package/release_notes.md +4 -0
package/rollup.config.js +1 -1
package/tsconfig.cjs.json +1 -1
package/dist/core/circular-buffer.d.ts +0 -42
package/dist/core/circular-buffer.js +0 -80

package/dist/widget/button.js CHANGED Viewed

@@ -37,6 +37,104 @@ const BUTTON_STYLES = {
         active: 'scale(0.95)',
     },
 };
+// SVG sanitization whitelists (module-level for performance)
+const SAFE_SVG_TAGS = new Set([
+    'svg',
+    'g',
+    'path',
+    'circle',
+    'rect',
+    'line',
+    'polyline',
+    'polygon',
+    'ellipse',
+    'text',
+    'tspan',
+    // SECURITY: 'use' deliberately excluded - requires href/xlink:href attributes which pose XSS risks
+    // and are not in the attribute whitelist, making <use> non-functional anyway
+    'symbol',
+    'defs',
+    'marker',
+    'lineargradient', // lowercase to match tagName.toLowerCase() in sanitizeSVGElement (parser preserves camelCase)
+    'radialgradient', // lowercase to match tagName.toLowerCase() in sanitizeSVGElement (parser preserves camelCase)
+    'stop',
+    'clippath', // lowercase to match tagName.toLowerCase() in sanitizeSVGElement (parser preserves camelCase)
+    'mask',
+    // SECURITY: 'image' deliberately excluded - requires href/xlink:href attributes which pose XSS risks
+    // and are not in the attribute whitelist, making <image> non-functional anyway
+    // SECURITY: foreignObject deliberately excluded - allows embedding arbitrary HTML/XML
+    // and can bypass SVG sanitization (e.g., <foreignObject><body><script>...</script></body></foreignObject>)
+]);
+const SAFE_SVG_ATTRIBUTES = new Set([
+    'id',
+    'class',
+    // SECURITY: 'style' deliberately excluded - can enable CSS-based attacks:
+    // - expression() in older browsers
+    // - url() with javascript:/data: URIs
+    // - @import with malicious stylesheets
+    // - CSS data exfiltration
+    // Use specific styling attributes (fill, stroke, opacity, etc.) instead
+    'd',
+    'cx',
+    'cy',
+    'r',
+    'rx',
+    'ry',
+    'x',
+    'y',
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+    'width',
+    'height',
+    'viewbox', // lowercase to match attrName.toLowerCase() in sanitizeSVGElement (parser preserves camelCase)
+    'xmlns',
+    'fill',
+    'stroke',
+    'stroke-width',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'opacity',
+    'fill-opacity',
+    'stroke-opacity',
+    'transform',
+    'points',
+    'text-anchor',
+    'font-size',
+    'font-family',
+    'font-weight',
+    'offset',
+    'stop-color',
+    'stop-opacity',
+    'clip-path',
+    'mask', // Used to reference mask definitions: mask="url(#maskId)"
+]);
+/**
+ * Check if an attribute value contains dangerous patterns
+ * Uses simple string matching instead of regex for better performance and clarity
+ */
+const isDangerousAttributeValue = (value) => {
+    const lowerValue = value.toLowerCase();
+    // Dangerous protocol checks
+    if (lowerValue.includes('javascript:'))
+        return true;
+    if (lowerValue.includes('vbscript:'))
+        return true;
+    // SECURITY: Block ALL data: URIs by default
+    // data:text/html, data:application/javascript, data:image/svg+xml can all execute scripts
+    // Even data:text/javascript or data URIs with embedded scripts are dangerous
+    if (lowerValue.includes('data:'))
+        return true;
+    // CSS-based attack patterns
+    if (lowerValue.includes('expression('))
+        return true; // IE CSS expressions
+    if (lowerValue.includes('@import'))
+        return true; // CSS imports
+    if (lowerValue.includes('-moz-binding'))
+        return true; // Firefox XBL binding
+    return false;
+};
 class FloatingButton {
     constructor(options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -80,10 +178,12 @@ class FloatingButton {
         const btn = document.createElement('button');
         // Set button content (SVG or text)
         if (this.options.customSvg) {
-            btn.innerHTML = this.options.customSvg;
+            // Safely inject custom SVG by parsing and validating it
+            this.setSafeHTMLContent(btn, this.options.customSvg);
         }
         else if (this.options.icon === 'svg') {
-            btn.innerHTML = DEFAULT_SVG_ICON;
+            // Safely inject default SVG
+            this.setSafeHTMLContent(btn, DEFAULT_SVG_ICON);
         }
         else {
             btn.textContent = this.options.icon;
@@ -95,6 +195,103 @@ class FloatingButton {
         this.addHoverEffects(btn);
         return btn;
     }
+    /**
+     * Safely inject HTML content by parsing and validating SVG elements
+     * Prevents XSS attacks by only allowing safe SVG elements and attributes
+     */
+    setSafeHTMLContent(element, htmlContent) {
+        try {
+            if (typeof window === 'undefined' ||
+                typeof window.DOMParser === 'undefined') {
+                element.textContent = htmlContent;
+                return;
+            }
+            // SECURITY: Use DOMParser with image/svg+xml MIME type for strict SVG parsing
+            // This prevents HTML-specific parsing quirks from being exploited
+            const parser = new window.DOMParser();
+            const doc = parser.parseFromString(htmlContent, 'image/svg+xml');
+            // Check for parse errors
+            const parserError = doc.querySelector('parsererror');
+            if (parserError) {
+                element.textContent = htmlContent;
+                return;
+            }
+            if (doc.documentElement &&
+                doc.documentElement.nodeType === Node.ELEMENT_NODE) {
+                const rootElement = doc.documentElement;
+                // SECURITY: Root element MUST be SVG - prevents wrapper element injection
+                // Reject structures like <div><svg>...</svg></div>
+                if (rootElement.tagName.toLowerCase() === 'svg') {
+                    // SECURITY: Only proceed if there's exactly one root element
+                    // This prevents attacks like: <svg></svg><script>alert('XSS')</script>
+                    if (doc.children.length === 1) {
+                        // Remove potentially dangerous attributes and event handlers
+                        this.sanitizeSVGElement(rootElement);
+                        // Clear the target element and append only the validated SVG element
+                        element.innerHTML = '';
+                        element.appendChild(rootElement);
+                        return;
+                    }
+                }
+            }
+            // If not valid SVG, fall back to text content to prevent XSS
+            element.textContent = htmlContent;
+        }
+        catch (error) {
+            // On any error, use text content for safety
+            // eslint-disable-next-line no-console
+            console.warn('[BugSpotter] Failed to inject custom SVG content:', error);
+            element.textContent = htmlContent;
+        }
+    }
+    /**
+     * Recursively sanitize SVG elements by removing dangerous tags and attributes
+     * Uses whitelists to ensure only safe SVG content is preserved
+     */
+    sanitizeSVGElement(element) {
+        // Process all elements in the tree
+        const elementsToProcess = [element];
+        const processedElements = new WeakSet();
+        while (elementsToProcess.length > 0) {
+            const current = elementsToProcess.pop();
+            if (!current || processedElements.has(current))
+                continue;
+            processedElements.add(current);
+            // SECURITY: First, sanitize the current element's attributes (including root)
+            // This prevents attacks like <svg onload="alert('XSS')">
+            Array.from(current.attributes || []).forEach((attr) => {
+                const attrName = attr.name.toLowerCase();
+                // SECURITY: Explicitly reject all event handler attributes (on*)
+                // This provides defense-in-depth and prevents accidental whitelisting
+                if (attrName.startsWith('on')) {
+                    current.removeAttribute(attr.name);
+                    return;
+                }
+                // Only keep whitelisted attributes
+                if (!SAFE_SVG_ATTRIBUTES.has(attrName)) {
+                    current.removeAttribute(attr.name);
+                    return;
+                }
+                // Check attribute values for dangerous patterns
+                if (isDangerousAttributeValue(attr.value)) {
+                    current.removeAttribute(attr.name);
+                    return;
+                }
+            });
+            // Then, process children elements
+            const children = Array.from(current.children || []);
+            children.forEach((child) => {
+                const tagName = child.tagName.toLowerCase();
+                // SECURITY: Remove tags not in whitelist (blocks <script>, <style>, <iframe>, etc.)
+                if (!SAFE_SVG_TAGS.has(tagName)) {
+                    child.remove();
+                    return;
+                }
+                // Add to processing queue for recursive sanitization
+                elementsToProcess.push(child);
+            });
+        }
+    }
     getButtonStyles() {
         const { position, size, offset, backgroundColor, zIndex } = this.options;
         const positionStyles = this.getPositionStyles(position, offset);
@@ -159,7 +356,7 @@ class FloatingButton {
     setIcon(icon) {
         this.options.icon = icon;
         if (icon === 'svg') {
-            this.button.innerHTML = DEFAULT_SVG_ICON;
+            this.setSafeHTMLContent(this.button, DEFAULT_SVG_ICON);
         }
         else {
             this.button.textContent = icon;

package/docs/CDN.md CHANGED Viewed

@@ -30,7 +30,7 @@ Add the SDK to your HTML file:
 **Example:**
 ```html
-<script src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"></script>
+<script src="https://cdn.bugspotter.io/sdk/bugspotter-1.0.0.min.js"></script>
 ```
 ### Development (Latest)
@@ -49,8 +49,8 @@ For enhanced security, use SRI hashes to verify file integrity:
 ```html
 <script
-  src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"
-  integrity="sha384-..."
+  src="https://cdn.bugspotter.io/sdk/bugspotter-1.0.0.min.js"
+  integrity="sha384-WmzRwRsJDYQTHnPU0mTuz+VqnCFn70GlSiGh6lsogKahPBEB48pTzfEEB71+uA7I"
   crossorigin="anonymous"
 ></script>
 ```
@@ -58,7 +58,7 @@ For enhanced security, use SRI hashes to verify file integrity:
 To generate SRI hash for a specific version:
 ```bash
-curl https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js | openssl dgst -sha384 -binary | openssl base64 -A
+curl https://cdn.bugspotter.io/sdk/bugspotter-1.0.0.min.js | openssl dgst -sha384 -binary | openssl base64 -A
 ```
 ## 📝 Complete Example
@@ -75,7 +75,7 @@ curl https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js | openssl dgst -sha38
     <button id="trigger-error">Trigger Test Error</button>
     <!-- Load BugSpotter SDK -->
-    <script src="https://cdn.bugspotter.io/sdk/bugspotter-0.1.0.min.js"></script>
+    <script src="https://cdn.bugspotter.io/sdk/bugspotter-1.0.0.min.js"></script>
     <script>
       // Initialize BugSpotter

package/eslint.config.js CHANGED Viewed

@@ -80,6 +80,16 @@ export default [
   },
   {
     files: ['**/*.test.{ts,js}', '**/*.spec.{ts,js}'],
+    languageOptions: {
+      globals: {
+        global: 'readonly',
+        Headers: 'readonly',
+        process: 'readonly',
+        ReadableStream: 'readonly',
+        WritableStream: 'readonly',
+        TransformStream: 'readonly',
+      },
+    },
     rules: {
       'no-console': 'off',
       '@typescript-eslint/no-explicit-any': 'off',

package/package.json CHANGED Viewed

@@ -1,7 +1,8 @@
 {
   "name": "@bugspotter/sdk",
-  "version": "0.3.1",
+  "version": "1.1.0",
   "description": "Professional bug reporting SDK with screenshots, session replay, and automatic error capture for web applications",
+  "packageManager": "pnpm@9.15.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "browser": "dist/bugspotter.min.js",
@@ -55,8 +56,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/apexbridge-tech/bugspotter-sdk.git",
-    "directory": "packages/core"
+    "url": "https://github.com/apexbridge-tech/bugspotter-sdk.git"
   },
   "bugs": {
     "url": "https://github.com/apexbridge-tech/bugspotter-sdk/issues"
@@ -69,7 +69,17 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "lint-staged": {
+    "*.{ts,js}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{json,md}": [
+      "prettier --write"
+    ]
+  },
   "dependencies": {
+    "@bugspotter/common": "^1.0.1",
     "@rrweb/types": "2.0.0-alpha.18",
     "html-to-image": "^1.11.13",
     "pako": "^2.1.0",
@@ -90,8 +100,9 @@
     "eslint": "^9.17.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.2.1",
-    "happy-dom": "^19.0.2",
+    "happy-dom": "^20.0.2",
     "jsdom": "^24.1.0",
+    "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
     "rollup": "^4.55.1",
     "rollup-plugin-dts": "^6.3.0",

package/release_notes.md ADDED Viewed

@@ -0,0 +1,4 @@
+## Release 1.1.0
+### Changes

package/rollup.config.js CHANGED Viewed

@@ -22,4 +22,4 @@ export default {
     }),
   ],
   external: [], // Bundle everything for now
-};
+};

package/tsconfig.cjs.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "../../tsconfig.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "target": "ES2017",
     "module": "CommonJS",

package/dist/core/circular-buffer.d.ts DELETED Viewed

@@ -1,42 +0,0 @@
-/**
- * A generic circular buffer implementation for storing a fixed number of items.
- * When the buffer is full, new items overwrite the oldest items.
- *
- * @template T The type of items stored in the buffer
- */
-export declare class CircularBuffer<T> {
-    private maxSize;
-    private items;
-    private index;
-    private count;
-    constructor(maxSize: number);
-    /**
-     * Add an item to the buffer. If the buffer is full, the oldest item is overwritten.
-     */
-    add(item: T): void;
-    /**
-     * Get all items in chronological order (oldest to newest).
-     * Returns a copy of the internal array.
-     */
-    getAll(): T[];
-    /**
-     * Clear all items from the buffer.
-     */
-    clear(): void;
-    /**
-     * Get the current number of items in the buffer.
-     */
-    get size(): number;
-    /**
-     * Get the maximum capacity of the buffer.
-     */
-    get capacity(): number;
-    /**
-     * Check if the buffer is empty.
-     */
-    get isEmpty(): boolean;
-    /**
-     * Check if the buffer is full.
-     */
-    get isFull(): boolean;
-}

package/dist/core/circular-buffer.js DELETED Viewed

@@ -1,80 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CircularBuffer = void 0;
-/**
- * A generic circular buffer implementation for storing a fixed number of items.
- * When the buffer is full, new items overwrite the oldest items.
- *
- * @template T The type of items stored in the buffer
- */
-class CircularBuffer {
-    constructor(maxSize) {
-        this.maxSize = maxSize;
-        this.items = [];
-        this.index = 0;
-        this.count = 0;
-        if (maxSize <= 0) {
-            throw new Error('CircularBuffer maxSize must be greater than 0');
-        }
-    }
-    /**
-     * Add an item to the buffer. If the buffer is full, the oldest item is overwritten.
-     */
-    add(item) {
-        if (this.count < this.maxSize) {
-            this.items.push(item);
-            this.count++;
-        }
-        else {
-            this.items[this.index] = item;
-        }
-        this.index = (this.index + 1) % this.maxSize;
-    }
-    /**
-     * Get all items in chronological order (oldest to newest).
-     * Returns a copy of the internal array.
-     */
-    getAll() {
-        if (this.count < this.maxSize) {
-            return [...this.items];
-        }
-        // Return items in chronological order when buffer is full
-        return [
-            ...this.items.slice(this.index),
-            ...this.items.slice(0, this.index),
-        ];
-    }
-    /**
-     * Clear all items from the buffer.
-     */
-    clear() {
-        this.items = [];
-        this.index = 0;
-        this.count = 0;
-    }
-    /**
-     * Get the current number of items in the buffer.
-     */
-    get size() {
-        return this.count;
-    }
-    /**
-     * Get the maximum capacity of the buffer.
-     */
-    get capacity() {
-        return this.maxSize;
-    }
-    /**
-     * Check if the buffer is empty.
-     */
-    get isEmpty() {
-        return this.count === 0;
-    }
-    /**
-     * Check if the buffer is full.
-     */
-    get isFull() {
-        return this.count >= this.maxSize;
-    }
-}
-exports.CircularBuffer = CircularBuffer;