🌐Browser SDK

This page describes how to install and use the JavaScript client-side SDK

Introduction

The Browser SDK is a central component of the FoxHat integration, and provides device fingerprinting, behavioral analysis, and client-side event monitoring.

All the client-side SDKs, have two main purposes:

Create request tokens. Generate a unique token to be passed to your server and used when calling FoxHat's Risk and Filter APIs.

Features

• Browser bot detection
• Headless browser detection
• Incognito detection
• VPN detection (Soon)

  Detectable Automation Tools & Frameworks

Tool/Framework	Supported
Headless Browsers (Chrome, Firefox)	✓
seleniumHQ/selenium	✓
microsoft/playwright	✓
ariya/phantomjs	✓
segmentio/nightmare	✓
laurentj/slimerjs	✓

Detectable Stealth Plugins

Plugin	Supported
berstend/puppeteer-extra/packages/puppeteer-extra-plugin-stealth	✓
microlinkhq/browserless	✓
ultrafunkamsterdam/undetected-chromedriver	✓
MeiK2333/pyppeteer_stealth	✓

Installation

The recommended way of installing (https://www.npmjs.com/package/foxhat-javascript-sdk) in your app is via the NPM package and using either npm or yarn:

npm install foxhat-javascript-sdk

Usage

Initializing the SDK

Once installed, the SDK needs to be configured using your Publishable Key, which can be found in the Dashboard .

const foxtHatInstance = new FoxHat(apiKey, 'V1', true)

Parameters:

• apiKey: Your unique API key provided by FoxHat, required for SDK initialization.
• debugMode: The second parameter (true) enables debug mode, which can be helpful during development.

Creating tokens

Once the SDK is initialized, you can retrieve a security token necessary for making authorized API requests. Here's how to obtain, display, and pass the token to your request headers:

:::tip[]

👍Adblock-safe

Many analytics solution rely on the client-side SDK performing outgoing API requests, which results in them getting blocked by adblockers and privacy plugins. FoxHat.js won't make such requests, resulting in much higher accuracy.
:::

:::info[]

Tokens don't live forever

A new token value should to be generated for each request to your backend. A request token will expire after 30 seconds and should only be used during a single request to your backend. The reason for this is that FoxHat.js continuously monitors behavior in the user session and the data will need to be fresh when processed by the FoxHat APIs. A scalable approach is to implement the token generation as a client-side middleware which generates a new request token with each request to your backend.
:::

    try {
    const token = await foxtHatInstance.token();
     // `token` contains a unique, one-time use, string that should be passed
     // in the request to the server, eg. in a form post.
    await axios.post("https://foxhat.demo", {
        message,
        // 4. Forward the token
        _foxhat: token,
    });
} catch (error) {
    console.error("Error:", error);
}