@thumbmarkjs/thumbmarkjs 0.19.0 → 0.20.0

package/src/components/hardware/hardware.ts

@@ -0,0 +1,69 @@
+import { componentInterface, includeComponent } from '../../factory'
+
+function getHardwareInfo(): Promise<componentInterface> {
+  return new Promise((resolve, reject) => {
+    const deviceMemory = (navigator.deviceMemory !== undefined) ? navigator.deviceMemory : 0
+    const memoryInfo = (window.performance && (window.performance as any).memory ) ? (window.performance as any).memory : 0
+    resolve(
+      {
+        'videocard': getVideoCard(),
+        'architecture': getArchitecture(),
+        'deviceMemory': deviceMemory.toString() || 'undefined',
+        'jsHeapSizeLimit': memoryInfo.jsHeapSizeLimit || 0,
+      }
+    )
+  });
+}
+
+function getVideoCard(): componentInterface | string {
+    const canvas = document.createElement('canvas');
+    const gl = canvas.getContext('webgl') ?? canvas.getContext('experimental-webgl');
+    
+    if (gl && 'getParameter' in gl) {
+        try {
+            // Try standard parameters first
+            const vendor = (gl.getParameter(gl.VENDOR) || '').toString();
+            const renderer = (gl.getParameter(gl.RENDERER) || '').toString();
+            
+            let result: componentInterface = {
+                vendor: vendor,
+                renderer: renderer,
+                version: (gl.getParameter(gl.VERSION) || '').toString(),
+                shadingLanguageVersion: (gl.getParameter(gl.SHADING_LANGUAGE_VERSION) || '').toString(),
+            };
+            
+            // Only try debug info if needed and available
+            if (!renderer.length || !vendor.length) {
+                const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
+                if (debugInfo) {
+                    const vendorUnmasked = (gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || '').toString();
+                    const rendererUnmasked = (gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || '').toString();
+                    
+                    // Only add unmasked values if they exist
+                    if (vendorUnmasked) {
+                        result.vendorUnmasked = vendorUnmasked;
+                    }
+                    if (rendererUnmasked) {
+                        result.rendererUnmasked = rendererUnmasked;
+                    }
+                }
+            }
+            
+            return result;
+        } catch (error) {
+            // fail silently
+        }
+    }
+    return "undefined";
+}
+
+function getArchitecture(): number {
+  const f = new Float32Array(1);
+  const u8 = new Uint8Array(f.buffer);
+  f[0] = Infinity;
+  f[0] = f[0] - f[0];
+
+  return u8[3];
+}
+
+includeComponent('hardware', getHardwareInfo);

package/src/components/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Does anyone have a cleaner way of doing this?
+ * I want to import all the components in this folder
+ * Feels a little dumb I'm doing this manually.
+ */
+
+import './audio/audio'
+import './canvas/canvas'
+import './fonts/fonts'
+import './hardware/hardware'
+import './locales/locales'
+import './permissions/permissions'
+import './plugins/plugins'
+import './screen/screen'
+import './system/system'
+import './webgl/webgl'
+import './math/math'

package/src/components/locales/locales.ts

