@zaplier/sdk 1.0.3 → 1.0.5

package/dist/sdk.js

@@ -179,8 +179,10 @@
      * Hash fingerprint components into a stable identifier
      */
     function hashFingerprint(components) {
-        // Convert components to canonical string representation
-        const canonical = JSON.stringify(components, Object.keys(components).sort());
+        // Convert components to canonical string representation using deep sorting
+        // CRITICAL: Do NOT use JSON.stringify(obj, keys) as it filters out nested properties!
+        // Use canonicalizeStable instead which handles deep sorting and normalization.
+        const canonical = JSON.stringify(canonicalizeStable(components));
         // Use MurmurHash3 x64 for consistent hashing
         return x64hash128(canonical);
     }
@@ -1033,7 +1035,13 @@
             // Quick stability check
             const webglContext = gl;
             const renderer = webglContext.getParameter(webglContext.RENDERER);
-            return Boolean(renderer && typeof renderer === "string");
+            const isSupported = Boolean(renderer && typeof renderer === "string");
+            // Cleanup context to avoid "Too many active WebGL contexts" warning
+            const ext = webglContext.getExtension("WEBGL_lose_context");
+            if (ext) {
+                ext.loseContext();
+            }
+            return isSupported;
         }
         catch {
             return false;
@@ -1347,11 +1355,11 @@
      * Text to render for canvas fingerprinting with maximum differentiation
      */
     const CANVAS_TEXTS = [
-        'RabbitTracker Canvas 🎨🔒2024',
-        'Żółć gęślą jaźń €$¢£¥',
-        'αβγδεζηθικλμνξο',
-        '中文测试字体渲染',
-        '🌟🎯🚀💎🌊🎨'
+        "Zap Canvas 🎨🔒2024",
+        "Żółć gęślą jaźń €$¢£¥",
+        "αβγδεζηθικλμνξο",
+        "中文测试字体渲染",
+        "🌟🎯🚀💎🌊🎨",
     ];
     /**
      * Enhanced geometric shapes for canvas fingerprinting with sub-pixel precision
@@ -1359,19 +1367,19 @@
     function drawAdvancedGeometry(ctx) {
         // Enable high-quality rendering for sub-pixel differences
         ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = 'high';
+        ctx.imageSmoothingQuality = "high";
         // Complex gradient with multiple stops
         const radialGradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 50);
-        radialGradient.addColorStop(0, 'rgba(255, 0, 0, 0.8)');
-        radialGradient.addColorStop(0.3, 'rgba(0, 255, 0, 0.6)');
-        radialGradient.addColorStop(0.7, 'rgba(0, 0, 255, 0.4)');
-        radialGradient.addColorStop(1, 'rgba(255, 255, 0, 0.2)');
+        radialGradient.addColorStop(0, "rgba(255, 0, 0, 0.8)");
+        radialGradient.addColorStop(0.3, "rgba(0, 255, 0, 0.6)");
+        radialGradient.addColorStop(0.7, "rgba(0, 0, 255, 0.4)");
+        radialGradient.addColorStop(1, "rgba(255, 255, 0, 0.2)");
         ctx.fillStyle = radialGradient;
         ctx.fillRect(10, 10, 130, 100);
         // Sub-pixel positioned shapes for GPU/anti-aliasing differentiation
-        ctx.fillStyle = 'rgba(102, 204, 0, 0.7)';
+        ctx.fillStyle = "rgba(102, 204, 0, 0.7)";
         ctx.fillRect(15.5, 15.3, 49.7, 49.2);
-        ctx.fillStyle = '#f60';
+        ctx.fillStyle = "#f60";
         ctx.fillRect(70.3, 10.7, 50.1, 50.9);
         // Complex bezier curves that stress different rendering engines
         ctx.beginPath();
@@ -1379,21 +1387,21 @@
         ctx.bezierCurveTo(25.2, 120.1, 75.8, 90.3, 125.5, 120.7);
         ctx.bezierCurveTo(125.5, 120.7, 90.1, 150.2, 60.8, 140.9);
         ctx.closePath();
-        ctx.fillStyle = 'rgba(200, 100, 50, 0.6)';
+        ctx.fillStyle = "rgba(200, 100, 50, 0.6)";
         ctx.fill();
         // Overlapping circles with complex blending
-        ctx.globalCompositeOperation = 'multiply';
+        ctx.globalCompositeOperation = "multiply";
         ctx.beginPath();
         ctx.arc(50.7, 80.3, 20.1, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(255, 0, 100, 0.5)';
+        ctx.fillStyle = "rgba(255, 0, 100, 0.5)";
         ctx.fill();
         ctx.beginPath();
         ctx.arc(70.3, 80.7, 20.9, 0, Math.PI * 2);
-        ctx.fillStyle = 'rgba(0, 255, 100, 0.5)';
+        ctx.fillStyle = "rgba(0, 255, 100, 0.5)";
         ctx.fill();
-        ctx.globalCompositeOperation = 'source-over';
+        ctx.globalCompositeOperation = "source-over";
         // Thin lines to test anti-aliasing
-        ctx.strokeStyle = 'rgba(50, 50, 50, 0.8)';
+        ctx.strokeStyle = "rgba(50, 50, 50, 0.8)";
         ctx.lineWidth = 0.5;
         ctx.setLineDash([2.3, 1.7]);
         for (let i = 0; i < 10; i++) {
@@ -1405,29 +1413,29 @@
         // Reset line dash
         ctx.setLineDash([]);
         // Pattern with complex repeating elements
-        const patternCanvas = document.createElement('canvas');
+        const patternCanvas = document.createElement("canvas");
         patternCanvas.width = 20;
         patternCanvas.height = 20;
-        const patternCtx = patternCanvas.getContext('2d');
+        const patternCtx = patternCanvas.getContext("2d");
         if (patternCtx) {
-            patternCtx.fillStyle = 'rgba(150, 75, 200, 0.3)';
+            patternCtx.fillStyle = "rgba(150, 75, 200, 0.3)";
             patternCtx.fillRect(0, 0, 10, 10);
             patternCtx.fillRect(10, 10, 10, 10);
-            const pattern = ctx.createPattern(patternCanvas, 'repeat');
+            const pattern = ctx.createPattern(patternCanvas, "repeat");
             if (pattern) {
                 ctx.fillStyle = pattern;
                 ctx.fillRect(150, 120, 80, 60);
             }
         }
         // Shadow effects for additional GPU differentiation
-        ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
         ctx.shadowBlur = 3.2;
         ctx.shadowOffsetX = 2.1;
         ctx.shadowOffsetY = 2.7;
-        ctx.fillStyle = 'rgba(100, 200, 150, 0.8)';
+        ctx.fillStyle = "rgba(100, 200, 150, 0.8)";
         ctx.fillRect(160, 30, 60, 40);
         // Reset shadow
-        ctx.shadowColor = 'transparent';
+        ctx.shadowColor = "transparent";
         ctx.shadowBlur = 0;
         ctx.shadowOffsetX = 0;
         ctx.shadowOffsetY = 0;
@@ -1437,23 +1445,34 @@
      */
     function drawAdvancedText(ctx) {
         const fonts = [
-            '14px Arial, sans-serif',
+            "14px Arial, sans-serif",
             '13px "Times New Roman", serif',
-            '12px Georgia, serif',
-            '15px Helvetica, Arial, sans-serif',
+            "12px Georgia, serif",
+            "15px Helvetica, Arial, sans-serif",
             '11px "Courier New", monospace',
-            '13px Verdana, sans-serif',
-            '16px Impact, fantasy',
-            '12px "Comic Sans MS", cursive'
+            "13px Verdana, sans-serif",
+            "16px Impact, fantasy",
+            '12px "Comic Sans MS", cursive',
         ];
         const colors = [
-            '#000', '#333', '#666', '#999',
-            'rgba(255, 0, 0, 0.8)', 'rgba(0, 255, 0, 0.7)',
-            'rgba(0, 0, 255, 0.6)', 'rgba(128, 64, 192, 0.9)'
+            "#000",
+            "#333",
+            "#666",
+            "#999",
+            "rgba(255, 0, 0, 0.8)",
+            "rgba(0, 255, 0, 0.7)",
+            "rgba(0, 0, 255, 0.6)",
+            "rgba(128, 64, 192, 0.9)",
         ];
         // Test different text baselines and alignments
-        const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'bottom'];
-        const alignments = ['left', 'center', 'right'];
+        const baselines = [
+            "top",
+            "hanging",
+            "middle",
+            "alphabetic",
+            "bottom",
+        ];
+        const alignments = ["left", "center", "right"];
         let y = 250;
         CANVAS_TEXTS.forEach((text, textIndex) => {
             fonts.forEach((font, fontIndex) => {
@@ -1462,11 +1481,11 @@
                 const alignIndex = fontIndex % alignments.length;
                 ctx.font = font;
                 ctx.fillStyle = colors[colorIndex] || colors[0];
-                ctx.textBaseline = baselines[baselineIndex] || 'top';
-                ctx.textAlign = alignments[alignIndex] || 'left';
+                ctx.textBaseline = baselines[baselineIndex] || "top";
+                ctx.textAlign = alignments[alignIndex] || "left";
                 // Sub-pixel positioning for enhanced differentiation
-                const x = 10 + (fontIndex * 0.7) % 200;
-                const yPos = y + (fontIndex * 18.3) % 100;
+                const x = 10 + ((fontIndex * 0.7) % 200);
+                const yPos = y + ((fontIndex * 18.3) % 100);
                 ctx.fillText(text, x, yPos);
                 // Add stroke text for additional GPU stress testing
                 if (fontIndex % 2 === 0) {
@@ -1482,20 +1501,20 @@
         ctx.translate(100, 400);
         ctx.rotate(Math.PI / 6);
         ctx.scale(1.2, 0.8);
-        ctx.font = 'italic 14px Arial';
-        ctx.fillStyle = 'rgba(200, 100, 50, 0.8)';
-        ctx.fillText('Transformed & Rotated Text', 0, 0);
+        ctx.font = "italic 14px Arial";
+        ctx.fillStyle = "rgba(200, 100, 50, 0.8)";
+        ctx.fillText("Transformed & Rotated Text", 0, 0);
         ctx.restore();
         // Test very small and very large text
-        ctx.font = '6px Arial';
-        ctx.fillStyle = '#000';
-        ctx.fillText('Tiny text rendering test', 10, 500);
-        ctx.font = '32px Arial';
-        ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-        ctx.fillText('Large', 10, 540);
+        ctx.font = "6px Arial";
+        ctx.fillStyle = "#000";
+        ctx.fillText("Tiny text rendering test", 10, 500);
+        ctx.font = "32px Arial";
+        ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
+        ctx.fillText("Large", 10, 540);
         // Reset text properties
-        ctx.textAlign = 'left';
-        ctx.textBaseline = 'top';
+        ctx.textAlign = "left";
+        ctx.textBaseline = "top";
     }
     /**
      * Analyze sub-pixel differences for enhanced GPU/anti-aliasing detection
@@ -1505,9 +1524,9 @@
             // Create test pattern for sub-pixel analysis
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             // Draw shapes at sub-pixel coordinates to stress anti-aliasing
-            ctx.fillStyle = 'rgb(100, 150, 200)';
+            ctx.fillStyle = "rgb(100, 150, 200)";
             ctx.fillRect(10.3, 10.7, 20.1, 20.9);
-            ctx.strokeStyle = 'rgb(200, 100, 50)';
+            ctx.strokeStyle = "rgb(200, 100, 50)";
             ctx.lineWidth = 1.3;
             ctx.beginPath();
             ctx.moveTo(15.2, 35.8);
@@ -1538,7 +1557,7 @@
             return `${avgRed}-${avgGreen}-${avgBlue}-${avgVariance}`;
         }
         catch (error) {
-            return 'subpixel-error';
+            return "subpixel-error";
         }
     }
     /**
@@ -1551,47 +1570,52 @@
             // Test 1: Check if getImageData works consistently
             const imageData = ctx.getImageData(0, 0, 1, 1);
             if (!imageData || imageData.data.length === 0) {
-                reasons.push('getImageData-blocked');
+                reasons.push("getImageData-blocked");
                 suspiciousSignals += 3;
             }
             // Test 2: Check hash lengths (blocked canvas often returns default values)
             if (textHash.length < 8 || geometryHash.length < 8) {
-                reasons.push('short-hash');
+                reasons.push("short-hash");
                 suspiciousSignals += 2;
             }
             // Test 3: Check for known blocked patterns
             const knownBlockedHashes = [
-                'error', 'blocked', 'disabled',
-                '00000000', 'ffffffff', '12345678'
+                "error",
+                "blocked",
+                "disabled",
+                "00000000",
+                "ffffffff",
+                "12345678",
             ];
-            if (knownBlockedHashes.includes(textHash) || knownBlockedHashes.includes(geometryHash)) {
-                reasons.push('known-blocked-hash');
+            if (knownBlockedHashes.includes(textHash) ||
+                knownBlockedHashes.includes(geometryHash)) {
+                reasons.push("known-blocked-hash");
                 suspiciousSignals += 3;
             }
             // Test 4: Sub-pixel analysis indicates blocking
-            if (subPixelData === 'subpixel-error' || subPixelData.includes('0-0-0')) {
-                reasons.push('subpixel-anomaly');
+            if (subPixelData === "subpixel-error" || subPixelData.includes("0-0-0")) {
+                reasons.push("subpixel-anomaly");
                 suspiciousSignals += 2;
             }
             // Test 5: Same hash for different operations (indicates fake canvas)
-            if (textHash === geometryHash && textHash !== 'error') {
-                reasons.push('identical-hashes');
+            if (textHash === geometryHash && textHash !== "error") {
+                reasons.push("identical-hashes");
                 suspiciousSignals += 2;
             }
             // Test 6: toDataURL performance (some privacy tools slow it down)
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
             canvas.width = 10;
             canvas.height = 10;
-            const testCtx = canvas.getContext('2d');
+            const testCtx = canvas.getContext("2d");
             if (testCtx) {
                 const start = performance.now();
-                testCtx.fillStyle = 'red';
+                testCtx.fillStyle = "red";
                 testCtx.fillRect(0, 0, 10, 10);
                 canvas.toDataURL();
                 const duration = performance.now() - start;
                 // Suspiciously slow canvas operations
                 if (duration > 50) {
-                    reasons.push('slow-canvas');
+                    reasons.push("slow-canvas");
                     suspiciousSignals += 1;
                 }
             }
@@ -1603,7 +1627,7 @@
             return {
                 isInconsistent: true,
                 confidence: 1,
-                reasons: ['detection-error']
+                reasons: ["detection-error"],
             };
         }
     }
@@ -1614,29 +1638,30 @@
         const startTime = performance.now();
         try {
             // Create larger canvas for more detailed fingerprinting
-            const canvas = document.createElement('canvas');
+            const canvas = document.createElement("canvas");
             canvas.width = 300;
             canvas.height = 600;
-            const ctx = canvas.getContext('2d', {
+            const ctx = canvas.getContext("2d", {
                 alpha: true,
                 desynchronized: false,
-                colorSpace: 'srgb'
+                colorSpace: "srgb",
+                willReadFrequently: true,
             });
             if (!ctx) {
-                throw new Error('Canvas 2D context not available');
+                throw new Error("Canvas 2D context not available");
             }
             // Test canvas winding (different behavior across browsers/GPUs)
             ctx.rect(0, 0, 10, 10);
             ctx.rect(2, 2, 6, 6);
-            const isClockwise = ctx.isPointInPath(5, 5, 'evenodd');
+            const isClockwise = ctx.isPointInPath(5, 5, "evenodd");
             // ENHANCED: Draw advanced text with multiple fonts and effects
             drawAdvancedText(ctx);
-            const textData = canvas.toDataURL('image/png');
+            const textData = canvas.toDataURL("image/png");
             const textHash = hash32(textData);
             // Clear and draw advanced geometry
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             drawAdvancedGeometry(ctx);
-            const geometryData = canvas.toDataURL('image/png');
+            const geometryData = canvas.toDataURL("image/png");
             const geometryHash = hash32(geometryData);
             // ENHANCED: Analyze sub-pixels for GPU/anti-aliasing differentiation
             const subPixelAnalysis = analyzeSubPixels(ctx, canvas);
@@ -1646,10 +1671,10 @@
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             // Draw both text and geometry together
             drawAdvancedText(ctx);
-            ctx.globalCompositeOperation = 'multiply';
+            ctx.globalCompositeOperation = "multiply";
             drawAdvancedGeometry(ctx);
-            ctx.globalCompositeOperation = 'source-over';
-            const compositeData = canvas.toDataURL('image/png');
+            ctx.globalCompositeOperation = "source-over";
+            const compositeData = canvas.toDataURL("image/png");
             const compositeHash = hash32(compositeData);
             const endTime = performance.now();
             const result = {
@@ -1661,27 +1686,27 @@
                 subPixelAnalysis, // Sub-pixel characteristics for GPU differentiation
                 compositeHash, // Combined text+geometry hash
                 inconsistencyConfidence: inconsistencyAnalysis.confidence,
-                blockingReasons: inconsistencyAnalysis.reasons
+                blockingReasons: inconsistencyAnalysis.reasons,
             };
             return {
                 value: result,
-                duration: endTime - startTime
+                duration: endTime - startTime,
             };
         }
         catch (error) {
             return {
                 value: {
-                    text: 'error',
-                    geometry: 'error',
+                    text: "error",
+                    geometry: "error",
                     winding: false,
                     isInconsistent: true,
-                    subPixelAnalysis: 'error',
-                    compositeHash: 'error',
+                    subPixelAnalysis: "error",
+                    compositeHash: "error",
                     inconsistencyConfidence: 1,
-                    blockingReasons: ['canvas-error']
+                    blockingReasons: ["canvas-error"],
                 },
                 duration: performance.now() - startTime,
-                error: error instanceof Error ? error.message : 'Canvas fingerprinting failed'
+                error: error instanceof Error ? error.message : "Canvas fingerprinting failed",
             };
         }
     }
@@ -1690,9 +1715,9 @@
      */
     function isCanvasAvailable$1() {
         try {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            return ctx !== null && typeof ctx.fillText === 'function';
+            const canvas = document.createElement("canvas");
+            const ctx = canvas.getContext("2d");
+            return ctx !== null && typeof ctx.fillText === "function";
         }
         catch {
             return false;
@@ -3790,7 +3815,7 @@
             const canvas = iframeDoc.createElement("canvas");
             canvas.width = 100;
             canvas.height = 50;
-            const ctx = canvas.getContext("2d");
+            const ctx = canvas.getContext("2d", { willReadFrequently: true });
             if (!ctx)
                 return { quality: 0, antiAliasing: false, smoothing: 0 };
             // Draw text at sub-pixel position to trigger anti-aliasing
@@ -3843,7 +3868,7 @@
             const canvas = iframeDoc.createElement("canvas");
             canvas.width = 100;
             canvas.height = 50;
-            const ctx = canvas.getContext("2d");
+            const ctx = canvas.getContext("2d", { willReadFrequently: true });
             if (!ctx) {
                 return { clearType: false, hintingLevel: 0, subpixelRendering: false };
             }