Content Security Policy (CSP)

If you have a Content Security Policy on your website, it can block the JS agent. JS agent will throw a special error in this case:

const fpPromise = FingerprintJS.load({ apiKey: '<<browserToken>>' })

try {
  const fp = await fpPromise
  await fp.get()
} catch (error) {
  if (error.message === FingerprintJS.ERROR_CSP_BLOCK) {
    // Your CSP blocks the JS agent
    // Can be thrown by both `load` and `get`
  }
}

Add the following directives to your policy to unblock the JS agent:

script-src https://fpcdn.io;
connect-src https://*.fptls.com https://api.fpjs.io https://*.api.fpjs.io;

script-src https://fpnpmcdn.net;
connect-src https://*.fptls.com https://api.fpjs.io https://*.api.fpjs.io;

If you already have such directives in your policy, add the given addresses to the directives. An example of combining a couple of policies:

default-src 'self';
connect-src 'self' example.com;
style-src 'self' 'unsafe-inline';

connect-src https://*.fptls.com https://*.api.fpjs.io;

default-src 'self';
connect-src 'self' example.com https://*.fptls.com https://*.api.fpjs.io;
style-src 'self' 'unsafe-inline';

An example of an HTML code with a Content Security Policy that lets JS agent work:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Security-Policy" content="
      default-src 'self';
      script-src 'self' https://fpcdn.io;
      connect-src 'self' https://*.fptls.com https://api.fpjs.io https://*.api.fpjs.io;
    ">
  </head>
  ...
</html>

Automatic updates

The endpoints used by JS agent may change with an automatic update. If you use a forbidding CSP like shown above, such endpoint changes will break the JS agent. Lock the endpoints in your JS agent configuration to avoid the automatic endpoint changes:

FingerprintJS.load({
  apiKey: '<<browserToken>>',
+ endpoint: 'https://api.fpjs.io',
+ tlsEndpoint: 'https://use1.fptls.com',
})

FingerprintJS.load({
  apiKey: '<<browserToken>>',
+ endpoint: 'https://eu.api.fpjs.io',
+ tlsEndpoint: 'https://eun1.fptls.com',
})

FingerprintJS.load({
  apiKey: '<<browserToken>>',
+ endpoint: 'https://ap.api.fpjs.io',
+ tlsEndpoint: 'https://aps1.fptls.com',
})

Subdomain setup

If you've set up JS agent to use a custom endpoint, add the endpoint to the policy instead of the built-in endpoint. For example, if your custom endpoint is https://fp.yourdomain.com, your policy is:

script-src https://fpcdn.io;
connect-src https://*.fptls.com https://fp.yourdomain.com;

If you use a custom tlsEndpoint, add the endpoint to the policy instead of the built-in endpoint. For example, if your custom endpoint is https://tls.yourdomain.com, your policy is:

script-src https://fpcdn.io;
connect-src https://tls.yourdomain.com https://api.fpjs.io https://*.api.fpjs.io;