@thumbmarkjs/thumbmarkjs 1.2.0 → 1.3.1

package/dist/types/functions/index.d.ts

@@ -4,47 +4,9 @@
  * This module handles component collection, API calls, uniqueness scoring, and data filtering
  * for the ThumbmarkJS browser fingerprinting library.
  *
- * Exports:
- *   - getThumbmark
- *   - getThumbmarkDataFromPromiseMap
- *   - resolveClientComponents
- *   - filterThumbmarkData
- *
- * Internal helpers and types are also defined here.
  */
 import { optionsInterface } from "../options";
 import { componentInterface, includeComponent as globalIncludeComponent } from "../factory";
-/**
- * Info returned from the API (IP, classification, uniqueness, etc)
- */
-interface infoInterface {
-    ip_address?: {
-        ip_address: string;
-        ip_identifier: string;
-        autonomous_system_number: number;
-        ip_version: 'v6' | 'v4';
-    };
-    classification?: {
-        tor: boolean;
-        vpn: boolean;
-        bot: boolean;
-        datacenter: boolean;
-        danger_level: number;
-    };
-    uniqueness?: {
-        score: number | string;
-    };
-    timed_out?: boolean;
-}
-/**
- * API response structure
- */
-interface apiResponse {
-    info?: infoInterface;
-    version?: string;
-    components?: componentInterface;
-    visitorId?: string;
-}
 /**
  * Final thumbmark response structure
  */
@@ -56,16 +18,10 @@ interface thumbmarkResponse {
     version: string;
     thumbmark: string;
     visitorId?: string;
-    /**
-     * Only present if options.performance is true.
-     */
     elapsed?: any;
+    error?: string;
+    experimental?: componentInterface;
 }
-/**
- * Calls the Thumbmark API with the given components, using caching and deduplication.
- * Returns a promise for the API response or null on error.
- */
-export declare const getApiPromise: (options: optionsInterface, components: componentInterface) => Promise<apiResponse | null>;
 /**
  * Main entry point: collects all components, optionally calls API, and returns thumbmark data.
  *

package/dist/types/options.d.ts

@@ -8,6 +8,7 @@ export interface optionsInterface {
     cache_api_call?: boolean;
     performance?: boolean;
     stabilize?: string[];
+    experimental?: boolean;
 }
 export declare const API_ENDPOINT = "https://api.thumbmarkjs.com";
 export declare const defaultOptions: optionsInterface;
@@ -21,6 +22,7 @@ export declare let options: {
     cache_api_call?: boolean | undefined;
     performance?: boolean | undefined;
     stabilize?: string[] | undefined;
+    experimental?: boolean | undefined;
 };
 /**
  *

package/dist/types/utils/log.d.ts

@@ -5,4 +5,4 @@ import { optionsInterface } from '../options';
  * You can disable this by setting options.logging to false.
  * @internal
  */
-export declare function logThumbmarkData(thisHash: string, thumbmarkData: componentInterface, options: optionsInterface): Promise<void>;
+export declare function logThumbmarkData(thisHash: string, thumbmarkData: componentInterface, options: optionsInterface, experimentalData?: componentInterface): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thumbmarkjs/thumbmarkjs",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "",
   "type": "module",
   "main": "./dist/thumbmark.cjs.js",

package/src/components/mathml/index.ts

