All Request Headers Available in AWS Amplify Hosting (Geo / ASN / Device)

TL;DR

The headers that reach the request handler in AWS Amplify Hosting SSR include a lot of user information added by CloudFront.

Without installing MaxMind, geoip-lite or the like, you can get the country, region, city, postal code, latitude/longitude, ASN, and device type as they are.

All the headers that actually arrive

I dumped all of request.headers on a production deployment and confirmed the following.

Geo (location) headers

It goes as far as the "postal code" and "latitude/longitude". Handle with care in terms of privacy.

The city name was not the city I was actually accessing from; it was about 3 km away.

Network headers

Some of the information is anonymized.

Getting even the ASN is nice. With it you can classify requests as "came from a specific ISP" or "came from an AWS data center".

Device type

You can tell desktop / mobile / tablet / TV without parsing the UA. CloudFront looks at the UA and makes the judgment for you.

AWS internal trace headers

Original browser headers (not overwritten!)

In the past (around 2022) there was a GitHub issue (#2161) saying "Amplify SSR replaces user-agent with Amazon CloudFront", but now the original browser UA is kept. You can extract the details with ua-parser-js or the like.

How to read them in SvelteKit SSR

You can get them in the normal way from the headers of the request: Request that is passed in the arguments of load functions and actions handlers.

Example: load function

// src/routes/+page.server.ts
import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async ({ request }) => {
  const headers = request.headers;

  const country = headers.get('cloudfront-viewer-country-name'); // 'Japan'
  const region = headers.get('cloudfront-viewer-country-region-name'); // 'Tokyo'
  const asn = headers.get('cloudfront-viewer-asn'); // '25XX'

  return {
    location: { country, region, asn }
  };
};

Example: action handler

// src/routes/+page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  default: async ({ request }) => {
    const country = request.headers.get('cloudfront-viewer-country');
    // ...
  }
};

Example: API endpoint (+server.ts)

// src/routes/api/some/+server.ts
import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ request }) => {
  const country = request.headers.get('cloudfront-viewer-country');
  return new Response(JSON.stringify({ country }));
};

Wrap it up as a utility

In a real project, putting the extraction logic into a utility function makes it easier to handle.

// src/lib/server/geo.ts
export type DeviceType = 'desktop' | 'mobile' | 'tablet' | 'tv' | undefined;

export interface GeoInfo {
  country?: string;
  countryCode?: string;
  region?: string;
  asn?: number;
  deviceType?: DeviceType;
}

export function extractGeoInfo(headers: Headers): GeoInfo {
  const asnRaw = headers.get('cloudfront-viewer-asn');
  const asn = asnRaw ? parseInt(asnRaw, 10) : undefined;

  let deviceType: DeviceType;
  if (headers.get('cloudfront-is-tablet-viewer') === 'true') {
    deviceType = 'tablet';
  } else if (headers.get('cloudfront-is-mobile-viewer') === 'true') {
    deviceType = 'mobile';
  } else if (headers.get('cloudfront-is-smarttv-viewer') === 'true') {
    deviceType = 'tv';
  } else if (headers.get('cloudfront-is-desktop-viewer') === 'true') {
    deviceType = 'desktop';
  }

  return {
    country: headers.get('cloudfront-viewer-country-name') || undefined,
    countryCode: headers.get('cloudfront-viewer-country') || undefined,
    region: headers.get('cloudfront-viewer-country-region-name') || undefined,
    asn: asn !== undefined && Number.isFinite(asn) ? asn : undefined,
    deviceType
  };
}

The calling side.

import { extractGeoInfo } from '$lib/server/geo';

export const load: PageServerLoad = async ({ request }) => {
  const geo = extractGeoInfo(request.headers);
  console.log(geo);
  // { country: 'Japan', countryCode: 'JP', region: 'Tokyo', asn: 25XX, deviceType: 'desktop' }
};

References

• AWS CloudFront: Add CloudFront request headers
• SSR request loses original headers · Issue #2161 · aws-amplify/amplify-hosting (a past problem, now resolved)
• amplify-adapter (for SvelteKit)