Validate Referrer Headers using CloudFront Function

Amazon CloudFront, a content delivery network (CDN), lets you distribute content with low latency and high data transfer speeds. One of its many features is the ability to create CloudFront functions, which are lightweight functions that can manipulate HTTP requests and responses. This article will discuss creating a CloudFront function to validate Referrer headers.

Referrer Headers

Referrer headers are an essential part of HTTP requests, as they indicate the webpage’s address linked to the resource being requested. By validating these headers, you can add an extra layer of security to your application, preventing unauthorized access and protecting your resources from potential threats.

Cost Optimization

Validating referrer headers can also help optimize costs. For instance, you can prevent external sites from hotlinking content from your CloudFront CDN. Hotlinking is when one website uses things like pictures or videos from another website directly on its site. This can increase data transfer costs for the site hosting the resources. By validating the Referrer headers, you can ensure that only authorized sites can access and display your content, potentially saving data transfer costs.

Monitoring with Top Referrer Panel

AWS provides a Top Referrer panel in the CloudFront Console, which allows you to monitor the websites making requests to your CloudFront distribution. This panel displays the top 25 referrers over a specified period. By monitoring this panel, you can gain insights into which sites are accessing your content the most and take the appropriate action if necessary.

Implementation Steps

1. Go to CloudFront → Functions. Click the “Create function” button.

  • Name: validate-referrer-headers
  • Description: CloudFront function to validate Referrer headers
  • Runtime: cloudfront-js-2.0
  • Click the “Create function” button.

2. In the function code, you need to write logic to validate the Referrer headers. Here’s a basic example. Feel free to modify this based on your requirements:

This JavaScript function, handler, is designed to validate the Referer header of HTTP requests in a CloudFront distribution. Here’s a brief explanation:

  • It first extracts the request and headers from the event object.
  • It defines a list of allowed_domains that are permitted to access the content.
  • If the Referer header exists in the request, it checks whether the domain in the Referer is in the allowed_domains list.
  • If the Referer is not in the allowed_domains list, it returns a 403 Forbidden response, indicating that hotlinking is not allowed.
  • If the Referer header doesn’t exist, or if it’s in the allowed_domains list, it allows the request to proceed by returning the original request.

3. After writing the function code, click on “Test” to ensure it works as expected. If the tests pass, click on “Publish” to deploy the function.

4. Navigate to the Publish pane.

5. Click the “Publish function” button.
6. Associated Distributions. You need to associate the function with a CloudFront distribution. Navigate to the “Distributions” section, select your distribution, and add the function to the “Function associations” section.

Function Testing Procedure

To validate the effectiveness of your function, you can conduct a test by utilizing an image from your distribution and uploading it to an external site. In this particular scenario, I will employ my personal website as the platform for uploading the image sourced from the established distribution. This process will allow us to observe the function’s response when interacting with authorized and unauthorized domains.

Allowed:

In this scenario, the image is uploaded from a domain that is included in the allowed_domains list of our CloudFront function. Since the domain is authorized, the function allows the request to proceed and the image is displayed successfully.

Not Allowed

In contrast, if the image is uploaded from a domain that is not in the allowed_domains list, the function identifies this as an unauthorized request. As a result, the function blocks the request, and the image is not displayed.

Leave a Reply

Your email address will not be published. Required fields are marked *