@zaplier/sdk 1.0.3 → 1.0.5

package/dist/index.esm.js

@@ -173,8 +173,10 @@ function hash32(input) {
  * 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);
 }
@@ -1027,7 +1029,13 @@ function supportsWebGL() {
         // 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;
@@ -1341,11 +1349,11 @@ function isBrowserFingerprintingAvailable() {
  * 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
@@ -1353,19 +1361,19 @@ const CANVAS_TEXTS = [
 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();
@@ -1373,21 +1381,21 @@ function drawAdvancedGeometry(ctx) {
     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++) {
@@ -1399,29 +1407,29 @@ function drawAdvancedGeometry(ctx) {
     // 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;
@@ -1431,23 +1439,34 @@ function drawAdvancedGeometry(ctx) {
  */
 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) => {
@@ -1456,11 +1475,11 @@ function drawAdvancedText(ctx) {
             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) {
@@ -1476,20 +1495,20 @@ function drawAdvancedText(ctx) {
     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
@@ -1499,9 +1518,9 @@ function analyzeSubPixels(ctx, canvas) {
         // 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);
@@ -1532,7 +1551,7 @@ function analyzeSubPixels(ctx, canvas) {
         return `${avgRed}-${avgGreen}-${avgBlue}-${avgVariance}`;
     }
     catch (error) {
-        return 'subpixel-error';
+        return "subpixel-error";
     }
 }
 /**
@@ -1545,47 +1564,52 @@ function detectAdvancedInconsistencies(textHash, geometryHash, subPixelData, ctx
         // 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;
             }
         }
@@ -1597,7 +1621,7 @@ function detectAdvancedInconsistencies(textHash, geometryHash, subPixelData, ctx
         return {
             isInconsistent: true,
             confidence: 1,
-            reasons: ['detection-error']
+            reasons: ["detection-error"],
         };
     }
 }
@@ -1608,29 +1632,30 @@ async function getCanvasFingerprint() {
     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);
@@ -1640,10 +1665,10 @@ async function getCanvasFingerprint() {
         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 = {
@@ -1655,27 +1680,27 @@ async function getCanvasFingerprint() {
             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",
         };
     }
 }
@@ -1684,9 +1709,9 @@ async function getCanvasFingerprint() {
  */
 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;
@@ -3784,7 +3809,7 @@ function analyzeRenderingQuality(iframeDoc, container, fontFamily = "Arial") {
         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
@@ -3837,7 +3862,7 @@ function detectSystemFontHints(iframeDoc, container) {
         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 };
         }