Bot Detection: Browser Fingerprinting Guide

TL;DR

Browser fingerprinting identifies bots by collecting unique data about a user’s browser and device. This creates a ‘fingerprint’ that distinguishes real users from automated traffic, even if they change IP addresses or use cookies. This guide shows you how to implement basic bot detection using JavaScript.

1. Understanding Browser Fingerprinting

Bots often try to hide their identity by spoofing user agents and other easily detectable characteristics. Browser fingerprinting goes deeper, collecting information like:

• User Agent: The browser’s name and version (but this is unreliable on its own).
• Installed Fonts: A list of fonts available to the browser.
• Timezone: The user’s timezone setting.
• Browser Plugins: Installed plugins like Flash or Java (decreasingly common).
• Canvas Fingerprinting: Rendering a hidden image and using subtle differences in how browsers draw it to create a unique identifier.
• Web Audio Fingerprinting: Similar to canvas fingerprinting, but uses audio processing.
• Hardware Concurrency: The number of CPU cores available.

Combining these data points creates a more reliable fingerprint than relying on any single piece of information.

2. Collecting Browser Data with JavaScript

You’ll need JavaScript to gather the necessary browser data. Here’s an example:

function getBrowserFingerprint() {
  const fingerprint = {};
  fingerprint.userAgent = navigator.userAgent;
  fingerprint.fonts = window.getComputedStyle(document.body).fontFamily;
  fingerprint.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  // Add more data points here (plugins, canvas fingerprinting etc.)
  return JSON.stringify(fingerprint);
}

This function creates a JavaScript object containing the collected browser information and converts it to a JSON string.

3. Implementing Canvas Fingerprinting

Canvas fingerprinting is more complex but highly effective. Here’s a simplified example:

function getCanvasFingerprint() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = '16px Arial';
  ctx.fillText('test', 0, 0);
  return ctx.getImageData(0, 0, canvas.width, canvas.height).data.toString();
}

This code draws text on a hidden canvas and converts the pixel data to a string. Differences in rendering across browsers create unique fingerprints.

4. Sending Data to Your Server

You need to send the collected fingerprint data to your server for analysis. Use an AJAX request (e.g., using fetch or XMLHttpRequest):

async function sendFingerprintToServer(fingerprint) {
  try {
    const response = await fetch('/api/bot-detection', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ fingerprint }) // Send the fingerprint data
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
  } catch (error) {
    console.error('Error sending fingerprint:', error);
  }
}

Replace '/api/bot-detection' with your server endpoint.

5. Server-Side Analysis and Bot Detection

1. Database Storage: Store the fingerprints in a database (e.g., PostgreSQL, MySQL).
2. Hashing: Hash the fingerprint data before storing it for security. Use a strong hashing algorithm like SHA-256.
3. Similarity Comparison: When a new fingerprint arrives, compare it to existing fingerprints using a similarity metric (e.g., Jaccard index). A high degree of similarity suggests a bot.
4. Thresholding: Set a threshold for the similarity score. Fingerprints exceeding this threshold are flagged as potential bots.
5. Machine Learning (Optional): Train a machine learning model to classify fingerprints as either human or bot based on historical data.

6. Considerations and Limitations

• Privacy: Be transparent about collecting browser data and comply with privacy regulations (e.g., GDPR).
• False Positives: Browser updates, extensions, or ad blockers can alter fingerprints, leading to false positives.
• Evolving Bot Techniques: Bots are constantly evolving to evade detection. Regularly update your fingerprinting techniques and analysis methods.
• Performance Impact: Complex fingerprinting (e.g., canvas) can impact page load time. Optimize your code for performance.