Attach fingerprints with chrome debug protocol using `chrome-remote-interface`

[EmpiresHQ]

Describe the feature
I were thinking of adding a attachFingerprintWithCDP method which would use objects provided by chrome-remote-interface. This way the suite could be easily usable with raw chrome implementations avoiding puppeteer/playwright

Motivation
I am using a custom chrome setup with raw CDP protocol and would like to swap my custom evasions with fingerprint-suite

Constraints
Not really, it seems fairly straightforward. The only global change would be in adding following packages to devDependencies:

 "@types/chrome-remote-interface": "^0.33.3"

The idea is to add a method looking approximately like that:

import CDP from "@types/chrome-remote-interface";

async attachFingerprintToCDP(
  page: CDP.StableDomains["Page"],
  network: CDP.StableDomains["Network"],
  emulation: CDP.StableDomains["Emulation"]
  browserFingerprintWithHeaders: BrowserFingerprintWithHeaders,
): Promise<void> {
   ...
   await network.setUserAgentOverride(userAgent);
   ....
   await network.setExtraHTTPHeaders(
      this.onlyInjectableHeaders(headers, browserVersion)
   );
   ...
  await emulation.emulateMediaFeatures(
     [{ name: 'prefers-color-scheme', value: 'dark' }]
   );
  await page.addScriptToEvaluateOnNewDocument(
     this.getInjectableFingerprintFunction(enhancedFingerprint)
  );
}

Basically puppeteer does exactly the same using the chain of methods:

https://github.com/puppeteer/puppeteer/blob/main/packages/puppeteer-core/src/cdp/EmulationManager.ts#L433
https://github.com/puppeteer/puppeteer/blob/main/packages/puppeteer-core/src/cdp/NetworkManager.ts#L164
https://github.com/puppeteer/puppeteer/blob/main/packages/puppeteer-core/src/cdp/FrameManager.ts#L284

Coulda make a PR for that if above would make sense

[barjin]

Hello @EmpiresHQ, and thank you for your interest in this project!

I see you figured out how the injecting functions work for Puppeteer / Playwright (good job!)
I think adding one for CDP sounds like a valid idea 👍 You can draft a PR for this, and we can discuss this feature further there.

Thank you!

[EmpiresHQ]

I have actually manged to get own CDP injector working with master, however it is sad that onlyInjectableHeaders and _enhaceFingerprint are private - had to re-declare them. Think it could be a reasonable option to make them public without adding CDP injector to the code at all (and EnhancedFingerprint type too)

For now my impl looks like that:

import type CDP from "chrome-remote-interface"
import {
  FingerprintGenerator,
  FingerprintGeneratorOptions,
  type Fingerprint,
} from "fingerprint-generator"
import { FingerprintInjector } from "fingerprint-injector"

interface EnhancedFingerprint extends Fingerprint {
  userAgent: string
  historyLength: number
}
type AttachFingerprintToCDPparams = {
  page: CDP.StableDomains["Page"]
  network: CDP.StableDomains["Network"]
  emulation: CDP.StableDomains["Emulation"]
}

export const attachFingerprintToCDP = async (
  { page, network, emulation }: AttachFingerprintToCDPparams,
  fingerprintOptions?: Partial<FingerprintGeneratorOptions>,
): Promise<void> => {
  const generator = new FingerprintGenerator()
  const fingerprintWithHeaders = generator.getFingerprint(
    fingerprintOptions ?? {},
  )
  const { fingerprint, headers } = fingerprintWithHeaders
  const enhancedFingerprint = _enhanceFingerprint(fingerprint)
  const { screen, userAgent } = enhancedFingerprint

  await network.setUserAgentOverride({ userAgent })

  page.setDeviceMetricsOverride({
    screenHeight: screen.height,
    screenWidth: screen.width,
    width: screen.width,
    height: screen.height,
    mobile: /phone|android|mobile/i.test(userAgent),
    screenOrientation:
      screen.height > screen.width
        ? { angle: 0, type: "portraitPrimary" }
        : { angle: 90, type: "landscapePrimary" },
    deviceScaleFactor: screen.devicePixelRatio,
  })

  await network.setExtraHTTPHeaders({
    headers: onlyInjectableHeaders(headers),
  })

  await emulation.setEmulatedMedia({
    features: [{ name: "prefers-color-scheme", value: "dark" }],
  })

  await page.addScriptToEvaluateOnNewDocument({
    source: new FingerprintInjector().getInjectableScript(fingerprintWithHeaders),
  })
}

const _enhanceFingerprint = (fingerprint: Fingerprint): EnhancedFingerprint => {
  const { navigator } = fingerprint

  return {
    ...fingerprint,
    userAgent: navigator.userAgent,
    historyLength: Math.floor(Math.random() * (6 - 2) + 2),
  }
}

const onlyInjectableHeaders = (
  headers: Record<string, string>,
): Record<string, string> => {
  const requestHeaders = [
    "accept-encoding",
    "accept",
    "cache-control",
    "pragma",
    "sec-fetch-dest",
    "sec-fetch-mode",
    "sec-fetch-site",
    "sec-fetch-user",
    "upgrade-insecure-requests",
  ]

  return requestHeaders.reduce<Record<string, string>>((acc, n) => ({
    ...acc,
    [n]: headers[n] ?? "",
  }), {})
}

[jvarela07]

Any update on this?