thumbmarkjs / thumbmarkjs Goto Github PK

sometimes from one of my android devices i get permissions:{timeout: true},
don't know if the cause is the device itself or my implementation,

the device is oneplus 8t using chrome 122, android 14.

function getVideoCard(): componentInterface | string {
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl') ?? canvas.getContext('experimental-webgl')
if (gl && 'getParameter' in gl) {
const debugInfo = gl.getExtension("WEBGL_debug_renderer_info");
return {
vendor: (gl.getParameter(gl.VENDOR) || '').toString(),
vendorUnmasked: debugInfo ? (gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) || '').toString() : '',
renderer: (gl.getParameter(gl.RENDERER) || '').toString(),
rendererUnmasked: debugInfo ? (gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) || '').toString() : '',
version: (gl.getParameter(gl.VERSION) || '').toString(),
shadingLanguageVersion: (gl.getParameter(gl.SHADING_LANGUAGE_VERSION) || '').toString(),
}
}
return "undefined"
}

while using thumbmarkjs, Firefox is giving warning WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER

First of all, thank you for the amazing work.

Even if set to 1(ms), the getFingerprintPerformance never times out, returning an object with elapsed keys in the tenths of ms, and a total time of +100ms:

import { setOption, getFingerprintPerformance } from '@thumbmarkjs/thumbmarkjs';

setOption('timeout', 1);
console.log(getFingerprintPerformance());

{
  "elapsed": {
    "audio": 42.80000019073486,
    "canvas": 9.5,
    "fonts": 9.399999618530273,
    "hardware": 9.399999618530273,
    "locales": 9.399999618530273,
    "permissions": 120.59999990463257,
    "plugins": 9.299999713897705,
    "screen": 9.299999713897705,
    "system": 9.199999809265137,
    "webgl": 9.099999904632568,
    "math": 9.099999904632568
  },
  ...
}
Time elapsed: 111.09999990463257

I know for a fact that the setOption('timeout') is working, because if I use setOption('foo') it will raise as foo not being a valid option.

We're interested in porting this library over to Kotlin & Swift for native apps.

We'd like to gauge the interest in this space and would also like to ascertain whether or not thumbmarkjs would be interested in allowing our company to have a "sponsored" banner on the repo once it goes live?

Hey, thanks for this useful neat library. In chrome when opening the demo page for thumbmarkjs I get a fp but the thing is when adding the library in my web app and calling the getFingerprint method in this very same browser I get a different value. I compare both ThumbmarkJS.getFingerprintData() and are the same. What am I missing? Has this something to do with the hashing function or perhaps other config via setOptions?

Thanks in advance. I’m looking forward to your reply.

allow importing in Typescript like

import { getFingerprint } from 'thumbmarkjs'

We're using this tool to identify users internally and see which user did what and save their activities.

If a user uninstalls an extension or changes the display screen or changes the font, would the signature change? I'm asking because if that's the case then I need another metric to track users by.

And is the fingerprint unique per user per browser? Or can two users with similar browsers have the same fingerprint?

Hi, after upgrade to 0.14.2 or 0.14.3 this is thrown. I suspect problem is in the package.json:

Hi @ilkkapeltola, great project - thanks for your hard work!

If I may, I'd propose an enhancement: I'd like to set options like here -> https://github.com/damianobarbati/get-browser-fingerprint

I think that would make a great addition to Thumbmarkjs.

Thanks and keep up your great work!

Hi @ilkkapeltola, I noticed that Edge gets detected as Chrome. Is this wanted behaviour as they are both chromium based browsers? Thanks!

v0.13.5 works. all versions after that break.

my code in next.js that used to work:

"use client"

import React from "react"
import { hasWindow } from "std-env"

import { useStore } from "@app/store/zustand"

export function Fingerprint() {
	const { setFingerprint } = useStore()

	React.useEffect(() => {
		async function fn() {
			if (hasWindow) {
				const { getFingerprint } = await import("@thumbmarkjs/thumbmarkjs")
				const visitorId = await getFingerprint()
				setFingerprint(visitorId)
			}
		}

		fn()
	}, [setFingerprint])
	return null
}

fwiw, i tried this recommended example too but it gives error on import only.

Hi there.

I noticed your ApplePaySession.supportsVersion implementation that was recently committed looks for versions only up to 10, then works its way down. However, Safari 17.3 currently returns true for values from 1 to 15, so it may be prudent to change your implementation to reflect this fact.

Thanks!

Steps to reproduce:

• clear cache
• open a fresh browser
• go to https://thumbmarkjs.com
• log the fingerprint
• refresh page

