@thumbmarkjs/thumbmarkjs 1.2.0 → 1.3.0

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);
 

package/src/functions/index.ts

@@ -4,22 +4,15 @@
  * 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.
  */
 
-// ===================== Imports =====================
 import { defaultOptions, optionsInterface } from "../options";
 import { 
     timeoutInstance,
     componentInterface,
     tm_component_promises,
     customComponents,
+    tm_experimental_component_promises,
     includeComponent as globalIncludeComponent
 } from "../factory";
 import { hash } from "../utils/hash";
@@ -27,43 +20,8 @@ import { raceAllPerformance } from "../utils/raceAll";
 import { getVersion } from "../utils/version";
 import { filterThumbmarkData } from './filterComponents'
 import { logThumbmarkData } from '../utils/log';
-import { API_ENDPOINT } from "../options";
-import { getVisitorId, setVisitorId } from "../utils/visitorId";
-
-// ===================== Types & Interfaces =====================
-
-/**
- * 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, // 5 is highest and should be blocked. 0 is no danger.
-    },
-    uniqueness?: {
-        score: number | string
-    },
-    timed_out?: boolean; // added for timeout handling
-}
+import { getApiPromise, infoInterface } from "./api";
 
-/**
- * API response structure
- */
-interface apiResponse {
-    info?: infoInterface;
-    version?: string;
-    components?: componentInterface;
-    visitorId?: string;
-}
 
 /**
  * Final thumbmark response structure
@@ -74,101 +32,11 @@ interface thumbmarkResponse {
     version: string,
     thumbmark: string,
     visitorId?: string,
-    /**
-     * Only present if options.performance is true.
-     */
     elapsed?: any;
+    error?: string;
+    experimental?: componentInterface;
 }
 
-
-
-// ===================== 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) {
-                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
-            // 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;
-};
-
-// ===================== Main Thumbmark Logic =====================
-
-
-
 /**
  * Main entry point: collects all components, optionally calls API, and returns thumbmark data.
  *
@@ -177,12 +45,41 @@ export const getApiPromise = (
  */
 export async function getThumbmark(options?: optionsInterface): Promise<thumbmarkResponse> {
     const _options = { ...defaultOptions, ...options };
+       
+    // Early logging decision
+    const shouldLog = (!sessionStorage.getItem("_tmjs_l") && Math.random() < 0.0001);
+    
     // Merge built-in and user-registered components
     const allComponents = { ...tm_component_promises, ...customComponents };
     const { elapsed, resolvedComponents: clientComponentsResult } = await resolveClientComponents(allComponents, _options);
 
+    // Resolve experimental components only when logging
+    let experimentalComponents = {};
+    if (shouldLog || _options.experimental) {
+        const { resolvedComponents } = await resolveClientComponents(tm_experimental_component_promises, _options);
+        experimentalComponents = resolvedComponents;
+    }
+
     const apiPromise = _options.api_key ? getApiPromise(_options, clientComponentsResult) : null;
-    const apiResult = apiPromise ? await apiPromise : null;
+    let apiResult = null;
+    
+    if (apiPromise) {
+        try {
+            apiResult = await apiPromise;
+        } catch (error) {
+            // Handle API key/quota errors
+            if (error instanceof Error && error.message === 'INVALID_API_KEY') {
+                return {
+                    error: 'Invalid API key or quota exceeded',
+                    components: {},
+                    info: {},
+                    version: getVersion(),
+                    thumbmark: ''
+                };
+            }
+            throw error; // Re-throw other errors
+        }
+    }
 
     // Only add 'elapsed' if performance is true
     const maybeElapsed = _options.performance ? { elapsed } : {};
@@ -191,7 +88,10 @@ export async function getThumbmark(options?: optionsInterface): Promise<thumbmar
     const info: infoInterface = apiResult?.info || { uniqueness: { score: 'api only' } };
     const thumbmark = hash(JSON.stringify(components));
     const version = getVersion();
-    logThumbmarkData(thumbmark, components, _options).catch(() => { /* do nothing */ });
+    // Only log to server when not in debug mode
+    if (shouldLog) {
+        logThumbmarkData(thumbmark, components, _options, experimentalComponents).catch(() => { /* do nothing */ });
+    }
     
     const result: thumbmarkResponse = {
         ...(apiResult?.visitorId && { visitorId: apiResult.visitorId }),
@@ -200,6 +100,7 @@ export async function getThumbmark(options?: optionsInterface): Promise<thumbmar
         info,
         version,
         ...maybeElapsed,
+        ...(Object.keys(experimentalComponents).length > 0 && _options.experimental && { experimental: experimentalComponents }),
     };
     
     return result;
@@ -244,6 +145,4 @@ export async function resolveClientComponents(
   return { elapsed, resolvedComponents };
 }
 
-
-
 export { globalIncludeComponent as includeComponent };