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;
Updated 3 months ago