Creating reliable, user-friendly, and secure websites necessitates accurately identifying visitors to prevent malicious activities. With stringent browser privacy settings and the prevalent use of ad blockers, this can be challenging, particularly if relying on third-party cookies or loading scripts externally.

Fingerprint’s device intelligence platform provides advanced visitor identification APIs, outperforming older, less effective methods. However, to achieve optimal identification accuracy, fully integrating these APIs into your website is crucial. If not, ad blockers, utilized by approximately 40% of online users, could interfere with your identification requests. Additionally, browsers are increasingly restricting third-party cookies, and a full integration additionally allows the setting of long-lasting first-party cookies for visitor identification.

We offer proxy integrations for major cloud providers such as Cloudflare and Azure Front Door to streamline the integration of Fingerprint’s Visitor Identification into your site. These proxies serve as intermediaries, handling identification and script requests between your site and our APIs through your cloud infrastructure.

This article overviews AWS CloudFront and Fingerprint’s APIs and explains how you can seamlessly integrate the two using our proxy integration for the most accurate visitor identification.

What is AWS CloudFront?

AWS CloudFront is a highly regarded content delivery network (CDN) service from Amazon Web Services aimed at improving web applications' speed, reliability, and security. With a network stretching across 550+ locations worldwide, it delivers content with low latency and high data transfer rates.

CloudFront's core mission is to accelerate content distribution, whether it's websites, streaming media, or API calls. It seamlessly integrates with other Amazon services, providing enhanced website security through traffic encryption and access controls. Additionally, CloudFront allows developers to execute code closer to their users using serverless edge computing. By leveraging CloudFront, developers can ensure that their applications are fast, secure, and highly performant, delivering an exceptional experience to end-users.

What is Fingerprint?

Fingerprint is a powerful device intelligence platform that helps businesses identify visitors on the web and mobile. Its primary purposes are preventing fraud, improving user experiences, and understanding website traffic.

Fingerprint visitor identification analyzes over 70 identification signals to generate highly accurate visitor identifiers. It can identify up to 99.5% of returning visitors using fingerprinting, fuzzy matching, and server-side techniques and assigns a unique visitor identifier that remains consistent for months or years.

In addition, Fingerprint’s Smart Signals provide real-time intelligence about visitors, including whether they are using a VPN, in incognito mode, or identified as a bot. This valuable data can create more intelligent workflows to secure websites.

The Benefits of Using a Proxy Integration

A proxy integration, such as the one provided by Fingerprint for CloudFront, solves the challenges of identifying visitors caused by strict browser privacy policies and ad blockers. It handles visitor identification requests directly from your site and offers additional advantages over loading the Fingerprint JavaScript agent from our CDN.

Enhanced Accuracy

Using the CloudFront proxy instead of the CDN version of Fingerprint improves precision and accuracy, particularly on browsers such as Safari or Firefox, known for their strict privacy features.

Cookie Longevity

Fingerprint does not solely rely on cookies; however, the user’s browser will now recognize any cookies used to identify your visitors as first-party, extending their lifespan and enhancing the longevity of visitor identifiers.

Ad Blocker Compatibility

Using the proxy enables the full functioning of the Fingerprint JS agent by allowing identification requests to come from the same site URL, making them resistant to most ad blockers.

Simplified Compliance

The integration script drops all the cookies sent from the origin website removing unnecessary information. Identification requests can be combined with AWS features like CloudWatch for additional insight and control. Additionally, its open-source code ensures easy verification and auditing to align with compliance requirements.

Scalability

Enjoy the benefits of a first-party device intelligence integration while serving all your customers, regardless of scale, across multiple subdomains and paths.

The Components of the Fingerprint CloudFront Proxy Integration

CloudFront Distribution: Regardless of whether your site runs on AWS CloudFront, a CloudFront distribution is necessary for the proxy integration. If your site already uses CloudFront, you can use the same distribution to maximize identification accuracy. If not, you can create a new CloudFront distribution specifically for proxy integration.

