Content Security Policy (CSP)

If you have a Content Security Policy on your website, it can block the JS agent. Add the following directives to your policy to unblock the JS agent:

script-src https://fpcdn.io;
connect-src https://*.fpapi.io https://api.fpjs.io https://*.api.fpjs.io;
prefetch-src https://*.fpapi.io https://api.fpjs.io https://*.api.fpjs.io;

script-src https://fpnpmcdn.net;
connect-src https://*.fpapi.io https://api.fpjs.io https://*.api.fpjs.io;
prefetch-src https://*.fpapi.io 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://*.fpapi.io https://*.api.fpjs.io;
prefetch-src https://*.fpapi.io https://*.api.fpjs.io;

default-src 'self';
connect-src 'self' example.com https://*.fpapi.io https://*.api.fpjs.io;
prefetch-src https://*.fpapi.io 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://*.fpapi.io https://api.fpjs.io https://*.api.fpjs.io;
      prefetch-src 'self' https://*.fpapi.io 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://tls-use1.fpapi.io',
})

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

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

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://*.fpapi.io https://fp.yourdomain.com;
prefetch-src https://*.fpapi.io 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;
prefetch-src https://tls.yourdomain.com https://api.fpjs.io https://*.api.fpjs.io;