@@ -0,0 +1,149 @@
+import { componentInterface } from '../../factory';
+import { hash } from '../../utils/hash';
+
+const BLACKBOARD_BOLD = ['\uD835\uDD04', '\uD835\uDD05', '\u212D', '\uD835\uDD07', '\uD835\uDD08', '\uD835\uDD09', '\uD835\uDD38', '\uD835\uDD39', '\u2102', '\uD835\uDD3B', '\uD835\uDD3C', '\uD835\uDD3D'];
+const GREEK_SYMBOLS = ['\u03B2', '\u03C8', '\u03BB', '\u03B5', '\u03B6', '\u03B1', '\u03BE', '\u03BC', '\u03C1', '\u03C6', '\u03BA', '\u03C4', '\u03B7', '\u03C3', '\u03B9', '\u03C9', '\u03B3', '\u03BD', '\u03C7', '\u03B4', '\u03B8', '\u03C0', '\u03C5', '\u03BF'];
+
+export default async function getMathML(): Promise<componentInterface | null> {
+  return new Promise((resolve) => {
+    try {
+      if (!isMathMLSupported()) {
+        resolve({
+          supported: false,
+          error: 'MathML not supported'
+        });
+        return;
+      }
+
+      const structures = [
+        createMathML('integral', '<msubsup><mo>\u222B</mo><mi>a</mi><mi>b</mi></msubsup><mfrac><mrow><mi>f</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow><mrow><mi>g</mi><mo>(</mo><mi>x</mi><mo>)</mo></mrow></mfrac><mi>dx</mi>'),
+        createMathML('fraction', '<mfrac><mrow><mi>\u03C0</mi><mo>\u00D7</mo><msup><mi>r</mi><mn>2</mn></msup></mrow><mrow><mn>2</mn><mi>\u03C3</mi></mrow></mfrac>'),
+        createMathML('matrix', '<mo>[</mo><mtable><mtr><mtd><mi>\u03B1</mi></mtd><mtd><mi>\u03B2</mi></mtd></mtr><mtr><mtd><mi>\u03B3</mi></mtd><mtd><mi>\u03B4</mi></mtd></mtr></mtable><mo>]</mo>'),
+        createComplexNestedStructure(),
+        ...createSymbolStructures()
+      ];
+
+      const measurements: any = {};
+      structures.forEach((struct, i) => {
+        measurements[`struct_${i}`] = measureMathMLStructure(struct);
+      });
+
+      resolve({
+        //supported: true,
+        //measurements,
+        hash: hash(JSON.stringify(measurements))
+      });
+
+    } catch (error) {
+      resolve({
+        supported: false,
+        error: `MathML error: ${(error as Error).message}`
+      });
+    }
+  });
+}
+
+function isMathMLSupported(): boolean {
+  try {
+    const testElement = document.createElement('math');
+    testElement.innerHTML = '<mrow><mi>x</mi></mrow>';
+    testElement.style.position = 'absolute';
+    testElement.style.visibility = 'hidden';
+    
+    document.body.appendChild(testElement);
+    const rect = testElement.getBoundingClientRect();
+    document.body.removeChild(testElement);
+    
+    return rect.width > 0 && rect.height > 0;
+  } catch {
+    return false;
+  }
+}
+
+function createMathML(name: string, content: string): string {
+  return `<math><mrow>${content}</mrow></math>`;
+}
+
+function createComplexNestedStructure(): string {
+  let nestedContent = '<mo>\u220F</mo>'; // Product symbol (∏)
+  
+  // Add all symbol combinations inside the main structure
+  BLACKBOARD_BOLD.forEach((bbSymbol, bbIndex) => {
+    const startIdx = bbIndex * 2;
+    const greekSet = GREEK_SYMBOLS.slice(startIdx, startIdx + 2);
+
+    if (greekSet.length === 2) {
+      nestedContent += `<mmultiscripts><mi>${bbSymbol}</mi><none/><mi>${greekSet[1]}</mi><mprescripts></mprescripts><mi>${greekSet[0]}</mi><none/></mmultiscripts>`;
+    }
+  });
+  
+  return createMathML('complex_nested',
+    `<munderover><mmultiscripts>${nestedContent}</mmultiscripts></munderover>`
+  );
+}
+
+function createSymbolStructures(): string[] {
+  const structures: string[] = [];
+  
+  // Use blackboard bold as base symbols with Greek symbols as subscripts/superscripts
+  BLACKBOARD_BOLD.forEach((bbSymbol, bbIndex) => {
+    // Get 2 Greek symbols for this blackboard bold symbol (lower left, top right)
+    const startIdx = bbIndex * 2;
+    const greekSet = GREEK_SYMBOLS.slice(startIdx, startIdx + 2);
+
+    if (greekSet.length === 2) {
+      structures.push(createMathML('combined',
+        `<mmultiscripts><mi>${bbSymbol}</mi><none/><mi>${greekSet[1]}</mi><mprescripts></mprescripts><mi>${greekSet[0]}</mi><none/></mmultiscripts>`
+      ));
+    }
+  });
+  
+  return structures;
+}
+
+function measureMathMLStructure(mathml: string): any {
+  try {
+    const mathElement = document.createElement('math');
+    mathElement.innerHTML = mathml.replace(/<\/?math>/g, '');
+    mathElement.style.whiteSpace = 'nowrap';
+    mathElement.style.position = 'absolute';
+    mathElement.style.visibility = 'hidden';
+    mathElement.style.top = '-9999px';
+    
+    document.body.appendChild(mathElement);
+    
+    const rect = mathElement.getBoundingClientRect();
+    const computedStyle = window.getComputedStyle(mathElement);
+    
+    const measurements = {
+      dimensions: {
+        width: rect.width,
+        height: rect.height,
+        
+      },
+      fontInfo: {
+        fontFamily: computedStyle.fontFamily,
+        fontSize: computedStyle.fontSize,
+        fontWeight: computedStyle.fontWeight,
+        fontStyle: computedStyle.fontStyle,
+        lineHeight: computedStyle.lineHeight,
+        // Enhanced font properties for better system detection
+        fontVariant: computedStyle.fontVariant || 'normal',
+        fontStretch: computedStyle.fontStretch || 'normal', 
+        fontSizeAdjust: computedStyle.fontSizeAdjust || 'none',
+        textRendering: computedStyle.textRendering || 'auto',
+        fontFeatureSettings: computedStyle.fontFeatureSettings || 'normal',
+        fontVariantNumeric: computedStyle.fontVariantNumeric || 'normal',
+        fontKerning: computedStyle.fontKerning || 'auto'
+      }
+    };
+    
+    document.body.removeChild(mathElement);
+    return measurements;
+    
+  } catch (error) {
+    return {
+      error: (error as Error).message
+    };
+  }
+}