AWS Lambda Functions: The integration uses Lambda functions to proxy script loading and identification requests. Additionally, they will be used to update the integration, ensuring you have the latest fingerprinting client-side logic. The functions will be available on a specific path on your site, and the rest of your site will not be affected. There is also additional cache behavior that will enable the use of Lambda functions for proxying requests.

Fingerprint CloudFormation Stack: The Lambda functions and corresponding settings, such as execution role and cache policy, are provided as a CloudFormation application. The entire CloudFormation stack, as well as the code for the Lambda functions, are open-source and available on GitHub.

Setting Up the CloudFront Integration

Before you start setting up our CloudFront proxy integration, there are a few prerequisites.:

• To use AWS CloudFront you will need to have an AWS account.
• An existing CloudFront distribution that serves your site’s content OR a new CloudFront distribution configured to serve content on the same eTLD + 1 or any of its subdomains. We’ll cover setting up the CloudFront distribution further in this guide.
• A Fingerprint Enterprise account plan is required to use the CloudFront integration.

Setup Overview

Setting up the integration requires going through the following steps. This guide will go through each step in detail, but here they are at a high level.

1. Issue a Proxy Pre-Shared Secret in the dashboard.
2. Create path variables used by the AWS configuration and JS agent configuration on your website.
3. Create a new secret in the AWS Secrets Manager to store path variables and the Proxy Pre-Shared Secret.
4. Install the CloudFormation application containing all the necessary resources for the integration.
5. Configure the CloudFront distribution with the Lambda function and the cache behavior.
6. Configure the Fingerprint JS agent on your client side.

Step 1 - Issue a Proxy Pre-Shared Secret

First, you must issue a Proxy Pre-Shared Secret to authenticate requests from your Lambda Function.

1. Go to the Fingerprint dashboard and select your application.
2. In the left menu, click App Settings and switch to the API Keys tab at the top.
3. Click Create Proxy Key. (Ensure the Proxy Pre-Shared is selected in the pop-up modal.)
4. Give your new API key a name and click Create API Key.

This Proxy Pre-Shared key value will be used later as a secret variable.

Step 2 - Create Path Variables

Next, you need to set the path variables you will use throughout your AWS configuration and within the JS agent configuration on your website. In this guide, we will use readable values corresponding to the variable names just to keep things easier to follow:

FPJS_BEHAVIOR_PATH = "FPJS_BEHAVIOR_PATH";

FPJS_AGENT_DOWNLOAD_PATH = "FPJS_AGENT_DOWNLOAD_PATH";

FPJS_GET_RESULT_PATH = "FPJS_GET_RESULT_PATH";

However, the values you use in production should be random strings, such as:

FPJS_BEHAVIOR_PATH = "ore54guier";

FPJS_AGENT_DOWNLOAD_PATH = "vbcnkxb654";

FPJS_GET_RESULT_PATH = "5yt489hgfj";

This is because some ad blockers automatically block requests from any URL containing fingerprint-related terms like "fingerprint", "fpjs", "track", etc. Therefore, whenever you see a value like FPJS_BEHAVIOR_PATH in this guide, you should use your random value instead. Once you've determined these values, record them in a secure location.

Step 3 - Create a New Secret in the AWS Secrets Manager

Now you need to add these values as secrets in your AWS configuration.

1. Go to AWS Secrets Manager and click Store a new secret.

2. Choose Other type of secret as the secret type.

3. Add the 4 required values you’ve already created in the Key/value pairs section:

   • The Proxy Pre-Shared Secret key you created in Step 1 within the Fingerprint Dashboard must be stored in FPJS_PRE_SHARED_SECRET.
   • FPJS_BEHAVIOR_PATH, FPJS_AGENT_DOWNLOAD_PATH, and FPJS_GET_RESULT_PATH should be the values you decided in Step 2.

4. Click Next.
5. Specify the Secret name — it will be used further in the configuration. Click Next.
6. Leave Automatic Rotation disabled and click Next.
7. Click Store.
8. Your secret is created. Take note of the Secret name and which Region it was created in (see the upper-right corner of the screen.)

