@ginger-ai/ginger-js 0.0.1

package/src/device/components/system/emoji.ts

@@ -0,0 +1,134 @@
+import { componentInterface, includeComponent } from '../../factory';
+import { hash } from '../../utils/hash';
+
+/**
+ * Set of emojis to sample for fingerprinting
+ * These emojis are chosen because they have significant rendering differences across platforms
+ */
+const TEST_EMOJIS = [
+    '😀', // Basic smiling face - varies significantly
+    '👨‍👩‍👧‍👦', // Family emoji - complex with multiple characters
+    '🇺🇸', // Flag - rendered differently across platforms
+    '🍎', // Apple - varies in color and style
+    '🐼', // Panda - good variation in details
+    '🚀', // Rocket - complex shape with details
+    '🏳️‍🌈', // Rainbow flag - combination character
+    '👍🏽', // Thumbs up with skin tone - tests skin tone rendering
+    '❤️', // Heart with variation selector
+    '🤦‍♂️', // Facepalm with gender - complex combination
+];
+
+/**
+ * Font families to test for emoji rendering variations
+ */
+const TEST_FONTS = [
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji',
+    'Android Emoji',
+    'EmojiOne',
+    'Twemoji Mozilla',
+    'sans-serif' // Fallback
+];
+
+/**
+ * Renders an emoji to a canvas and returns its pixel data
+ * @param emoji The emoji to render
+ * @param fontFamily Font family to use
+ * @returns Uint8ClampedArray of pixels or null if rendering fails
+ */
+function renderEmojiToCanvas(emoji: string, fontFamily: string): Uint8ClampedArray | null {
+    try {
+        // Create canvas and context
+        const canvas = document.createElement('canvas');
+        const size = 20; // Small size is enough for fingerprinting
+        canvas.width = size;
+        canvas.height = size;
+        
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return null;
+        
+        // Clear background
+        ctx.fillStyle = 'white';
+        ctx.fillRect(0, 0, size, size);
+        
+        // Draw emoji
+        ctx.textBaseline = 'middle';
+        ctx.textAlign = 'center';
+        ctx.fillStyle = 'black';
+        ctx.font = `16px "${fontFamily}"`;
+        ctx.fillText(emoji, size / 2, size / 2);
+        
+        // Get pixel data
+        return ctx.getImageData(0, 0, size, size).data;
+    } catch (e) {
+        return null;
+    }
+}
+
+/**
+ * Creates a simplified fingerprint from pixel data by sampling
+ * @param pixels Canvas pixel data
+ * @returns Simplified representation for fingerprinting
+ */
+function simplifyPixelData(pixels: Uint8ClampedArray): number[] {
+    // Sample every 8th pixel for efficiency
+    const simplified: number[] = [];
+    
+    for (let i = 0; i < pixels.length; i += 32) {
+        // Use only RGB values (skip alpha)
+        simplified.push(pixels[i], pixels[i + 1], pixels[i + 2]);
+    }
+    
+    return simplified;
+}
+
+/**
+ * Generates a fingerprint based on emoji rendering
+ * @returns Promise that resolves to emoji fingerprint data
+ */
+async function getEmojiFingerprint(): Promise<componentInterface> {
+    return new Promise((resolve) => {
+        try {
+            const results: Record<string, string> = {};
+            let combinedData: number[] = [];
+            
+            // Test each emoji with the first available font
+            TEST_EMOJIS.forEach((emoji, index) => {
+                // Try each font until one works
+                for (const font of TEST_FONTS) {
+                    const pixelData = renderEmojiToCanvas(emoji, font);
+                    
+                    if (pixelData) {
+                        const simplified = simplifyPixelData(pixelData);
+                        combinedData = [...combinedData, ...simplified];
+                        
+                        // Store individual emoji hash for detailed fingerprinting
+                        results[`emoji_${index}`] = hash(new Uint8Array(simplified).buffer).slice(0, 16);
+                        break; // Use first successful font
+                    }
+                }
+            });
+            
+            // Generate a combined hash for all emoji data
+            const combinedHash = hash(new Uint8Array(combinedData).buffer);
+            
+            resolve({
+                emojiFingerprintHash: combinedHash,
+                emojiDetails: results,
+                uniqueEmojisRendered: Object.keys(results).length
+            });
+        } catch (e) {
+            // Fallback in case of any errors
+            resolve({
+                emojiFingerprintHash: 'unsupported',
+                emojiDetails: {},
+                uniqueEmojisRendered: 0
+            });
+        }
+    });
+}
+
+// Register the component
+includeComponent('emojiFingerprint', getEmojiFingerprint); 