@@ -0,0 +1,23 @@
+import { componentInterface, includeComponent } from '../../factory'
+
+function getLocales(): Promise<componentInterface> {
+  return new Promise((resolve) => {
+    resolve(
+      {
+        'languages': getUserLanguage(),
+        'timezone': getUserTimezone()
+      });
+    });
+}
+
+function getUserLanguage(): string {
+    const userLanguages: string[] = [];
+
+    return navigator.language;
+  }
+
+  function getUserTimezone(): string {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+
+  includeComponent('locales', getLocales);

package/src/components/math/math.ts

@@ -0,0 +1,39 @@
+import { componentInterface, includeComponent } from '../../factory'
+
+const getMathInfo = async (): Promise<componentInterface> => {
+    return {
+        acos: Math.acos(0.5),
+        asin: integrate(Math.asin, -1, 1, 97),
+        atan: integrate(Math.atan, -1, 1, 97),
+        cos: integrate(Math.cos, 0, Math.PI, 97),
+        cosh: Math.cosh(9/7),
+        e: Math.E,
+        largeCos: Math.cos(1e20),
+        largeSin: Math.sin(1e20),
+        largeTan: Math.tan(1e20),
+        log: Math.log(1000),
+        pi: Math.PI,
+        sin: integrate(Math.sin, -Math.PI, Math.PI, 97),
+        sinh: integrate(Math.sinh, -9/7, 7/9, 97),
+        sqrt: Math.sqrt(2),
+        tan: integrate(Math.tan, 0, 2 * Math.PI, 97),
+        tanh: integrate(Math.tanh, -9/7, 7/9, 97),
+    }
+}
+
+/** This might be a little excessive, but I wasn't sure what number to pick for some of the
+ * trigonometric functions. Using an integral here, so a few numbers are calculated. However,
+ * I do this mainly for those integrals that sum up to a small value, otherwise there's no point.
+*/ 
+
+const integrate = (f: (x: number) => number, a: number, b: number, n: number): number => {
+    const h = (b - a) / n;
+    let sum = 0;
+    for (let i = 0; i < n; i++) {
+        const x = a + (i + 0.5) * h;
+        sum += f(x);
+    }
+    return sum * h;
+};
+
+includeComponent('math', getMathInfo);

package/src/components/permissions/permissions.ts

@@ -0,0 +1,58 @@
+import { componentInterface, includeComponent } from '../../factory';
+import { mostFrequentValuesInArrayOfDictionaries } from '../../utils/getMostFrequent';
+import { options } from '../../fingerprint/options';
+
+let permission_keys: PermissionName[];
+function initializePermissionKeys() {
+    permission_keys = options?.permissions_to_check || [
+        'accelerometer',
+        'accessibility', 'accessibility-events',
+        'ambient-light-sensor',
+        'background-fetch', 'background-sync', 'bluetooth',
+        'camera',
+        'clipboard-read',
+        'clipboard-write',
+        'device-info', 'display-capture',
+        'gyroscope', 'geolocation',
+        'local-fonts',
+        'magnetometer', 'microphone', 'midi',
+        'nfc', 'notifications',
+        'payment-handler',
+        'persistent-storage',
+        'push',
+        'speaker', 'storage-access',
+        'top-level-storage-access',
+        'window-management',
+        'query',
+    ] as PermissionName[];
+}
+
+export default async function getBrowserPermissions(): Promise<componentInterface> {
+    initializePermissionKeys();
+    const permissionPromises: Promise<componentInterface>[] = Array.from({length: options?.retries || 3}, () => getBrowserPermissionsOnce() );
+    return Promise.all(permissionPromises).then((resolvedPermissions) => {
+        const permission = mostFrequentValuesInArrayOfDictionaries(resolvedPermissions, permission_keys);
+        return permission;
+    });
+}
+
+async function getBrowserPermissionsOnce(): Promise<componentInterface> {
+
+    const permissionStatus: { [key: string]: string } = {};
+
+    for (const feature of permission_keys) {
+        try {
+            // Request permission status for each feature
+            const status = await navigator.permissions.query({ name: feature });
+
+            // Assign permission status to the object
+            permissionStatus[feature] = status.state.toString();
+        } catch (error) {
+            // In case of errors (unsupported features, etc.), do nothing. Not listing them is the same as not supported
+        }
+    }
+
+    return permissionStatus;
+}
+
+includeComponent("permissions", getBrowserPermissions);

package/src/components/plugins/plugins.ts

@@ -0,0 +1,22 @@
+import { componentInterface, includeComponent } from '../../factory'
+
+export default function getInstalledPlugins(): Promise<componentInterface> {
+    const plugins: string[] = [];
+  
+    if (navigator.plugins) {
+      for (let i = 0; i < navigator.plugins.length; i++) {
+        const plugin = navigator.plugins[i];
+        plugins.push([plugin.name, plugin.filename, plugin.description ].join("|"));
+      }
+    }
+  
+    return new Promise((resolve) => {
+      resolve(
+        {
+          'plugins': plugins
+        }
+      );
+  });
+  }
+  
+  includeComponent('plugins', getInstalledPlugins);

package/src/components/screen/screen.ts

@@ -0,0 +1,46 @@
+import { componentInterface, includeComponent } from '../../factory';
+
+function screenDetails(): Promise<componentInterface> {
+    return new Promise((resolve) => {
+        resolve(
+            {
+                'is_touchscreen': navigator.maxTouchPoints > 0,
+                'maxTouchPoints': navigator.maxTouchPoints,
+                'colorDepth': screen.colorDepth,
+                'mediaMatches': matchMedias(),
+            }
+        );
+    });
+}
+
+function matchMedias(): string[] {
+    let results: string[] = [];
+
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
+     */
+
+    const mediaQueries: { [k: string]: string[] } = {
+        'prefers-contrast': ['high', 'more', 'low', 'less', 'forced', 'no-preference'],
+        'any-hover': ['hover', 'none'],
+        'any-pointer': ['none', 'coarse', 'fine'],
+        'pointer': ['none', 'coarse', 'fine'],
+        'hover': ['hover', 'none'],
+        'update': ['fast', 'slow'],
+        'inverted-colors': ['inverted', 'none'],
+        'prefers-reduced-motion': ['reduce', 'no-preference'],
+        'prefers-reduced-transparency': ['reduce', 'no-preference'],
+        'scripting': ['none', 'initial-only', 'enabled'],
+        'forced-colors': ['active', 'none'],
+      };
+
+    Object.keys(mediaQueries).forEach((key) => {
+        mediaQueries[key].forEach((value) => {
+            if (matchMedia(`(${key}: ${value})`).matches)
+                results.push(`${key}: ${value}`);
+        })
+    });
+    return results;
+}
+
+includeComponent('screen', screenDetails);

package/src/components/system/browser.ts

@@ -0,0 +1,63 @@
+// Define an interface for the browser result
+interface BrowserResult {
+    name: string;
+    version: string;
+  }
+
+  // Define a function to parse the user agent string and return the browser name and version
+export function getBrowser(): BrowserResult {
+  if (typeof navigator === 'undefined') {
+    return {
+      name: "unknown",
+      version: "unknown"
+    }
+  }
+    const ua = navigator.userAgent
+    // Define some regular expressions to match different browsers and their versions
+    const regexes = [
+      // Edge
+      /(?<name>Edge|Edg)\/(?<version>\d+(?:\.\d+)?)/,
+      // Chrome, Chromium, Opera, Vivaldi, Brave, etc.
+      /(?<name>(?:Chrome|Chromium|OPR|Opera|Vivaldi|Brave))\/(?<version>\d+(?:\.\d+)?)/,
+      // Firefox, Waterfox, etc.
+      /(?<name>(?:Firefox|Waterfox|Iceweasel|IceCat))\/(?<version>\d+(?:\.\d+)?)/,
+      // Safari, Mobile Safari, etc.
+      /(?<name>Safari)\/(?<version>\d+(?:\.\d+)?)/,
+      // Internet Explorer, IE Mobile, etc.
+      /(?<name>MSIE|Trident|IEMobile).+?(?<version>\d+(?:\.\d+)?)/,
+      // Other browsers that use the format "BrowserName/version"
+      /(?<name>[A-Za-z]+)\/(?<version>\d+(?:\.\d+)?)/,
+      // Samsung internet browser
+      /(?<name>SamsungBrowser)\/(?<version>\d+(?:\.\d+)?)/,
+      // Samsung browser (Tizen format)
+      /(?<name>samsung).*Version\/(?<version>\d+(?:\.\d+)?)/i
+    ];
+  
+    // Define a map for browser name translations
+    const browserNameMap: { [key: string]: string } = {
+      'edg': 'Edge',
+      'opr': 'Opera',
+      'samsung': 'SamsungBrowser'
+    };
+
+    // Loop through the regexes and try to find a match
+    for (const regex of regexes) {
+      const match = ua.match(regex);
+      if (match && match.groups) {
+        // Translate the browser name if necessary
+        const name = browserNameMap[match.groups.name.toLowerCase()] || match.groups.name;
+        // Return the browser name and version
+        return {
+          name: name,
+          version: match.groups.version
+        };
+      }
+    }
+  
+    // If no match is found, return unknown
+    return {
+      name: "unknown",
+      version: "unknown"
+    };
+  }
+  

package/src/components/system/system.ts

@@ -0,0 +1,40 @@
+import { componentInterface, includeComponent } from '../../factory';
+import { getBrowser } from './browser'
+
+function getSystemDetails(): Promise<componentInterface> {
+    return new Promise((resolve) => {
+        const browser = getBrowser()
+        resolve( {
+        'platform': window.navigator.platform,
+        'cookieEnabled': window.navigator.cookieEnabled,
+        'productSub': navigator.productSub,
+        'product': navigator.product,
+        'useragent': navigator.userAgent,
+        'hardwareConcurrency': navigator.hardwareConcurrency,
+        'browser': {'name': browser.name, 'version': browser.version },
+        'applePayVersion': getApplePayVersion()
+    });
+});
+}
+
+/**
+ * @returns applePayCanMakePayments: boolean, applePayMaxSupportedVersion: number
+ */
+function getApplePayVersion(): number {
+    if (window.location.protocol === 'https:' && typeof (window as any).ApplePaySession === 'function') {
+        try {
+            const versionCheck = (window as any).ApplePaySession.supportsVersion;
+            for (let i = 15; i > 0; i--) {
+                if (versionCheck(i)) {
+                    return i;
+                }
+            }
+        } catch (error) {
+            return 0
+        }
+    }
+    return 0
+}
+
+includeComponent('system', getSystemDetails);
+

package/src/components/webgl/webgl.ts

@@ -0,0 +1,148 @@
+import { componentInterface, includeComponent } from '../../factory'
+import { hash } from '../../utils/hash'
+import { getCommonPixels } from '../../utils/commonPixels';
+import { getBrowser } from '../system/browser';
+
+const _RUNS = (getBrowser().name !== 'SamsungBrowser') ? 1 : 3;
+let canvas: HTMLCanvasElement
+let gl: WebGLRenderingContext | null = null;
+
+function initializeCanvasAndWebGL() {
+  if (typeof document !== 'undefined') {
+    canvas = document.createElement('canvas');
+    canvas.width = 200;
+    canvas.height = 100;
+    gl = canvas.getContext('webgl');
+  }
+}
+
+async function createWebGLFingerprint(): Promise<componentInterface> {
+  initializeCanvasAndWebGL();
+  
+  try {
+
+    if (!gl) {
+        throw new Error('WebGL not supported');
+    }
+
+
+    const imageDatas: ImageData[] = Array.from({length: _RUNS}, () => createWebGLImageData() );
+    // and then checking the most common bytes for each channel of each pixel
+    const commonImageData = getCommonPixels(imageDatas, canvas.width, canvas.height);
+    //const imageData = createWebGLImageData()
+
+    return {
+      'commonImageHash': hash(commonImageData.data.toString()).toString(),
+    }
+  } catch (error) {
+    return {
+      'webgl': 'unsupported'
+    }
+  }
+}
+
+function createWebGLImageData(): ImageData {
+  try {
+
+      if (!gl) {
+          throw new Error('WebGL not supported');
+      }
+
+      const vertexShaderSource = `
+          attribute vec2 position;
+          void main() {
+              gl_Position = vec4(position, 0.0, 1.0);
+          }
+      `;
+
+      const fragmentShaderSource = `
+          precision mediump float;
+          void main() {
+              gl_FragColor = vec4(0.812, 0.195, 0.553, 0.921); // Set line color
+          }
+      `;
+
+      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+
+      if (!vertexShader || !fragmentShader) {
+          throw new Error('Failed to create shaders');
+      }
+
+      gl.shaderSource(vertexShader, vertexShaderSource);
+      gl.shaderSource(fragmentShader, fragmentShaderSource);
+
+      gl.compileShader(vertexShader);
+      if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+          throw new Error('Vertex shader compilation failed: ' + gl.getShaderInfoLog(vertexShader));
+      }
+
+      gl.compileShader(fragmentShader);
+      if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+          throw new Error('Fragment shader compilation failed: ' + gl.getShaderInfoLog(fragmentShader));
+      }
+
+      const shaderProgram = gl.createProgram();
+
+      if (!shaderProgram) {
+          throw new Error('Failed to create shader program');
+      }
+
+      gl.attachShader(shaderProgram, vertexShader);
+      gl.attachShader(shaderProgram, fragmentShader);
+      gl.linkProgram(shaderProgram);
+      if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+          throw new Error('Shader program linking failed: ' + gl.getProgramInfoLog(shaderProgram));
+      }
+
+      gl.useProgram(shaderProgram);
+
+      // Set up vertices to form lines
+      const numSpokes: number = 137;
+      const vertices = new Float32Array(numSpokes * 4);
+      const angleIncrement = (2 * Math.PI) / numSpokes;
+
+      for (let i = 0; i < numSpokes; i++) {
+          const angle = i * angleIncrement;
+
+          // Define two points for each line (spoke)
+          vertices[i * 4] = 0; // Center X
+          vertices[i * 4 + 1] = 0; // Center Y
+          vertices[i * 4 + 2] = Math.cos(angle) * (canvas.width / 2); // Endpoint X
+          vertices[i * 4 + 3] = Math.sin(angle) * (canvas.height / 2); // Endpoint Y
+      }
+
+      const vertexBuffer = gl.createBuffer();
+      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
+
+      const positionAttribute = gl.getAttribLocation(shaderProgram, 'position');
+      gl.enableVertexAttribArray(positionAttribute);
+      gl.vertexAttribPointer(positionAttribute, 2, gl.FLOAT, false, 0, 0);
+
+      // Render
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      gl.clearColor(0.0, 0.0, 0.0, 1.0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.drawArrays(gl.LINES, 0, numSpokes * 2);
+
+      const pixelData = new Uint8ClampedArray(canvas.width * canvas.height * 4);
+      gl.readPixels(0, 0, canvas.width, canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, pixelData);
+      const imageData = new ImageData(pixelData, canvas.width, canvas.height);
+
+      return imageData;
+  } catch (error) {
+      //console.error(error);
+      return new ImageData(1, 1);
+  } finally {
+    if (gl) {
+      // Reset WebGL state
+      gl.bindBuffer(gl.ARRAY_BUFFER, null);
+      gl.useProgram(null);
+      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+      gl.clearColor(0.0, 0.0, 0.0, 0.0);
+    }
+  }
+}
+
+  includeComponent('webgl', createWebGLFingerprint);