Step 4 - Install the CloudFormation Application

Next, you must deploy the provided CloudFormation application. Note: The Lambda functions that handle requests must be deployed to the us-east-1 region. Make sure that you’ve selected this region before deploying the application.

Go to the AWS application page to open the deployment dialog. Fill in the required values to the application settings and deploy the application to your AWS account.

• The DistributionId is the identifier of your CloudFront distribution.
• The SecretName is the name of the secret you created in Step 3.
• The SecretRegion is the region where the secret is stored e.g.: us-east-1.

This application creates the custom IAM roles that allow us to modify CloudFront distribution to keep the Lambda@Edge function current. You can review these policies in the SAM template.

After deployment, you will be redirected to the application page, where you can see a list of resources created by the application.

Open the Deployments tab and wait for the ”Create complete” status message.

The Status indicates the current state of deployment. It starts from “Review in progress” to “Create in progress” and finally, “Create complete”. If you see a different status (“Create failed,” “Rollback in progress,” “Rollback complete,” etc), please contact our support team.

⚠️ Do not disrupt the management function ⚠️

The management Lambda function (FingerprintProMgmtLambda) deployed alongside the main proxy function is responsible for updating the integration. It ensures visitor identification on your website keeps up with new browser releases and fingerprinting evasion techniques. An outdated integration can lead to lower accuracy or break visitor identification completely. Don't disable or delete the management function.

Once the application is fully deployed and has the status “Create complete,” you can click CloudFormation stack, switch to the Outputs tab, and find the names of created entities.

The key named LambdaFunctionName is the unique name of the created Lambda function.

The key named CachePolicyName is the unique name of the CloudFront cache policy, which will be applied in a cache behavior for Fingerprint requests.

Step 5 - Configure the CloudFront Distribution

At this point, you are ready to configure or create your CloudFront distribution.

Your website is not running on CloudFront

If your website is not running on CloudFront, you can create a new CloudFront distribution and website subdomain just for the proxy integration → Follow Step 5.0 to create a new CloudFront distribution.

This setup results in Safari cookie lifetime being limited to 7 days because your website and the proxy function will likely have different IP ranges. This is still an improvement over third-party cookies, which get blocked entirely by Safari, but we recommend serving your website and the proxy function using the same CloudFront distribution if possible.

Your website is already running on CloudFront

If your website is already running on CloudFront, you can use the same distribution and domain for the proxy integration. → Follow Step 5.1 to create a new origin.

This is the suggested configuration. Your website and the proxy function will share a domain and be served by the same CDN, from IP addresses in the same range. For Safari users, cookies will be saved in the browser for up to one year instead of 7 days.

Step 5.0 - Create a New CloudFront Distribution if Necessary

If your website is already running on CloudFront, you can use your existing CloudFront distribution, skip the following step, and start with Step 5.1.

If your website is not running on CloudFront, you can create a new CloudFront distribution for the proxy and set up a subdomain on your website that points to it, for example: metrics.yourwebsite.com

1. Go to your AWS Console and open CloudFront.

2. Click Create Distribution.

3. Set up the distribution's Origin according to Step 5.1 of this guide, then return to these steps.

4. Set up the distribution's Cache Behavior according to Step 5.2 of this guide, then return to these steps.

5. Click Create Distribution.

6. In your newly created distribution, inside General > Settings, click Edit.

7. Under Alternate domain name (CNAME) - optional click Add item.

8. Add an alternate domain to your distribution, for example, metrics.yourwebsite.com. You will need to add an SSL certificate for it.

   • To create the SSL certificate, click Request certificate. AWS Certificate Manager will open in a new tab.
   • Set the domain name to your alternate domain, for example, *.yourwebsite.com or metrics.yourwebsite.com.
   • Keep DNS validation as a way to prove ownership of the domain.
   • Click Request and then View certificate.
   • Use the CNAME name and CNAME value to create a subdomain CNAME record in the DNS settings of your domain. Do this using your DNS provider, which could be AWS but also any other provider such as GoDaddy, Netlify, DigitalOcean, or Vercel.

