Integrating custom bot detection into frictionless captcha (#1282)

* Integrating custom bot detection into frictionless captcha

* Tidying up build

* Removing context provider

* Resolving frictionless deps

* package lock fix

* Adding index.ts file to src in detector

* typo fix

packages/detector/package.json

@@ -5,9 +5,9 @@
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 0",
         "lint:fix": "echo \"Not linting @prosopo/obf-bot\" && exit 0",
-        "lint": "echo \"Not linting @prosopo/obf-bot\" && exit 0"
+        "lint": "echo \"Not linting @prosopo/obf-bot\" && exit 0",
+        "build": "tsc"
     },
-    "dependencies": {},
     "devDependencies": {
         "typescript": "5.3.2"
     },

packages/detector/src/index.d.ts

@@ -0,0 +1,58 @@
+export function isBot(): Promise<{
+    fingerprint: {
+        resistance:
+            | {
+                  privacy: undefined
+                  security: undefined
+                  mode: undefined
+                  extension: undefined
+                  engine: any
+              }
+            | undefined
+        headlessFeaturesFingerprint:
+            | {
+                  likeHeadlessRating: number
+                  headlessRating: number
+                  stealthRating: number
+                  systemFonts: string
+                  platformEstimate: any[]
+                  chromium: boolean
+                  likeHeadless: {
+                      noChrome: boolean
+                      hasPermissionsBug: boolean
+                      noPlugins: boolean
+                      noMimeTypes: boolean
+                      notificationIsDenied: boolean
+                      hasKnownBgColor: boolean
+                      prefersLightColor: any
+                      uaDataIsBlank: boolean
+                      pdfIsDisabled: boolean
+                      noTaskbar: boolean
+                      hasVvpScreenRes: boolean
+                      hasSwiftShader: any
+                      noWebShare: any
+                      noContentIndex: boolean
+                      noContactsManager: boolean
+                      noDownlinkMax: boolean
+                  }
+                  headless: {
+                      webDriverIsOn: any
+                      hasHeadlessUA: any
+                      hasHeadlessWorkerUA: any
+                  }
+                  stealth: {
+                      hasIframeProxy: boolean
+                      hasHighChromeIndex: any
+                      hasBadChromeRuntime: boolean
+                      hasToStringProxy: boolean
+                      hasBadWebGL: any
+                  }
+              }
+            | undefined
+    }
+    isBotBotD: any
+    botScore: any
+    isBot: boolean
+    botType: any
+}>
+//# sourceMappingURL=index.d.ts.map

packages/detector/tsconfig.json

@@ -0,0 +1,8 @@
+{
+    "extends": "../../tsconfig.esm.json",
+    "compilerOptions": {
+        "rootDir": "./src",
+        "outDir": "./dist"
+    },
+    "include": ["src"]
+}

packages/procaptcha-frictionless/package.json

@@ -34,7 +34,7 @@
         "> 0.5%, last 2 versions, not dead"
     ],
     "dependencies": {
-        "@fingerprintjs/botd": "^1.9.0",
+        "@prosopo/detector": "1.0.2",
         "@prosopo/procaptcha-pow": "1.0.2",
         "@prosopo/procaptcha-react": "1.0.2",
         "@prosopo/types": "1.0.2",

packages/procaptcha-frictionless/src/ProcaptchaFrictionless.tsx

@@ -14,27 +14,36 @@
 import { Procaptcha } from '@prosopo/procaptcha-react'
 import { ProcaptchaPlaceholder } from '@prosopo/web-components'
 import { ProcaptchaPow } from '@prosopo/procaptcha-pow'
-import { ProcaptchaProps } from '@prosopo/types'
-import { load } from '@fingerprintjs/botd'
 import { useEffect, useState } from 'react'
+import { BotDetectionFunction, ProcaptchaFrictionlessProps } from '@prosopo/types'
+import { isBot } from '@prosopo/detector'
 
-export const ProcaptchaFrictionless = ({ config, callbacks }: ProcaptchaProps) => {
-    // Use state to manage which component to render
+const customDetectBot: BotDetectionFunction = async () => {
+    return await isBot().then((result) => {
+        const bot = result.isBot
+        return { bot }
+    })
+}
+
+export const ProcaptchaFrictionless = ({
+    config,
+    callbacks,
+    detectBot = customDetectBot,
+}: ProcaptchaFrictionlessProps) => {
     const [componentToRender, setComponentToRender] = useState(<ProcaptchaPlaceholder darkMode={config.theme} />)
 
     useEffect(() => {
-        const detectBot = async () => {
-            const botd = await load()
-            const result = botd.detect()
+        const detectAndSetComponent = async () => {
+            const result = await detectBot()
             if (result.bot) {
                 setComponentToRender(<Procaptcha config={config} callbacks={callbacks} />)
             } else {
                 setComponentToRender(<ProcaptchaPow config={config} callbacks={callbacks} />)
             }
         }
 
-        detectBot()
-    }, [config, callbacks])
+        detectAndSetComponent()
+    }, [config, callbacks, detectBot])
 
     return componentToRender
 }

packages/procaptcha-frictionless/tsconfig.json

@@ -3,13 +3,17 @@
     "compilerOptions": {
         "rootDir": "./src",
         "outDir": "./dist",
-        "lib": ["es6", "dom"]
+        "lib": ["es6", "dom"],
+        "allowJs": true
     },
     "include": ["src", "src/**/*.json", "src/index.html"],
     "references": [
         {
             "path": "../../dev/config"
         },
+        {
+            "path": "../detector"
+        },
         {
             "path": "../procaptcha-react"
         },

packages/types/src/index.ts

@@ -18,5 +18,6 @@ export * from './datasets/index.js'
 export * from './provider/index.js'
 export * from './procaptcha/index.js'
 export * from './procaptcha-bundle/index.js'
+export * from './procaptcha-frictionless/index.js'
 export { default as networks } from './networks/index.js'
 export type { Hash, AccountId } from '@prosopo/captcha-contract/types-arguments'

packages/types/src/procaptcha-frictionless/index.ts

@@ -0,0 +1,14 @@
+// Copyright 2021-2024 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export * from './props.js'

packages/types/src/procaptcha-frictionless/props.ts

@@ -0,0 +1,23 @@
+// Copyright 2021-2024 Prosopo (UK) Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { ProcaptchaProps } from '../procaptcha/props.js'
+
+export type BotDetectionFunction = () => Promise<{ bot: boolean }>
+
+/**
+ * The props for the Procaptcha Frictionless component.
+ */
+export interface ProcaptchaFrictionlessProps extends ProcaptchaProps {
+    detectBot?: BotDetectionFunction
+}