Workers で Cloudflare Access 保護オリジン向けのカスタムヘッダーを作成する

このチュートリアルでは、Cloudflare Worker を使ってトラフィックにカスタム HTTP ヘッダーを追加し、Cloudflare Access で保護されたオリジンサービスへそのカスタムヘッダーを送る方法を説明します。

一部のアプリケーションやネットワーク実装では、オリジンへ特定のカスタムヘッダーを渡す必要があります。Zero Trust プロキシを経由するトラフィックでは、この実装が難しいことがあります。Access が必要とする ユーザー認可ヘッダー を送るように、Worker を設定できます。

• オリジンサーバーを Cloudflare Access で保護する

1. Cloudflare ダッシュボード ↗ で Workers & Pages ページを開きます。

   Workers & Pages を開く ↗

2. 初めての Worker の場合は Create Worker を選びます。それ以外の場合は Create application を選び、続けて Create Worker を選びます。

3. Worker を識別しやすい名前を入力し、Deploy を選びます。

4. Edit code を選びます。

5. 次の Worker を入力します。

export default {
	async fetch(request, env, ctx) {
		const { headers } = request;
		const cfaccessemail = headers.get("cf-access-authenticated-user-email");

		const requestWithID = new Request(request);
		requestWithID.headers.set("company-user-id", cfaccessemail);

		return fetch(requestWithID);
	},
};

export default {
	async fetch(request, env, ctx): Promise<Response> {
		const { headers } = request;
		const cfaccessemail = headers.get("cf-access-authenticated-user-email");

		const requestWithID = new Request(request);
		requestWithID.headers.set("company-user-id", cfaccessemail);

		return fetch(requestWithID);
	},
} satisfies ExportedHandler<Env>;

6. Save and deploy を選びます。

Worker は、Access で保護されたオリジンサービスへカスタムヘッダーを送れる状態になりました。

1. 作成した Worker を選び、Triggers を開きます。
2. Routes で Add route を選びます。
3. オリジンのホスト名とゾーンを入力し、Add route を選びます。

Worker は、定義したルートに一致するリクエストへカスタムヘッダーを挿入します。例:

"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
    "Accept-Encoding": "gzip",
    "Accept-Language": "en-US,en;q=0.9",
    "Cf-Access-Authenticated-User-Email": "user@example.com",
    "Company-User-Id": "user@example.com",
    "Connection": "keep-alive"