AWS Amplify Hosting で取れるリクエストヘッダー一覧 (Geo / ASN / デバイス情報)

結論

AWS Amplify Hosting の SSR でリクエストハンドラに届くヘッダーには、CloudFront が付与する多くのユーザー情報が含まれている。

MaxMind や geoip-lite 等を導入しなくても、国名・都道府県・市区町村・郵便番号・緯度経度・ASN・デバイス種別 がそのまま取れる。

実際に届くヘッダー全部

本番デプロイで request.headers を全部ダンプしたところ、以下が確認できた:

Geo (位置情報) 系

「郵便番号」「緯度経度」まで来る。プライバシー的に取り扱い注意。

市町村名は実際に私がアクセスしていた市町村名では無く、3Km程度離れていた。

ネットワーク系

情報は一部匿名化しています。

ASN まで取れるのは美味しい。これがあれば「特定の ISP から来た」「AWS のデータセンターから来た」のような分類ができる。

デバイス種別

UA パースしなくてもデスクトップ/モバイル/タブレット/TV の判定ができる。CloudFront 側が UA を見て判定してくれる方式。

AWS 内部トレース系

元のブラウザ由来 (上書きされていない!)

過去 (2022 年頃) には「Amplify SSR は user-agent を Amazon CloudFront に置換する」という GitHub issue (#2161) もあったが、現在は元のブラウザ UA が保持されている。ua-parser-js 等で詳細を抽出できる。

SvelteKit SSR での取得方法

load 関数や actions ハンドラの引数に渡ってくる request: Request の headers から普通に取れる。

例: load 関数

// 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 }
  };
};

例: action ハンドラ

// 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');
    // ...
  }
};

例: 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 }));
};

ユーティリティとしてまとめる

実プロジェクトでは、抽出ロジックをユーティリティ関数にまとめると扱いやすい。

// 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
  };
}

呼び出し側:

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' }
};

参考

• AWS CloudFront: Add CloudFront request headers
• SSR request loses original headers · Issue #2161 · aws-amplify/amplify-hosting (過去の問題、現在は解決済み)
• amplify-adapter (SvelteKit 用)