feat: reference browser attribute testing for injector

test/reference/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "fingerprint-reference",
+  "version": "0.0.1",
+  "description": "checks the fingerprinting overrides",
+  "license": "ISC",
+  "author": "Alex EmpiresHQ",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "NODE_OPTIONS=\"--experimental-specifier-resolution=node\" node --loader ts-node/esm --watch src/index.ts",
+    "compile": "tsc --noEmit",
+    "compile:watch": "tsc --noEmit --watch",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/express": "5.0.3",
+    "@types/node": "24.0.7",
+    "ejs": "^3.1.10",
+    "express": "^5.1.0",
+    "fingerprint-generator": "^2.1.68",
+    "fingerprint-injector": "^2.1.68",
+    "nodemon": "^3.0.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.0"
+  }
+}

test/reference/src/index.ts

@@ -0,0 +1,87 @@
+import express from 'express';
+import { createServer as createViteServer } from 'vite';
+import { fileURLToPath } from 'url';
+import { dirname, resolve } from 'path';
+import { FingerprintInjector } from 'fingerprint-injector';
+import { 
+  FingerprintGenerator,
+} from 'fingerprint-generator';
+import type { 
+  FingerprintGeneratorOptions, 
+  BrowserFingerprintWithHeaders,
+  Fingerprint
+} from 'fingerprint-generator';
+
+import type { 
+  BrowserName,
+  Device,
+  OperatingSystem as OS
+} from 'header-generator';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+async function startServer() {
+    try {
+        const app = express();
+
+        const vite = await createViteServer({
+            server: { middlewareMode: true },
+            appType: 'custom',
+            root: resolve(__dirname, '../static'),
+        });
+
+        app.use(vite.middlewares);
+
+        app.set('view engine', 'ejs');
+        app.set('views', resolve(__dirname, '../static'));
+
+        app.get('/', (req, res) => {
+
+            const browser = req.query.browser as string || 'chrome';
+            const device = req.query.device as string || 'desktop';
+            const os = req.query.os as string || 'windows';
+
+            const validBrowsers: BrowserName[] = ['chrome', 'firefox', 'safari', 'edge'];
+            const validDevices: Device[] = ['desktop', 'mobile'];
+            const validOS: OS[] = ['windows', 'macos', 'linux', 'android', 'ios'];
+
+            const selectedBrowser = validBrowsers.includes(browser as BrowserName) ? browser as BrowserName : 'chrome';
+            const selectedDevice = validDevices.includes(device as Device) ? device as Device : 'desktop';
+            const selectedOS = validOS.includes(os as OS) ? os as OS : 'windows';
+
+            const fingerprintInjector = new FingerprintInjector();
+
+            const options: Partial<FingerprintGeneratorOptions> = {
+                browsers: [selectedBrowser],
+                devices: [selectedDevice],
+                operatingSystems: [selectedOS],
+            };
+
+            const generatorResult: BrowserFingerprintWithHeaders = new FingerprintGenerator().getFingerprint(options);
+
+            const fingerprint: Fingerprint = generatorResult.fingerprint;
+
+            res.render('layout', {
+                inject: fingerprintInjector.getInjectableScript(generatorResult),
+                fingerprint: JSON.stringify(fingerprint, null, 2),
+                browser: selectedBrowser,
+                device: selectedDevice,
+                os: selectedOS
+            });
+        });
+
+        const port = 3000;
+        app.listen(port, () => {
+            console.log(`Server started at http://localhost:${port}`);
+        });
+    } catch (error) {
+        console.error('Server initialization error:', error);
+        process.exit(1);
+    }
+}
+
+startServer().catch((error) => {
+    console.error('Unhandled server error:', error);
+    process.exit(1);
+});

test/reference/static/css/styles.css

@@ -0,0 +1,106 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+  font-size: 14px;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2;
+  position: sticky;
+  top: 0;
+}
+
+tr.mismatch {
+  background-color: #ffcccc;
+}
+
+pre {
+  margin: 0;
+  white-space: pre-wrap;
+  background-color: #f5f5f5;
+  padding: 5px;
+  border-radius: 3px;
+  overflow: visible;
+}
+
+.code {
+  font-family: monospace;
+  background-color: #f0f0f0;
+  padding: 2px 4px;
+  border-radius: 3px;
+}
+
+.raw-data {
+  margin-top: 30px;
+  width: 100%;
+}
+
+#fingerprint-data {
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+#comparison-table-container {
+  width: 100%;
+}
+
+/* Styles for the fingerprint configuration panel */
+.config-panel {
+  background-color: #f8f9fa;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 15px;
+  margin-bottom: 20px;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+.form-group label {
+  display: inline-block;
+  width: 150px;
+  font-weight: bold;
+}
+
+.form-group select {
+  padding: 5px;
+  width: 200px;
+  border-radius: 3px;
+  border: 1px solid #ccc;
+}
+
+.form-group button {
+  padding: 8px 15px;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-right: 10px;
+}
+
+.form-group button:hover {
+  background-color: #45a049;
+}
+
+#random-config {
+  background-color: #2196F3;
+}
+
+#random-config:hover {
+  background-color: #0b7dda;
+}

test/reference/static/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fingerprint Reference</title>
+  <script type="module" src="/main.js"></script>
+</head>
+<body>
+  <div id="app">Loading...</div>
+</body>
+</html>