package/src/declarations.d.ts

@@ -0,0 +1,15 @@
+interface ApplePaySession {
+  new(version: number, paymentRequest: any): ApplePaySession;
+  canMakePayments(): boolean;
+  supportsVersion(version: number): boolean;
+}
+
+interface Window {
+    webkitAudioContext: typeof AudioContext
+    webkitOfflineAudioContext: typeof OfflineAudioContext
+    ApplePaySession: typeof ApplePaySession
+  }
+
+interface Navigator {
+  deviceMemory?: number,
+}

package/src/factory.ts

@@ -0,0 +1,58 @@
+/**
+ * This file is used to create the includeComponent function as well as the interfaces each of the
+ * fingerprint components must implement.
+ * 
+ */
+
+import { options, optionsInterface } from './fingerprint/options';
+
+// 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;
+}
+
+
+// The component function's interface is simply the promise of the above
+export interface componentFunctionInterface {
+    (): Promise<componentInterface>;
+}
+
+// components include a dictionary of name: function.
+ export const components: {[name: string]: componentFunctionInterface} = {};
+
+//In case a promise time-outs, this is what we use as the value in place
+export const timeoutInstance: componentInterface = {
+    'timeout': "true"
+}
+
+/** 
+ * includeComponent is the function each component function needs to call in order for the component to be included
+ * in the fingerprint.
+ * @param {string} name - the name identifier of the component
+ * @param {componentFunctionInterface} creationFunction - the function that implements the component
+ * @returns 
+ */ 
+export const includeComponent = (name:string, creationFunction: componentFunctionInterface) => {
+    if (typeof window !== 'undefined')
+        components[name] = creationFunction;
+}
+
+/**
+ * The function turns the map of component functions to a map of Promises when called
+ * @returns {[name: string]: <Promise>componentInterface} 
+ */
+export const getComponentPromises = () => {
+    return Object.fromEntries(
+        Object.entries(components)
+            .filter(([key]) => {
+                return !options?.exclude?.includes(key)}
+                )
+            .filter(([key]) => {
+                return options?.include?.some(e => e.includes('.'))
+                    ? options?.include?.some(e => e.startsWith(key))
+                    : options?.include?.length === 0 || options?.include?.includes(key)
+            }
+                    )
+            .map(([key, value]) => [key, value()])
+    );
+}

package/src/fingerprint/functions.test.ts

@@ -0,0 +1,34 @@
+import {componentInterface} from '../factory'
+import {filterFingerprintData} from './functions'
+
+const test_components: componentInterface = {
+    'one': '1',
+    'two': 2,
+    'three': {'a': true, 'b': false}
+}
+
+describe('component filtering tests', () => {
+    test("excluding top level works", () => {
+        expect(filterFingerprintData(test_components, ['one'], [])).toMatchObject({
+            'two': 2, 'three': {'a': true, 'b': false}
+        })
+    });
+    test("including top level works", () => {
+        expect(filterFingerprintData(test_components, [], ['one', 'two'])).toMatchObject({
+            'one': '1', 'two': 2
+        })
+    });
+    test("excluding low-level works", () => {
+        expect(filterFingerprintData(test_components, ['two', 'three.a'], [])).toMatchObject({
+            'one': '1',
+            'three': {'b': false}
+        })
+    });
+    test("including low-level works", () => {
+        expect(filterFingerprintData(test_components, [], ['one', 'three.b'])).toMatchObject({
+            'one': '1',
+            'three': {'b': false}
+        })
+    });
+
+});