9. It will take a while for AWS to verify the ownership of the domain and issue the certificate. Feel free to continue with the rest of the setup and come back here later.

10. Once the certificate is issued, attach it to the distribution's alternate domain and click Save changes.

Your CloudFront distribution is now accessible from your website's subdomain, for example, metrics.yourwebsite.com. You will use it in Step 6 to configure the Fingerprint JS Agent. Continue now to Step 5.3.

Step 5.1 - Create a New Origin

1. Go to your CloudFront distribution, switch to the Origins tab, and click Create origin.

2. Fill required fields in the wizard:

   • Set the origin domain to fpcdn.io.

   • Set the protocol to HTTPS only.

   • Set minimum origin SSL protocol to TLSv1.2.

   • Set the name to fpcdn.io.

   • Add the following custom headers:

     • FPJS_SECRET_NAME is the name of the secret created in Step 3.
     • FPJS_SECRET_REGION is the region where the secret is stored, for example, us-east-1.

3. Finally, click Create origin.

Step 5.2 - Create a Cache Behavior

In this step, you will create a cache behavior to proxy requests to the Fingerprint API.

1. Go to your CloudFront distribution.

2. Switch to the Behaviors tab and click Create behavior.

3. Fill in the required fields in the wizard

   • Set the Path pattern to a value that matches all routes under FPJS_BEHAVIOR_PATH. For example, for FPJS_BEHAVIOR_PATH=random-path you need to use random-path/*.
   • Set Origin and origin groups to fpcdn.io.
   • Set the Viewer protocol policy to Redirect HTTP to HTTPS.
   • Set the Allowed HTTP methods to GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE.
   • Set Cache key and origin requests to Cache policy and origin request policy (recommended).
   • Set the Cache policy to a Custom policy named FingerprintProCDNCachePolicy-{id} (you can find the name of your cache policy on the AWS Stack’s output of the application).
   • Set Origin request policy to AllViewer.

4. Click Create behavior.

⚠️ Do not change the provided Cache Policy. ⚠️

It is intentionally configured with the minimum TTL of 0. Misconfiguring the policy could disrupt visitor identification and increase false positives (assigning the same visitor ID to different browsers).

Step 5.3 - Attach the Lambda Function to the Cache Behavior

1. Go to your AWS Lambda Applications and open the newly created application.
2. On the Overview tab, scroll down to Resources a click FingerprintProCloudfrontLambda.

3. Scroll down and switch to the Configuration tab.
4. On the left, click Triggers, then click Add trigger.
5. Select CloudFront as the source and click Deploy to Lambda@Edge.

6. Select an option to Configure new CloudFront trigger.*

   • Select your distribution.
   • Select the cache behavior you created in the previous step.
   • Set CloudFront event to Origin Request.
   • Check Include body.
   • Check Confirm deploy to Lambda@Edge.

7. Click Deploy.

It may take up to several minutes to add a trigger to the CloudFront distribution. Go to the General tab of your CloudFront distribution and check the Last modified time.

Step 6 - Configure the Fingerprint JavaScript Agent on Your Client

Next, you’ll use the path variables created in Step 2 to construct the agent-download and result-endpoint URLs.

Your website and proxy are behind the same CloudFront distribution

If your website and the proxy are behind the same CloudFront distribution, the JS Agent configuration will use randomized URLs inside your domain, for example:

NPM package

import * as FingerprintJS from "@fingerprintjs/fingerprintjs-pro";

// Initialize the agent at application startup.
const fpPromise = FingerprintJS.load({
  apiKey: "PUBLIC_API_KEY",
  scriptUrlPattern: [
    "<https://yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_AGENT_DOWNLOAD_PATH?apiKey=><apiKey>&version=<version>&loaderVersion=<loaderVersion>",
    FingerprintJS.defaultScriptUrlPattern, // Fallback to default CDN in case of error
  ],
  endpoint: [
    "<https://yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_GET_RESULT_PATH?region=us>",
    FingerprintJS.defaultEndpoint, // Fallback to default endpoint in case of error
  ],
});

CDN

const url =
  "<https://yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_AGENT_DOWNLOAD_PATH?apiKey=><PUBLIC_API_KEY>";
const fpPromise = import(url).then((FingerprintJS) =>
  FingerprintJS.load({
    endpoint: [
      "<https://yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_GET_RESULT_PATH?region=us>",
      FingerprintJS.defaultEndpoint, // Fallback to default endpoint in case of error
    ],
  })
);

Your website and proxy are not behind the same CloudFront distribution

If your website is not behind CloudFront and you have set up CloudFront distribution on your subdomain according to Step 5.0, the JS Agent configuration will use that subdomain to interact with Fingerprint, for example:

NPM package

import * as FingerprintJS from "@fingerprintjs/fingerprintjs-pro";

// Initialize the agent at application startup.
const fpPromise = FingerprintJS.load({
  apiKey: "PUBLIC_API_KEY",
  scriptUrlPattern: [
    "<https://metrics.yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_AGENT_DOWNLOAD_PATH?apiKey=><apiKey>&version=<version>&loaderVersion=<loaderVersion>",
    FingerprintJS.defaultScriptUrlPattern, // Fallback to default CDN in case of error
  ],
  endpoint: [
    "<https://metrics.yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_GET_RESULT_PATH?region=us>",
    FingerprintJS.defaultEndpoint, // Fallback to default endpoint in case of error
  ],
});

CDN

const url =
  "<https://metrics.yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_AGENT_DOWNLOAD_PATH?apiKey=><PUBLIC_API_KEY>";
const fpPromise = import(url).then((FingerprintJS) =>
  FingerprintJS.load({
    endpoint: [
      "<https://metrics.yourwebsite.com/FPJS_BEHAVIOR_PATH/FPJS_GET_RESULT_PATH?region=us>",
      FingerprintJS.defaultEndpoint, // Fallback to default endpoint in case of error
    ],
  })
);

If everything is configured correctly, you should receive data through your CloudFront distribution successfully.

Cost Calculation for AWS

You can use the AWS Calculator to estimate your expenses for your CloudFront distribution.

Lambda@Edge service

• The number of requests roughly equals visitor identification events multiplied by two. There are up to 2 requests for each visitor identification. The first request downloads the agent script, and the second calls the identification endpoint. The download agent request is cached. Caching the identification request is up to you, but most of our front-end libraries have a caching mechanism built-in.
• The duration of each request depends on your CloudFront availability settings. The typical duration for downloading the agent is 200ms, while for identification requests, it's 500ms.
• The amount of memory allocated is 128MB.

Secrets Manager

• The number of secrets is 1.
• The number of API calls is approximately 12 calls per hour per each used AWS region.

Additional costs for the CloudFront distribution

• Data transfer from CloudFront distribution to clients:

  • The agent’s size is about 36kB.
  • The identification request result is up to 1kB per request.

• Data transfer from clients to the CloudFront distribution:

  • The payload size for the identification requests is approximately 5-10kB.

Troubleshooting

When troubleshooting the integration, please provide our support team with the following information. Open your CloudFormation stack, go to the Events tab, and copy the contents of the Status reason column for any failed statuses.

Conclusion

Integrating CloudFront with Fingerprint significantly improves your ability to identify visitors on your website. With our integration, you can route Fingerprint API requests via a CloudFront proxy, ensuring that JavaScript agent requests and identification signals avoid possible blocks. With browsers enforcing stricter measures and the increased usage of ad blockers, maintaining unobstructed visitor identification processes is crucial.

If identification requests or signals are blocked, you risk losing crucial data for identifying potential threats or delivering smooth user experiences. However, our proxy integration allows you to fully utilize Fingerprint Pro's ability to identify 99.5% of visitors. This ensures you gain the essential data necessary for providing both outstanding and secure experiences to your users.

For additional details, check out our comprehensive guide on the CloudFront proxy integration or browse our full array of integrations for various cloud services. To understand how a proxy integration can enhance the accuracy of your visitor identification, feel free to reach out to our sales team.