package/src/device/components/system/system.ts

@@ -0,0 +1,76 @@
+import { componentInterface, includeComponent } from '../../factory';
+import { detectBrowser } from './browser'
+
+async function getSystemDetails(): Promise<componentInterface> {
+    return new Promise((resolve) => {
+        // Get detailed browser information
+        const browserDetails = detectBrowser();
+        
+        resolve({
+            'platform': window.navigator.platform,
+            'cookieEnabled': window.navigator.cookieEnabled,
+            'productSub': navigator.productSub,
+            'product': navigator.product,
+            'browser': {
+                'name': browserDetails.name,
+            },
+            'applePayVersion': getApplePayVersion(),
+        });
+    });
+}
+
+/**
+ * Generates a unique browser hash based on various browser characteristics
+ * that can be used for fingerprinting
+ */
+// function generateBrowserHash(): string {
+//     const characteristics = [
+//         navigator.userAgent,
+//         navigator.language,
+//         navigator.hardwareConcurrency,
+//         navigator.deviceMemory,
+//         navigator.platform,
+//         screen.colorDepth,
+//         navigator.maxTouchPoints,
+//         'chrome' in window ? 'chrome' : 'no-chrome',
+//         'opr' in window ? 'opera' : 'no-opera',
+//         'safari' in window ? 'safari' : 'no-safari',
+//         new Date().getTimezoneOffset(),
+//         screen.width + 'x' + screen.height
+//     ];
+    
+//     // Use simple hashing algorithm
+//     let hash = 0;
+//     const str = characteristics.join('||');
+    
+//     for (let i = 0; i < str.length; i++) {
+//         const char = str.charCodeAt(i);
+//         hash = ((hash << 5) - hash) + char;
+//         hash = hash & hash; // Convert to 32bit integer
+//     }
+
+//     // Convert to hex string
+//     return (hash >>> 0).toString(16).padStart(8, '0');
+// }
+
+/**
+ * @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/device/components/webgl/imageHash.ts

@@ -0,0 +1,144 @@
+import { componentInterface, } 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');
+  }
+}
+
+export async function createWebGLFingerprint(): Promise<componentInterface | undefined> {
+  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 
+  }
+}
+
+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);
+    }
+  }
+}

package/src/device/components/webgl/webgl.ts

@@ -0,0 +1,302 @@
+import { componentInterface, includeComponent } from "../../factory";
+import { isChromium, isGecko, isWebKit } from "../../utils/browser_";
+import { createWebGLFingerprint } from "./imageHash";
+
+// Types and constants are used instead of interfaces and enums to avoid this error in projects which use this library:
+// Exported variable '...' has or is using name '...' from external module "..." but cannot be named.
+
+
+/**
+ * WebGL extended features
+ */
+type WebGlExtensionsPayload = {
+  contextAttributes: string[]; // ['alpha=true', 'antialias=true...
+  parameters: string[]; // ['ACTIVE_TEXTURE(33984)', 'ALIASED_LINE_WID...
+  shaderPrecisions: string[]; // ['FRAGMENT_SHADER.LOW_FLOAT=127,127,23...
+  extensions: string[] | null; // ['ANGLE_instanced_arrays', 'EXT_blend_minmax', 'EXT_color...
+  extensionParameters: string[]; // ['COMPRESSED_RGB_S3TC_DXT1_EXT(33776)', 'COMPR...
+  unsupportedExtensions: string[]; // ['EXT_blend_minmax', 'EXT_color...
+};
+
+type CanvasContext = WebGLRenderingContext & {
+  readonly canvas: HTMLCanvasElement;
+};
+
+type Options = {
+  cache: {
+    webgl?: {
+      context: CanvasContext | undefined;
+    };
+  };
+};
+
+/** WebGl context is not available */
+export const STATUS_NO_GL_CONTEXT = -1;
+/** WebGL context `getParameter` method is not a function */
+export const STATUS_GET_PARAMETER_NOT_A_FUNCTION = -2;
+
+export type SpecialStatus =
+  | typeof STATUS_NO_GL_CONTEXT
+  | typeof STATUS_GET_PARAMETER_NOT_A_FUNCTION;
+
+const validContextParameters = new Set([
+  10752, 2849, 2884, 2885, 2886, 2928, 2929, 2930, 2931, 2932, 2960, 2961, 2962,
+  2963, 2964, 2965, 2966, 2967, 2968, 2978, 3024, 3042, 3088, 3089, 3106, 3107,
+  32773, 32777, 32777, 32823, 32824, 32936, 32937, 32938, 32939, 32968, 32969,
+  32970, 32971, 3317, 33170, 3333, 3379, 3386, 33901, 33902, 34016, 34024,
+  34076, 3408, 3410, 3411, 3412, 3413, 3414, 3415, 34467, 34816, 34817, 34818,
+  34819, 34877, 34921, 34930, 35660, 35661, 35724, 35738, 35739, 36003, 36004,
+  36005, 36347, 36348, 36349, 37440, 37441, 37443, 7936, 7937, 7938,
+  // SAMPLE_ALPHA_TO_COVERAGE (32926) and SAMPLE_COVERAGE (32928) are excluded because they trigger a console warning
+  // in IE, Chrome ≤ 59 and Safari ≤ 13 and give no entropy.
+]);
+const validExtensionParams = new Set([
+  34047, // MAX_TEXTURE_MAX_ANISOTROPY_EXT
+  35723, // FRAGMENT_SHADER_DERIVATIVE_HINT_OES
+  36063, // MAX_COLOR_ATTACHMENTS_WEBGL
+  34852, // MAX_DRAW_BUFFERS_WEBGL
+  34853, // DRAW_BUFFER0_WEBGL
+  34854, // DRAW_BUFFER1_WEBGL
+  34229, // VERTEX_ARRAY_BINDING_OES
+  36392, // TIMESTAMP_EXT
+  36795, // GPU_DISJOINT_EXT
+  38449, // MAX_VIEWS_OVR
+]);
+const shaderTypes = ["FRAGMENT_SHADER", "VERTEX_SHADER"] as const;
+const precisionTypes = [
+  "LOW_FLOAT",
+  "MEDIUM_FLOAT",
+  "HIGH_FLOAT",
+  "LOW_INT",
+  "MEDIUM_INT",
+  "HIGH_INT",
+] as const;
+const rendererInfoExtensionName = "WEBGL_debug_renderer_info";
+const polygonModeExtensionName = "WEBGL_polygon_mode";
+
+/**
+ * Gets the basic and simple WebGL parameters
+ */
+export async function getWebGlBasics(
+  { cache = {} }: Options = { cache: {} }
+): Promise<componentInterface> {
+  const gl = getWebGLContext(cache);
+  if (!gl) {
+    return { status: STATUS_NO_GL_CONTEXT };
+  }
+
+  if (!isValidParameterGetter(gl)) {
+    return { status: STATUS_GET_PARAMETER_NOT_A_FUNCTION };
+  }
+
+  const debugExtension = shouldAvoidDebugRendererInfo()
+    ? null
+    : gl.getExtension(rendererInfoExtensionName);
+
+  const imageHash = await createWebGLFingerprint();
+
+  return {
+    version: gl.getParameter(gl.VERSION)?.toString() || "",
+    vendor: gl.getParameter(gl.VENDOR)?.toString() || "",
+    vendorUnmasked: debugExtension
+      ? gl.getParameter(debugExtension.UNMASKED_VENDOR_WEBGL)?.toString()
+      : "",
+    renderer: gl.getParameter(gl.RENDERER)?.toString() || "",
+    rendererUnmasked: debugExtension
+      ? gl.getParameter(debugExtension.UNMASKED_RENDERER_WEBGL)?.toString()
+      : "",
+    shadingLanguageVersion:
+      gl.getParameter(gl.SHADING_LANGUAGE_VERSION)?.toString() || "",
+    ...imageHash,
+  };
+}
+
+/**
+ * Gets the advanced and massive WebGL parameters and extensions
+ */
+export async function getWebGlExtensions(
+  { cache = {} }: Options = { cache: {} }
+): Promise<WebGlExtensionsPayload | SpecialStatus> {
+  const gl = getWebGLContext(cache);
+  if (!gl) {
+    return STATUS_NO_GL_CONTEXT;
+  }
+
+  if (!isValidParameterGetter(gl)) {
+    return STATUS_GET_PARAMETER_NOT_A_FUNCTION;
+  }
+
+  const extensions = gl.getSupportedExtensions();
+  const contextAttributes = gl.getContextAttributes();
+  const unsupportedExtensions: string[] = [];
+
+  // Features
+  const attributes: string[] = [];
+  const parameters: string[] = [];
+  const extensionParameters: string[] = [];
+  const shaderPrecisions: string[] = [];
+
+  // Context attributes
+  if (contextAttributes) {
+    for (const attributeName of Object.keys(
+      contextAttributes
+    ) as (keyof WebGLContextAttributes)[]) {
+      attributes.push(`${attributeName}=${contextAttributes[attributeName]}`);
+    }
+  }
+
+  // Context parameters
+  const constants = getConstantsFromPrototype(gl);
+  for (const constant of constants) {
+    const code = gl[constant] as number;
+    parameters.push(
+      `${constant}=${code}${
+        validContextParameters.has(code) ? `=${gl.getParameter(code)}` : ""
+      }`
+    );
+  }
+
+  // Extension parameters
+  if (extensions) {
+    for (const name of extensions) {
+      if (
+        (name === rendererInfoExtensionName &&
+          shouldAvoidDebugRendererInfo()) ||
+        (name === polygonModeExtensionName &&
+          shouldAvoidPolygonModeExtensions())
+      ) {
+        continue;
+      }
+
+      const extension = gl.getExtension(name);
+      if (!extension) {
+        unsupportedExtensions.push(name);
+        continue;
+      }
+
+      for (const constant of getConstantsFromPrototype(extension)) {
+        const code = extension[constant];
+        extensionParameters.push(
+          `${constant}=${code}${
+            validExtensionParams.has(code) ? `=${gl.getParameter(code)}` : ""
+          }`
+        );
+      }
+    }
+  }
+
+  // Shader precision
+  for (const shaderType of shaderTypes) {
+    for (const precisionType of precisionTypes) {
+      const shaderPrecision = getShaderPrecision(gl, shaderType, precisionType);
+      shaderPrecisions.push(
+        `${shaderType}.${precisionType}=${shaderPrecision.join(",")}`
+      );
+    }
+  }
+
+  // Postprocess
+  extensionParameters.sort();
+  parameters.sort();
+
+  return {
+    contextAttributes: attributes,
+    parameters: parameters,
+    shaderPrecisions: shaderPrecisions,
+    extensions: extensions,
+    extensionParameters: extensionParameters,
+    unsupportedExtensions,
+  };
+}
+
+/**
+ * This function usually takes the most time to execute in all the sources, therefore we cache its result.
+ *
+ * Warning for package users:
+ * This function is out of Semantic Versioning, i.e. can change unexpectedly. Usage is at your own risk.
+ */
+export function getWebGLContext(cache: Options["cache"]) {
+  if (cache.webgl) {
+    return cache.webgl.context;
+  }
+
+  const canvas = document.createElement("canvas");
+  let context: CanvasContext | undefined;
+
+  canvas.addEventListener(
+    "webglCreateContextError",
+    () => (context = undefined)
+  );
+
+  for (const type of ["webgl", "experimental-webgl"]) {
+    try {
+      context = canvas.getContext(type) as CanvasContext;
+    } catch {
+      // Ok, continue
+    }
+    if (context) {
+      break;
+    }
+  }
+
+  cache.webgl = { context };
+  return context;
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/WebGLShaderPrecisionFormat
+ * https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/getShaderPrecisionFormat
+ * https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.12
+ */
+function getShaderPrecision(
+  gl: WebGLRenderingContext,
+  shaderType: (typeof shaderTypes)[number],
+  precisionType: (typeof precisionTypes)[number]
+) {
+  const shaderPrecision = gl.getShaderPrecisionFormat(
+    gl[shaderType],
+    gl[precisionType]
+  );
+  return shaderPrecision
+    ? [
+        shaderPrecision.rangeMin,
+        shaderPrecision.rangeMax,
+        shaderPrecision.precision,
+      ]
+    : [];
+}
+
+function getConstantsFromPrototype<K>(obj: K): Array<Extract<keyof K, string>> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const keys = Object.keys((obj as any).__proto__) as Array<keyof K>;
+  return keys.filter(isConstantLike);
+}
+
+function isConstantLike<K>(key: K): key is Extract<K, string> {
+  return typeof key === "string" && !key.match(/[^A-Z0-9_x]/);
+}
+
+/**
+ * Some browsers print a console warning when the WEBGL_debug_renderer_info extension is requested.
+ * JS Agent aims to avoid printing messages to console, so we avoid this extension in that browsers.
+ */
+export function shouldAvoidDebugRendererInfo(): boolean {
+  return isGecko();
+}
+
+/**
+ * Some browsers print a console warning when the WEBGL_polygon_mode extension is requested.
+ * JS Agent aims to avoid printing messages to console, so we avoid this extension in that browsers.
+ */
+export function shouldAvoidPolygonModeExtensions(): boolean {
+  return isChromium() || isWebKit();
+}
+
+/**
+ * Some unknown browsers have no `getParameter` method
+ */
+function isValidParameterGetter(gl: WebGLRenderingContext) {
+  return typeof gl.getParameter === "function";
+}
+
+includeComponent("webgl", getWebGlBasics);