package/src/components/webrtc/index.ts

@@ -0,0 +1,126 @@
+import { componentInterface } from '../../factory';
+import { hash } from '../../utils/hash';
+
+export default async function getWebRTC(): Promise<componentInterface | null> {
+  return new Promise((resolve) => {
+    try {
+      // Check if WebRTC is supported
+      const RTCPeerConnection = (window as any).RTCPeerConnection || (window as any).webkitRTCPeerConnection || (window as any).mozRTCPeerConnection;
+      if (!RTCPeerConnection) {
+        resolve({
+          supported: false,
+          error: 'WebRTC not supported'
+        });
+        return;
+      }
+
+      const config = {
+        iceCandidatePoolSize: 1,
+        iceServers: []
+      };
+
+      const connection = new RTCPeerConnection(config);
+      connection.createDataChannel(''); // trigger ICE gathering
+
+      const processOffer = async () => {
+        try {
+          const offerOptions = { offerToReceiveAudio: true, offerToReceiveVideo: true };
+          const offer = await connection.createOffer(offerOptions);
+          await connection.setLocalDescription(offer);
+
+          const sdp = offer.sdp || '';
+          
+          // Extract RTP extensions
+          const extensions = [...new Set((sdp.match(/extmap:\d+ [^\n\r]+/g) || []).map((x: string) => x.replace(/extmap:\d+ /, '')))].sort();
+
+          // Extract codec information
+          const getDescriptors = (mediaType: string) => {
+            const match = sdp.match(new RegExp(`m=${mediaType} [^\\s]+ [^\\s]+ ([^\\n\\r]+)`));
+            return match ? match[1].split(' ') : [];
+          };
+
+          const constructDescriptions = (mediaType: string, descriptors: string[]) => {
+            return descriptors.map(descriptor => {
+              const matcher = new RegExp(`(rtpmap|fmtp|rtcp-fb):${descriptor} (.+)`, 'g');
+              const matches = [...sdp.matchAll(matcher)];
+              if (!matches.length) return null;
+
+              const description: any = {};
+              matches.forEach(match => {
+                const [_, type, data] = match;
+                const parts = data.split('/');
+                if (type === 'rtpmap') {
+                  description.mimeType = `${mediaType}/${parts[0]}`;
+                  description.clockRate = +parts[1];
+                  if (mediaType === 'audio') description.channels = +parts[2] || 1;
+                } else if (type === 'rtcp-fb') {
+                  description.feedbackSupport = description.feedbackSupport || [];
+                  description.feedbackSupport.push(data);
+                } else if (type === 'fmtp') {
+                  description.sdpFmtpLine = data;
+                }
+              });
+              return description;
+            }).filter(Boolean);
+          };
+
+          const codecsSdp = {
+            audio: constructDescriptions('audio', getDescriptors('audio')),
+            video: constructDescriptions('video', getDescriptors('video'))
+          };
+
+          // Set up for ICE candidate collection with timeout
+          const result = await new Promise<componentInterface>((resolveResult) => {
+            const timeout = setTimeout(() => {
+              connection.removeEventListener('icecandidate', onIceCandidate);
+              connection.close();
+              resolveResult({ 
+                supported: true,
+                codecsSdp, 
+                extensions: extensions as string[],
+                timeout: true
+              });
+            }, 3000);
+
+            const onIceCandidate = (event: RTCPeerConnectionIceEvent) => {
+              const candidateObj = event.candidate;
+              if (!candidateObj || !candidateObj.candidate) return;
+
+              clearTimeout(timeout);
+              connection.removeEventListener('icecandidate', onIceCandidate);
+              connection.close();
+
+              resolveResult({ 
+                supported: true,
+                codecsSdp, 
+                extensions: extensions as string[],
+                candidateType: candidateObj.type || ''
+              });
+            };
+
+            connection.addEventListener('icecandidate', onIceCandidate);
+          });
+
+          resolve({
+            hash: hash(JSON.stringify(result)),
+          });
+
+        } catch (error) {
+          connection.close();
+          resolve({
+            supported: true,
+            error: `WebRTC offer failed: ${(error as Error).message}`
+          });
+        }
+      };
+
+      processOffer();
+
+    } catch (error) {
+      resolve({
+        supported: false,
+        error: `WebRTC error: ${(error as Error).message}`
+      });
+    }
+  });
+}

