Cloudflare Accessで開発環境を自分だけに公開する

個人開発アプリを開発するうえで本番に近い環境で動作させたいと思った際にCloudflare Accessを使用した方法を見つけたので紹介します。

Cloudflare Access とは

Cloudflare Zero Trust の一機能の認証ゲートウェイ機能。

下記のようなことが実現できます。

任意の URL にアクセス制御ポリシーを設定できる
OTP（ワンタイムパスワード）やGoogle OAuth など複数の認証方式に対応
Cloudflare Tunnel やオリジン側のファイアウォール設定と組み合わせることで、オリジンサーバーへ直接アクセスされない構成にできる

ブラウザアクセスを制限する（OTP認証）

1. Zero Trust ダッシュボードにアクセス

Cloudflare Zero Trust にログインし、Accessコントロール > アプリケーション を開く。

2. アプリケーションを追加

「新規アプリケーションを作成」→「セルフホストとプライベート」を選択し、保護したいホストを設定します。（サブドメインやパスも指定可能）

3. Accessポリシーを設定

Accessポリシーを設定することでアプリケーションへアクセスを許可する条件を設定することができます。メールアドレスを指定することでOTPで認証させたり、IPアドレスの指定で特定の送信元だけを許可したりできます。

自分のメールアドレスだけを許可したい場合は、アクションに Allow を指定し、Include ルールで Emails に自分のメールアドレスを設定します。このようにすることでアプリケーションにアクセスした際にOTP認証が求められるようになります。

スクリプト・CLI からのアクセスを通す（Service Token）

スクリプトやCI/CDなどからアクセスしたいケースがある。その場合は Service Token を使う。

1. Service Token を発行

Access > Service Auth > Service Tokens から「Create Service Token」を実行。

発行された認証情報を控えておく（この画面を閉じると Secret は再表示されない）：

CF-Access-Client-Id:     xxxxxxxx.access
CF-Access-Client-Secret: <secret>

2. Accessポリシーを追加する

ここがハマりポイント。Service Token を使うポリシーのアクションは Allow ではなく Service Auth を選ぶ必要がある。

Allow のまま Service Token のセレクターを追加しても、ブラウザのログイン画面が表示されてしまい通過できない。

3. リクエスト時にヘッダーを付与する

スクリプトやツールから叩く際に 2 つのヘッダーを付与する。

curl の場合：

curl https://dev.example.com/api/health \
  -H "CF-Access-Client-Id: xxxxxxxx.access" \
  -H "CF-Access-Client-Secret: <secret>"

外部システムからのリクエストを許可する（IP制限）

StripeのWebhookなど外部システムから自身のアプリケーションへリクエストを行う場合があるが、上述の設定がされていると拒否されてしまう。この対処方法としては、Webhook のようにブラウザ認証やService Tokenを付与できないエンドポイントに限り、各種サービスが使用するIPをバイパスする方法があります。

Webhook用のAccessアプリケーションを追加する

IP範囲を指定した Bypass ポリシーを設定すると、指定したIPアドレスからのリクエストは Access の認証を通さずに許可できます。

ただし、Cloudflareの公式ドキュメントでは、OAuthコールバックやWebhookのような公開エンドポイントを Bypass する場合、対象パスを指定したAccessアプリケーションを別途作成する例が紹介されています。

そのため、既存の開発環境全体を保護しているAccessアプリケーションに Bypass ポリシーを追加するのではなく、dev.example.com/api/webhooks/stripe のようにWebhookのパスだけを対象にしたAccessアプリケーションを別途作成し、そこにIP範囲の Bypass ポリシーを設定するのが推奨されます。

Bypass は Accessの認証を無効化する設定なので、対象は /api/webhooks/stripe のように必要最小限のパスに絞ります。また、この設定があっても外部からのリクエストに対する署名検証等は行うようにしてください。

対象となるIPアドレスは各サービスの公式ドキュメントなどから確認してください。例）Stripe Webhookで使用され得るIPアドレス

ドメインと IP アドレス

許可リストに登録し、API 接続の信頼性を確保するための Stripe のドメインと IP アドレスについてご紹介します。