expected outcome:

• the same fingerprint as first time

actual outcome

• a different fingerprint

The logging for this is still a little bad, since with these first-time loads the actual shown fingerprint on the logging page might differ from the component JSON file. And it's connected to this issue that Firefox also has.

But digging a little deeper, it looks like the found fonts change a little during the first few moments of the first page load. Some fonts are first not found, and then they are.

I haven't found a good way to ensure all fonts are loaded properly. I'm working in a separate branch still on this.

If you have any ideas on how to do this, please let me know.

I would like to use the font detection in the canvas element, since it provides a lot more precision on the font widths. And unlike other fingerprinting methods that simply check the boolean availability of the font, mine also checks how they render. This is a decent source of entropy and is reliable as long as the font is loaded.

With Firefox though, I could just ignore font fingerprinting for Firefox, if I can't find another solution. I don't like that, but it's only a sub 4% market share so doesn't affect the big picture too much.

Recently, I used fingerprints to generate a unique device ID. In Windows it works, but in Mac OS it changes the deviceid after the next day when the system starts.

display-mode: browser

I visited https://www.thumbmarkjs.com/ using Firefox 122 running on Fedora 39. When visit the site from a private window, I get a different fingerprint. The difference is caused by the different value for canvas.commonImageDataHash.

Is this expected?

Hi,

first of all, thank you for your work.

Just setup a remix.run project and want to include thumbmarkjs as a dependency.
As of this moment, the import fails.

Exploring the frontend world and am not well versed about different types of modules, etc.

Appreciate any support. Error Report below.

package.json where thumbmarkjs is listed:

"dependencies": {
    "@thumbmarkjs/thumbmarkjs": "^0.14.2"
  },

tsconfig.json file of my project:

