Workersを使用してCloudflare Accessで保護されたオリジンのカスタムヘッダーを作成する

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

特定のカスタムヘッダーをオリジンに渡す必要があるアプリケーションやネットワーキングの実装がありますが、Zero Trustプロキシを通過するトラフィックに対してこれを実装するのは難しい場合があります。Workerを構成して、Accessが必要とするユーザー認証ヘッダーを送信できます。

---

始める前に

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

始める前に

1. Cloudflareダッシュボード ↗にログインし、アカウントを選択します。Workers & Pagesに移動します。

2. これが初めてのWorkerの場合は、Create Workerを選択します。そうでない場合は、Create applicationを選択し、次にCreate Workerを選択します。

3. Workerの識別可能な名前を入力し、Deployを選択します。

4. Edit codeを選択します。

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

   カスタムHTTPヘッダーを持つWorker

   addEventListener("fetch", event => {
     event.respondWith(handleRequest(event.request))
   })
   
   async function handleRequest(request) {
     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 await fetch(requestWithID);
   }

6. Save and deployを選択します。

これで、あなたのWorkerはAccessで保護されたオリジンサービスにカスタムヘッダーを送信する準備が整いました。

Workerをホスト名に適用する

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"