package/src/factory.ts

@@ -20,6 +20,10 @@ import getScreen from "./components/screen";
 import getSystem from "./components/system";
 import getWebGL from "./components/webgl";
 
+// Import experimental component functions
+import getWebRTC from "./components/webrtc";
+import getMathML from "./components/mathml";
+
 /**
  * @description key->function map of built-in components. Do not call the function here.
  */
@@ -37,6 +41,14 @@ export const tm_component_promises = {
     'webgl': getWebGL
 };
 
+/**
+ * @description key->function map of experimental components. Only resolved during logging.
+ */
+export const tm_experimental_component_promises = {
+    'webrtc': getWebRTC,
+    'mathml': getMathML
+};
+
 // the component interface is the form of the JSON object the function's promise must return
 export interface componentInterface {
     [key: string]: string | string[] | number | boolean | componentInterface;

package/src/functions/api.ts

@@ -0,0 +1,130 @@
+import { optionsInterface, API_ENDPOINT } from '../options';
+import { componentInterface } from '../factory';
+import { getVisitorId, setVisitorId } from '../utils/visitorId';
+import { getVersion } from "../utils/version";
+import { hash } from '../utils/hash';
+
+// ===================== Types & Interfaces =====================
+
+/**
+ * Info returned from the API (IP, classification, uniqueness, etc)
+ */
+export interface infoInterface {
+    ip_address?: {
+        ip_address: string,
+        ip_identifier: string,
+        autonomous_system_number: number,
+        ip_version: 'v6' | 'v4',
+    },
+    classification?: {
+        tor: boolean,
+        vpn: boolean,
+        bot: boolean,
+        datacenter: boolean,
+        danger_level: number, // 5 is highest and should be blocked. 0 is no danger.
+    },
+    uniqueness?: {
+        score: number | string
+    },
+    timed_out?: boolean; // added for timeout handling
+}
+
+/**
+ * API response structure
+ */
+interface apiResponse {
+    info?: infoInterface;
+    version?: string;
+    components?: componentInterface;
+    visitorId?: string;
+}
+
+// ===================== API Call Logic =====================
+
+let currentApiPromise: Promise<apiResponse> | null = null;
+let apiPromiseResult: apiResponse | null = null;
+
+/**
+ * Calls the Thumbmark API with the given components, using caching and deduplication.
+ * Returns a promise for the API response or null on error.
+ */
+export const getApiPromise = (
+    options: optionsInterface,
+    components: componentInterface
+): Promise<apiResponse | null> => {
+    // 1. If a result is already cached and caching is enabled, return it.
+    if (options.cache_api_call && apiPromiseResult) {
+        return Promise.resolve(apiPromiseResult);
+    }
+
+    // 2. If a request is already in flight, return that promise to prevent duplicate calls.
+    if (currentApiPromise) {
+        return currentApiPromise;
+    }
+
+    // 3. Otherwise, initiate a new API call with timeout.
+    const endpoint = `${API_ENDPOINT}/thumbmark`;
+    const visitorId = getVisitorId();
+    const requestBody: any = { 
+        components, 
+        options, 
+        clientHash: hash(JSON.stringify(components)), 
+        version: getVersion()
+    };
+    if (visitorId) {
+        requestBody.visitorId = visitorId;
+    }
+    
+    const fetchPromise = fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'x-api-key': options.api_key!,
+            'Authorization': 'custom-authorized',
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(requestBody),
+    })
+        .then(response => {
+            // Handle HTTP errors that aren't network errors
+            if (!response.ok) {
+                if (response.status === 403) {
+                    throw new Error('INVALID_API_KEY');
+                }
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            return response.json();
+        })
+        .then(data => {
+            // Handle visitor ID from server response
+            if (data.visitorId && data.visitorId !== visitorId) {
+                setVisitorId(data.visitorId);
+            }
+            apiPromiseResult = data;      // Cache the successful result
+            currentApiPromise = null;     // Clear the in-flight promise
+            return data;
+        })
+        .catch(error => {
+            console.error('Error fetching pro data', error);
+            currentApiPromise = null;     // Also clear the in-flight promise on error
+            // For 403 errors, propagate the error instead of returning null
+            if (error.message === 'INVALID_API_KEY') {
+                throw error;
+            }
+            // Return null instead of a string to prevent downstream crashes
+            return null;
+        });
+
+    // Timeout logic
+    const timeoutMs = options.timeout || 5000;
+    const timeoutPromise = new Promise<apiResponse>((resolve) => {
+        setTimeout(() => {
+            resolve({
+                info: { timed_out: true },
+                version: getVersion(),
+            });
+        }, timeoutMs);
+    });
+
+    currentApiPromise = Promise.race([fetchPromise, timeoutPromise]);
+    return currentApiPromise;
+};

package/src/functions/filterComponents.ts

@@ -47,7 +47,6 @@ export function filterThumbmarkData(
         if (!rules) continue;
 
         for (const rule of rules) {
-            // FIX: Use the 'in' operator as a type guard to check if 'browsers' exists.
             // A rule applies to all browsers if the 'browsers' key is not present.
             const appliesToAllBrowsers = !('browsers' in rule);