使用FingerprintJS2获取浏览器指纹时遇ReferenceError: navigator未定义问题求助

Hey there! Let's figure out why you're hitting that ReferenceError: navigator is not defined error and fix it up.

The Root Cause #

FingerprintJS2 is built to run in the browser, not on a Node.js/Express server. It depends on browser-specific APIs like navigator, window, and other DOM features that don't exist in the Node.js runtime. When you try to initialize it directly in your backend code, Node has no idea what navigator refers to—hence the error.

How to Fix This #

You need to generate the fingerprint on the client side (the user's browser) and send the result to your Express server. Here's a step-by-step breakdown:

1. Remove FingerprintJS2 from your backend code
   Delete these lines from your Express server file—they don't belong here:

   const Fingerprint = require('fingerprintjs2');
   const fpInstance = new Fingerprint();
   fpInstance.get((result,err)=>{ 
     if(err){ 
       console.log('Error obtained',err) 
     } else{ 
       console.log(result)
     }
   });
   

2. Create a frontend script to run FingerprintJS2
   You can use a CDN to include FingerprintJS2 directly in an HTML file, or bundle it with a frontend tool like Webpack if you prefer. Here's a simple CDN example:

   • Make a public folder in your project, then create public/index.html:

     <!DOCTYPE html>
     <html>
     <body>
       <script src="https://cdn.jsdelivr.net/npm/fingerprintjs2@2.1.4/dist/fingerprint2.min.js"></script>
       <script>
         // Generate fingerprint in the browser
         FingerprintJS2.get(function(result, err) {
           if (err) {
             console.error('Fingerprint generation failed:', err);
             return;
           }
           // Send the fingerprint to your Express server
           fetch('/save-fingerprint', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json'
             },
             body: JSON.stringify({ fingerprint: result })
           })
           .then(res => res.json())
           .then(data => console.log('Fingerprint sent successfully:', data))
           .catch(err => console.error('Error sending fingerprint:', err));
         });
       </script>
     </body>
     </html>
     

3. Update your Express server to handle the fingerprint
   Modify your server code to serve the static HTML file and accept the fingerprint data:

   const express = require('express');
   const cors = require('cors');
   const mysql = require('mysql');
   const app = express();
   
   // Middleware setup
   app.use(cors());
   app.use(express.json()); // Parse JSON request bodies
   app.use(express.static('public')); // Serve files from the "public" folder
   
   // Route to receive and process the fingerprint
   app.post('/save-fingerprint', (req, res) => {
     const { fingerprint } = req.body;
     console.log('Received fingerprint:', fingerprint);
   
     // Add your MySQL logic here to save the fingerprint
     // Example (adjust to your database config):
     // const db = mysql.createConnection({ /* your db credentials */ });
     // db.query('INSERT INTO fingerprints (data) VALUES (?)', [fingerprint], (err) => {
     //   if (err) return res.status(500).json({ error: 'Failed to save fingerprint' });
     //   res.json({ success: true, message: 'Fingerprint saved' });
     // });
   
     res.json({ success: true, message: 'Fingerprint received' });
   });
   
   const PORT = 3000;
   app.listen(PORT, () => {
     console.log(`Server running on http://localhost:${PORT}`);
   });
   

4. Test it out

   • Start your Express server
   • Visit http://localhost:3000 in a browser
   • Check your server console—you should see the fingerprint logged there

Key Takeaway #

Browser fingerprinting relies on data only available in the user's browser, so the generation has to happen client-side. Your backend's role is to receive and store that data, not create it itself.

内容的提问来源于stack exchange，提问作者Abhinav Kinagi