{
  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
  "compilerOptions": {
    "lib": ["DOM", "DOM.Iterable", "ES2022"],
    "isolatedModules": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "moduleResolution": "Bundler",
    "resolveJsonModule": true,
    "target": "ES2022",
    "strict": true,
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./app/*"]
    },

    // Remix takes care of building everything in `remix build`.
    "noEmit": true
  }
}

route/index component where thumbmarkjs is imported:

import { UnauthenticatedLayout } from "~/components/Layout/UnauthenticatedLayout";
import { useEffect } from "react";

import { getFingerprint } from "@thumbmarkjs/thumbmarkjs";

export default function Index() {
  useEffect(() => {
    getFingerprint().then(console.log);
  }, []);

  return (
    <UnauthenticatedLayout>
      <></>
    </UnauthenticatedLayout>
  );
}

file being imported is: node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.d.ts

error that gets thrown on the server side (remix):

import { getFingerprint } from "@thumbmarkjs/thumbmarkjs";
         ^^^^^^^^^^^^^^
SyntaxError: Named export 'getFingerprint' not found. The requested module '@thumbmarkjs/thumbmarkjs' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@thumbmarkjs/thumbmarkjs';
const { getFingerprint } = pkg;

Update / Remix Docs Solution

remix.config.js

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/*.css"],
  serverDependenciesToBundle: ["@thumbmarkjs/thumbmarkjs"],
  // appDirectory: "app",
  // assetsBuildDirectory: "public/build",
  // publicPath: "/build/",
  // serverBuildPath: "build/index.js",
};

Docs: https://remix.run/docs/en/main/guides/gotchas

First of all thanks for your work, i'm wondering if is possible to add custom parameters when generating the fingerprint hash (something like express-fingerprint do), it would be useful to get uniq ids.

Thanks.

Hi,

it's me again. I currently experience this error, when trying to use Thumbmark.js in my Next.js project.

Hi,

Working on the swift/kotlin version of this library and wondering if I can get some insight into your decision making process around using MurmurHash.

1. Was there a particular reason you went with MurmurHash?
2. Would there be any reason you would think we couldn't use the default system algorithms in Swift/Kotlin like SHA256 and SHA512.

I'll close this issue immediately after I post it, hoping you see it :) It's not an issue, it's a funny story.

Today I was bored so I decided to check what I could improve in our internal web app, but I wasn't in the mood to code, it's a Sunday!

So I checked and I've seen that our internal tool uses cdnjs and jsdelivr and unpkg cdn, so I figured I'd make a small change and use one CDN provider instead, so that we don't have to call 3 different CDNs.

Now I hate using unpkg, because it's the new kid on the block, I don't know how big their CDN network is nor how fast it is. So I decided to use CDNJS instead even though I knew very well that it's the slowest CDN network out there, I've been using them since 2011, but Cloudflare is a well-known company so let's go with it.

I changed everything, and I got to the last change which is thumbmarkjs, I couldn't find it on CDNJS, I could remove it, after all, I don't need it for this project, but that would require writing some code to generate cookies, and it's a Sunday, I don't feel like coding today, besides if it ain't broke don't fix it.

So I ended up, redoing the exercise and I changed all the CDN URLs to JSDeliver just to match thumbmarkjs, and I kid you not, the website now is much much much faster. All that just because you didn't publish your library on any alternative CDN provider. I didn't run any benchmarks though, because it's Sunday :) And btw, I have a 1GB/s fiber optics internet connection, I'm in Dubai and I felt the difference.

Thanks for amazing library.

Right now testing it for pet project and find out, that package contain only commonjs version. Problem with this, that such version cannot be used with ES6 projects - system just fail to import it. Will be good, if package will provide also ES6 and UMD versions.

I did such approach for my last library re2js - https://github.com/le0pard/re2js/blob/main/package.json and https://github.com/le0pard/re2js/blob/main/rollup.config.js#L27-L52

This allow to anyone use it with commonjs, es6 or udm from single package.

Hi.

On macOS, prefers-color-scheme changes between light and dark based on the time of day and applicable settings. This results in two different fingerprint depending on the time of day the script is run. This may also affect other platforms. I'm not really sure how to handle this other than removing prefers-color-scheme from the checked media features.

Thanks!

Hi
We are using the Next.js example in our app, and there is a flickering scrollbar in the first render.
This library creates a blank iframe with the display set to block with important annotation. ("display","block","important")
So, this block-iframe always causes overflow and shows the scrollbar for a moment and then disappears.

While testing in incognito, I noticed that the finger print that was generated was different. Is this expected?
I used the JSON compare tool that was linked on the site. The difference was in the audio.sampleHash values between the two separate incognito windows.

Safari Version 17.3
macOS Sanoma

Hi.

Brave appears to not work with WebGL when it is set to "Aggressively block fingerprinting", causing the WebGL fingerprint to be set to "unsupported" even though WebGL is supported in Brave.

Error: Vertex shader compilation failed: null at webgl.ts:73:17 at webgl.ts:25:71 at Function.from (<anonymous>) at webgl.ts:25:43 at tslib.es6.js:147:23 at Object.next (tslib.es6.js:128:53) at tslib.es6.js:121:71 at new Promise (<anonymous>) at n (tslib.es6.js:117:12) at webgl.ts:17:1

This seems to be because Brave returns null for gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS). I'm not sure if this is something that can be addressed or not, but you can at least detect if Brave is in strict mode similar to how CreepJS does it.

Thanks!

Hi there, first of all thanks for this sweet little lib!

I'm using Webpack 5 and having warnings on build concerning thumbmark.esm.js :

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\audio\audio.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\audio\audio.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\canvas\canvas.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\canvas\canvas.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\fonts\fonts.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\fonts\fonts.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\hardware\hardware.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\hardware\hardware.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\locales\locales.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\locales\locales.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\math\math.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\math\math.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\permissions\permissions.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\permissions\permissions.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\plugins\plugins.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\plugins\plugins.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\screen\screen.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\screen\screen.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\system\browser.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\system\browser.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\system\system.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\system\system.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\webgl\webgl.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\components\webgl\webgl.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\factory.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\factory.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\fingerprint\functions.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\fingerprint\functions.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\fingerprint\options.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\fingerprint\options.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\index.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmar
WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\ephemeralIFrame.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\ephemeralIFrame.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\getMostFrequent.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\getMostFrequent.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\hash.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\hash.ts'

WARNING in ./node_modules/@thumbmarkjs/thumbmarkjs/dist/thumbmark.esm.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\raceAll.ts' file: Error: ENOENT: no such file or directory, open 'C:\git\path\project\node_modules\@thumbmarkjs\thumbmarkjs\src\utils\raceAll.ts'

webpack compiled with 21 warnings
No issues found.

It's a shame since the module itself works nicely.

I added a ignoreWarnings: [/Failed to parse source map/] entry in my webpack.config.js for now, but I was wondering if maybe there was a better way for handling this.

Thanks in advance!

Steps to reproduce:

1. Open https://www.thumbmarkjs.com/ in a browser window.
2. Open https://www.thumbmarkjs.com/ in a browser window that is in a different screen from the previous one (e.g. laptop built-in screen and external screen). The fingerprint is different than in the previous step.

As title.

No warnings should be output to console.