get-browser-fingerprint 3.2.3 → 4.0.1

package/README.md

@@ -1,31 +1,27 @@
 # get-browser-fingerprint
 
-Zero dependencies package exporting a single, fast (<15ms) and synchronous function which computes a browser fingerprint, without requiring any permission to the user.
+Zero dependencies package exporting a single and fast (<50ms) asynchronous function returning a browser fingerprint, without requiring any permission to the user.  
 
 ## Usage
 
 Get browser fingerprint:  
 ```js
 import getBrowserFingerprint from 'get-browser-fingerprint';
-const fingerprint = getBrowserFingerprint();
+const fingerprint = await getBrowserFingerprint();
 console.log(fingerprint);
 ```
 
 Options available:
-- `hardwareOnly` (default `false`): leverage only hardware info about device 
-- `enableWebgl` (default `false`): enable webgl renderer, ~4x times slower but adds another deadly powerful hardware detection layer on top of canvas
-- `enableScreen` (default `true`): enable screen resolution detection, disable it if your userbase may use multiple screens
-- `debug`: log data used to generate fingerprint to console and add canvas/webgl canvas to body to see rendered image (default `false`)
-
-⚠️ Be careful: the strongest discriminating factor is canvas token which can't be computed on old devices (eg: iPhone 6), deal accordingly ⚠️
+- `hardwareOnly` (default `true`): use only hardware info about device.
+- `debug` (default `false`): log data used to generate fingerprint to console and add canvas/webgl/audio elements to body.
 
 ## Development
 
 To test locally:
 ```sh
-nvm install
-yarn install
-yarn test
+fnm install
+pnpm install
+pnpm test
 ```
 
 To run example locally:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "get-browser-fingerprint",
-  "version": "3.2.3",
+  "version": "4.0.1",
   "author": "Damiano Barbati <damiano.barbati@gmail.com> (https://github.com/damianobarbati)",
   "repository": "https://github.com/damianobarbati/get-browser-fingerprint",
   "license": "MIT",
@@ -18,9 +18,9 @@
     "test": "vitest run"
   },
   "devDependencies": {
-    "@biomejs/biome": "^1.8.3",
-    "@playwright/test": "^1.47.0",
-    "serve": "^14.2.3",
-    "vitest": "^2.0.5"
+    "@biomejs/biome": "^1.9.4",
+    "@playwright/test": "^1.48.1",
+    "serve": "^14.2.4",
+    "vitest": "^2.1.3"
   }
 }

package/src/index.d.ts

@@ -1,11 +1,9 @@
 export interface FingerprintOptions {
   hardwareOnly?: boolean;
-  enableWebgl?: boolean;
-  enableScreen?: boolean;
   debug?: boolean;
 }
 
