NPM Module

Install

1

npm i @botbye/client

1

yarn add @botbye/client

Configuration

Call initPhishing with your Phishing Project client-key:

1
2
3
4
5
6

import { initPhishing } from "@botbye/client";

await initPhishing({
  // Use your Phishing Project client-key
  clientKey: "00000000-0000-0000-0000-000000000000"
});

Catchers (Optional)

To inject catchers onto your site, await the API and then call the getCatcher method.

1
2
3
4
5
6
7
8

import { initPhishing } from "@botbye/client";

const api = await initPhishing({
  // Use your Phishing Project client-key
  clientKey: "00000000-0000-0000-0000-000000000000"
});

const catcherElement = await api.getCatcher();

Insert catcherElement into the site's DOM.

1
2
3

const someForm = document.querySelector('#form');

someForm.append(catcherElement);

getCatcher options

type

Which of the two catchers to build, suited to the different ways attackers host a cloned page:

• OBJECT (default). An embedded-resource catcher that carries its own detection logic. It keeps working even when the attacker copies every asset of your page and re-serves it from their own infrastructure — it still initiates the callback that reveals the hosting domain.

• PNG. An invisible image loaded from your origin. It is the lightest option, but it only fires while the cloned page still references the image from your origin — that is, when the attacker leaves resource links pointing back at your site.

We recommend using both catcher types and placing them in different parts of the page. Each type fires in a different cloning scenario, so together they cover both attackers who keep references to your origin and those who copy every resource onto their own infrastructure. Spreading catchers across the page also raises the chance that at least one is carried over when an attacker copies only a part of your HTML.

1
2
3
4
5

// SVG catcher (default)
const svgCatcher = await api.getCatcher({ type: "OBJECT" });

// PNG catcher
const pngCatcher = await api.getCatcher({ type: "PNG" });

skipExecution

By default, a catcher also carries a small script alongside the detection element. When BotBye! confirms a phishing environment, this script lets it deliver an active response — for example, warning the visitor that they are on a fraudulent page and should leave it. Pass skipExecution: true to insert only the detection element, without that script:

1
2
3
4

const catcherElement = await api.getCatcher({
  type: "PNG",
  skipExecution: true
});

url

If you are using Server-Side Integration to hide the BotBye! domain, url points the catcher at your own proxying endpoint instead of the BotBye domain.

The url must match the type: with type: "OBJECT" point it at your SVG catcher endpoint, and with type: "PNG" at your PNG catcher endpoint. The Server-Side Integration guide describes how to expose those endpoints.

1
2
3
4
5

// SVG catcher served from your own domain
const catcherElement = await api.getCatcher({
  type: "OBJECT",
  url: "https://mydomain.com/svg-catcher"
});

1
2
3
4
5

// PNG catcher served from your own domain
const catcherElement = await api.getCatcher({
  type: "PNG",
  url: "https://mydomain.com/png-catcher"
});