Introducing Edgio Applications v7Find out what's new.
Edgio
Edgio

Migrating from Amazon CloudFront Functions to Edge Functions

This guide offers a high-level overview and illustrative examples for migrating from Amazon CloudFront Functions to Edgio Edge Functions. It is designed to help developers familiar with Amazon CloudFront Functions understand the transition to Edge Functions by offering sample code for a general understanding of the migration process.

Function Signature

  • Amazon CloudFront: async function handler(event) { ... }
  • Edgio: export async function handleHttpRequest(request, context) { ... }
To convert from a CloudFront function to an Edgio Edge function, you need to make the following changes:
  • Rename the function from handler to handleHttpRequest and export it.
  • Change the function arguments from event to request and context.
  • Adjust any references to specific CloudFront properties or methods to their equivalent Edgio counterparts. See Edge Function parameters.
  • Return a Response|Promise<Response> instance instead of a CloudFront-to-viewer HTTP response object.

Origin Configuration

In order to fetch content from an origin, you need to specify the origin in edgio.config.js and include it in the fetch() call in the edge function. See origin requests using fetch() for configuration requirements.

Examples

URL Redirect Based on Country

The following example shows how to redirect users from a specific country to a different URL. The client’s geolocation information is made available in the context.geo object.

CloudFront Function Snippet

Original CloudFront Function code
JavaScript
1async function handler(event) {
2 const request = event.request;
3 const headers = request.headers;
4 const host = request.headers.host.value;
5 const country = Symbol.for('DE'); // Choose a country code
6 const newurl = `https://${host}/de/index.html`; // Change the redirect URL to your choice
7
8 if (headers['cloudfront-viewer-country']) {
9 const countryCode = Symbol.for(headers['cloudfront-viewer-country'].value);
10 if (countryCode === country) {
11 const response = {
12 statusCode: 302,
13 statusDescription: 'Found',
14 headers: {location: {value: newurl}},
15 };
16
17 return response;
18 }
19 }
20 return request;
21}

Edge Function Equivalent

JavaScript
1export async function handleHttpRequest(request, context) {
2 const headers = request.headers;
3 const country = 'DE'; // Choose a country code
4 const newUrl = `${request.url}/${country}`; // Change the redirect URL to your choice
5
6 if (context.geo.country === country) {
7 return new Response(null, {
8 status: 302,
9 statusText: 'Found',
10 headers: {
11 location: newUrl,
12 },
13 });
14 }
15
16 return fetch(request.url, {
17 edgio: {origin: 'echo'},
18 });
19}

Add Client IP to Request

The following example shows how to add the client’s IP address to the request headers. The client’s IP address is made available in the context.client object.

CloudFront Function Snippet

Original CloudFront Function code
JavaScript
1async function handler(event) {
2 var request = event.request;
3 var clientIP = event.viewer.ip;
4
5 //Add the true-client-ip header to the incoming request
6 request.headers['true-client-ip'] = {value: clientIP};
7
8 return request;
9}

Edge Function Equivalent

JavaScript
1import '../../utils/polyfills/URL';
2
3export async function handleHttpRequest(request, context) {
4 // Retrieve the client's IP address from the context object
5 const clientIP = context.client.dst_addr;
6
7 // Create a new request object to make it mutable
8 const newRequest = new Request(request.url, request);
9
10 // Add the true-client-ip header to the incoming request
11 newRequest.headers.set('true-client-ip', clientIP);
12
13 // Continue with the modified request
14 return fetch(newRequest, {
15 edgio: {origin: 'echo'},
16 });
17}

Add Security Headers to Response

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. The following example shows how to add CSP headers to the response.

CloudFront Function Snippet

Original CloudFront Function code
JavaScript
1async function handler(event) {
2 const response = event.response;
3 const headers = response.headers;
4
5 // Set HTTP security headers
6 // Since JavaScript doesn't allow for hyphens in variable names, we use the dict["key"] notation
7 headers['strict-transport-security'] = {
8 value: 'max-age=63072000; includeSubdomains; preload',
9 };
10 headers['content-security-policy'] = {
11 value:
12 "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'; frame-ancestors 'none'",
13 };
14 headers['x-content-type-options'] = {value: 'nosniff'};
15 headers['x-frame-options'] = {value: 'DENY'};
16 headers['x-xss-protection'] = {value: '1; mode=block'};
17 headers['referrer-policy'] = {value: 'same-origin'};
18
19 // Return the response to viewers
20 return response;
21}

Edge Function Equivalent

JavaScript
1export async function handleHttpRequest(request, context) {
2 // Fetch the response from the 'echo' origin
3 const response = await fetch(new Request(request.url, request), {
4 edgio: {
5 origin: 'echo',
6 },
7 });
8
9 // Set HTTP security headers
10 response.headers.set(
11 'strict-transport-security',
12 'max-age=63072000; includeSubdomains; preload'
13 );
14 response.headers.set(
15 'content-security-policy',
16 "default-src 'none'; img-src 'self'; script-src 'self'; style-src 'self'; object-src 'none'; frame-ancestors 'none'"
17 );
18 response.headers.set('x-content-type-options', 'nosniff');
19 response.headers.set('x-frame-options', 'DENY');
20 response.headers.set('x-xss-protection', '1; mode=block');
21 response.headers.set('referrer-policy', 'same-origin');
22
23 // Return the response to the client
24 return response;
25}