Last updated on April 11, 2024
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 referrers panel in the CloudFront Console, which allows you to monitor the websites to make 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 theallowed_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.