-export default function getBrowserFingerprint(options?: FingerprintOptions): number;
+export default function getBrowserFingerprint(options?: FingerprintOptions): Promise<number>;
 
 declare global {
   interface Window {

package/src/index.js

@@ -1,6 +1,10 @@
-const getBrowserFingerprint = ({ hardwareOnly = false, enableWebgl = false, enableScreen = true, debug = false } = {}) => {
+/** @type {import('./index.d.ts').getBrowserFingerprint} */
+const getBrowserFingerprint = async ({ hardwareOnly = true, debug = false } = {}) => {
   const { cookieEnabled, deviceMemory, doNotTrack, hardwareConcurrency, language, languages, maxTouchPoints, platform, userAgent, vendor } = window.navigator;
 
+  // we use screen info only on mobile, because on desktop the user may use multiple monitors
+  const enableScreen = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+
   const { width, height, colorDepth, pixelDepth } = enableScreen ? window.screen : {}; // undefined will remove this from the stringify down here
   const timezoneOffset = new Date().getTimezoneOffset();
   const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -8,11 +12,15 @@ const getBrowserFingerprint = ({ hardwareOnly = false, enableWebgl = false, enab
   const devicePixelRatio = window.devicePixelRatio;
 
   const canvas = getCanvasID(debug);
-  const webgl = enableWebgl ? getWebglID(debug) : undefined; // undefined will remove this from the stringify down here
-  const webglInfo = enableWebgl ? getWebglInfo(debug) : undefined; // undefined will remove this from the stringify down here
+  const audio = await getAudioID(debug);
+  const audioInfo = getAudioInfo();
+  const webgl = getWebglID(debug);
+  const webglInfo = getWebglInfo();
 
   const data = hardwareOnly
-    ? JSON.stringify({
+    ? {
+        audioInfo,
+        audio,
         canvas,
         colorDepth,
         deviceMemory,
@@ -26,8 +34,10 @@ const getBrowserFingerprint = ({ hardwareOnly = false, enableWebgl = false, enab
         webgl,
         webglInfo,
         width,
-      })
-    : JSON.stringify({
+      }
+    : {
+        audioInfo,
+        audio,
         canvas,
         colorDepth,
         cookieEnabled,
@@ -49,13 +59,12 @@ const getBrowserFingerprint = ({ hardwareOnly = false, enableWebgl = false, enab
         webgl,
         webglInfo,
         width,
-      });
-
-  const datastring = JSON.stringify(data, null, 4);
+      };
 
-  if (debug) console.log("fingerprint data", datastring);
+  if (debug) console.log("Fingerprint data:", JSON.stringify(data, null, 2));
 
-  const result = murmurhash3_32_gc(datastring);
+  const payload = JSON.stringify(data, null, 2);
+  const result = murmurhash3_32_gc(payload);
   return result;
 };
 
@@ -156,7 +165,7 @@ const getWebglInfo = () => {
       VERSION: String(ctx.getParameter(ctx.VERSION)),
       SHADING_LANGUAGE_VERSION: String(ctx.getParameter(ctx.SHADING_LANGUAGE_VERSION)),
       VENDOR: String(ctx.getParameter(ctx.VENDOR)),
-      SUPORTED_EXTENSIONS: String(ctx.getSupportedExtensions()),
+      SUPPORTED_EXTENSIONS: String(ctx.getSupportedExtensions()),
     };
 
     return result;
@@ -165,6 +174,106 @@ const getWebglInfo = () => {
   }
 };
 
+const getAudioInfo = () => {
+  try {
+    const OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+    const length = 44100;
+    const sampleRate = 44100;
+    const context = new OfflineAudioContext(1, length, sampleRate);
+
+    const result = {
+      sampleRate: context.sampleRate,
+      channelCount: context.destination.maxChannelCount,
+      outputLatency: context.outputLatency,
+      state: context.state,
+      baseLatency: context.baseLatency,
+    };
+
+    return result;
+  } catch {
+    return null;
+  }
+};
+
+const getAudioID = async (debug) => {
+  try {
+    const OfflineAudioContext = window.OfflineAudioContext || window.webkitOfflineAudioContext;
+    const sampleRate = 44100;
+    const length = 44100; // Number of samples (1 second of audio)
+    const context = new OfflineAudioContext(1, length, sampleRate);
+
+    // Create an oscillator to generate sound
+    const oscillator = context.createOscillator();
+    oscillator.type = "sine";
+    oscillator.frequency.value = 440;
+
+    oscillator.connect(context.destination);
+    oscillator.start();
+
+    // Render the audio into a buffer
+    const renderedBuffer = await context.startRendering();
+    const channelData = renderedBuffer.getChannelData(0);
+
+    // Generate fingerprint by summing the absolute values of the audio data
+    const result = channelData.reduce((acc, val) => acc + Math.abs(val), 0).toString();
+
+    if (debug) {
+      const wavBlob = bufferToWav(renderedBuffer);
+      const audioURL = URL.createObjectURL(wavBlob);
+
+      const audioElement = document.createElement("audio");
+      audioElement.controls = true;
+      audioElement.src = audioURL;
+      document.body.appendChild(audioElement);
+    }
+
+    return murmurhash3_32_gc(result);
+  } catch {
+    return null;
+  }
+};
+
+const bufferToWav = (buffer) => {
+  const numOfChannels = buffer.numberOfChannels;
+  const length = buffer.length * numOfChannels * 2 + 44; // Buffer size in bytes
+  const wavBuffer = new ArrayBuffer(length);
+  const view = new DataView(wavBuffer);
+
+  // Write WAV file header
+  writeString(view, 0, "RIFF");
+  view.setUint32(4, length - 8, true);
+  writeString(view, 8, "WAVE");
+  writeString(view, 12, "fmt ");
+  view.setUint32(16, 16, true);
+  view.setUint16(20, 1, true);
+  view.setUint16(22, numOfChannels, true);
+  view.setUint32(24, buffer.sampleRate, true);
+  view.setUint32(28, buffer.sampleRate * numOfChannels * 2, true);
+  view.setUint16(32, numOfChannels * 2, true);
+  view.setUint16(34, 16, true);
+  writeString(view, 36, "data");
+  view.setUint32(40, length - 44, true);
+
+  // Write interleaved audio data
+  let offset = 44;
+  for (let i = 0; i < buffer.length; i++) {
+    for (let channel = 0; channel < numOfChannels; channel++) {
+      const sample = buffer.getChannelData(channel)[i];
+      const intSample = Math.max(-1, Math.min(1, sample)) * 32767;
+      view.setInt16(offset, intSample, true);
+      offset += 2;
+    }
+  }
+
+  return new Blob([view], { type: "audio/wav" });
+};
+
+const writeString = (view, offset, string) => {
+  for (let i = 0; i < string.length; i++) {
+    view.setUint8(offset + i, string.charCodeAt(i));
+  }
+};
+
 const murmurhash3_32_gc = (key) => {
   const remainder = key.length & 3; // key.length % 4
   const bytes = key.length - remainder;