Edgio
Edgio Console

Header Manipulation

Edge functions can be used to manipulate the request and response headers of a request. This can be useful for adding security headers, modifying the cache behavior, or adding custom headers to requests.

Basic Header Manipulation

The Request and Response objects in the Fetch API provide methods for accessing and modifying the request and response headers. These methods can be used to add, remove, or modify the headers either before or after the request is sent to the origin.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  })

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2

3  // Fetch the response from the origin
4  const response = await fetch(new Request(request.url, request), {
5    edgio: {
6      origin: 'web',
7    },
8  });
9

10  // Add a custom header to the response
11  response.headers.set('x-custom-header', 'foo');
12

13  // Return the response to the client
14  return response;
15}

Original Client IP

The original client IP address can be retrieved from the context object in an edge function. This can be useful for logging or security purposes, such as adding the client IP address to the request headers.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  })

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2  // Retrieve the client's IP address from the context object
3  const clientIP = context.client.dst_addr;
4

5  const newRequest = new Request(request.url, request);
6

7  // Add the true-client-ip header to the incoming request
8  newRequest.headers.set('true-client-ip', clientIP);
9

10  // Continue with the modified request to the origin
11  return fetch(newRequest, {
12    edgio: { origin: 'web' },
13  });
14}

Content Security Policy

The Content Security Policy (CSP) is a security standard that can be used to mitigate the risk of cross-site scripting (XSS) attacks. It allows you to specify the domains from which various types of content can be loaded, such as scripts, stylesheets, images, and fonts. It also allows you to specify the domains from which the page can be embedded in a frame.

Router Configuration

JavaScriptroutes.js
1import {Router, edgioRoutes} from '@edgio/core';
2

3export default new Router()
4  .use(edgioRoutes)
5

6  .match('/some/path', {
7    edge_function: './edge-functions/main.js',
8  })

Edge Function

JavaScriptedge-functions/main.js
1export async function handleHttpRequest(request, context) {
2  // Fetch the response from the origin
3  const response = await fetch(new Request(request.url, request), {
4    edgio: {
5      origin: 'web',
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}