自称フルスタックエンジニアのてっくぶろぐ
cloudflare svg logo
Cloudflare Pagesで開発環境をアクセス制御する
投稿日: 2023年7月29日

Cloudflare PagesにはProduction BranchとPreview Branchが設定できるようになっていて、本番環境にデプロイを実施する前に開発環境で動作の確認を行えます。 今回はこのPreview BranchにCloudflare Zero Trustによるアクセス制御を追加する方法を紹介したいと思います。（備忘録的に手順を記載しているので、冗長ですみません）

Cloudflare Zero Trustとは

🔗

cloudflareで提供しているページや様々なSaaSサービスへのアクセスに対して、　oauthなどによる認証を付与してくれるサービスです。 （と言いつつ、ウェブページに認証を追加してくれるAccessはCloudflare Zero Trustのほんの一機能に過ぎないみたいで、公式のページではそれ以外にもGatewayなど様々な機能が提供されていると説明されていました） cloudflare zero trust portfolio

今回はCloudflare Zero Trustを使って、Cloudflare PagesのPreview Branchのページに対して、Githubによる認証で特定のアカウントのみを許可する設定を行いたいと思います。

GitHubのOAuthアプリケーション作成

🔗

まずは認証を提供するGitHubのアプリケーションを作成します。GitHubにログインし下記のようにたどるとOAuthアプリケーションが作成できます。

　右上のアイコンをクリック -> Settings -> Developer Settings -> OAuth Apps -> New OAuth App

と移動すると、下記のような画面が表示されます。

github_oauth_app

それぞれの項目は、

  • Application name: 任意の名前（例: cloudflare_zero_trust）
  • Homepage URL: 保護したいページのURL（例: https://dev.example.com）
  • Application Description: 任意の説明
  • Authorization callback URL: https://{your-team-name}.cloudflareaccess.com/cdn-cgi/access/callback
    • your-team-nameはcloudflareのチーム名
  • Enable Device Flow: ヘッドレスアプリケーションのユーザを許可できるようになりますが、今回は不要

のように入力すればOKです。OAuthアプリケーションを作成したら、Zero Trustの設定で利用するので、Client IDとClient Secretをコピーしておいてください。

Cloudflare Zero Trust Accessの設定

🔗

次にCloudflare側の設定を行います。

Authenticationの設定

Cloudflareにログインして、下記のようにたどります。

Zero Trust -> Settings -> Authentication -> Login methodsのAdd new -> GitHub

その後、3項目を入力してSaveを押せばGithubのOAuth連携が有効化されます。

  • Name: 任意のわかりやすい名前をつける
  • App ID: 先ほどコピーしたClient IDを貼り付ける
  • Client secret: 先ほどコピーしたClient Secretを貼り付ける

Application作成

次にAccess Applicationを作成します。Access Applicationを作成することで、先ほど有効化した認証が実際にページに適用されるようにできます。

Access -> Applications -> Add an application -> Self-hosted

で設定画面に遷移します。こちらの画面は設定項目が多いので、地味に入力が大変です。

  • Application name: 任意のわかりやすい名前
  • Session Duration: 再認証が要求されるまでの期間。セキュリティ要件次第ですが24hoursか1weekくらいが妥当だと思います
  • Application domain: 認証を適用したいドメイン名
    • Domain: Cloudflareで管理されているドメインが表示されるので、認証を行いたいドメインを選択する
    • Subdomain: DomainではCloudflareで管理されているApexドメインしか指定できないので、サブドメインのみを認証の対象にしたい場合はここを指定する 　　- 例: Cloudflareでexample.comを管理、dev.example.comで開発環境を提供の場合、Subdomainがdev、Domainがexample.com
    • Path: 特定のパスだけ保護したい場合は設定する
  • Application Apprearance: デフォルトのままでOK
  • Block pages: デフォルトのままでOK
  • Identity providers: 重要！どの認証方式を有効化するか
    • Accespt all available identity providersをoffに
    • One-time PINの選択を外す
    • Instant Authはoffのまま

cloudflare_zero_trust_access_application_provider

ここまで入力したらNextを押します。ここまででどのページにどの認証の仕組みを適用するかまでが設定できました。次の画面では認証後の認可を行うためのポリシーを設定します。今回は認証でGitHubアカウントのメールアドレスが取れるので、特定のメールアドレスのみのアクセスを許可するようなポリシーを設定します。

  • Policy name: 任意のわかりやすい名前
  • Action: Allow
  • Session duration: Same as application session
  • Configure rules: ここが一番重要。どのような条件で許可を行うかを設定します
    • 今回は下記二つのルールを追加
      • Include -> Selector: Login Methods, Value: Github・{設定したApplication名}
      • Add require -> Selector: Emails, Value: {許可したいメールアドレス（GitHubアカウントに用いているもの）}
  • Additional settings: デフォルトでOK
  • CORS settings: CORS設定が必要なページなら設定する。
  • Cookie settings: cookieのセキュリティ設定なので、適宜設定
  • Additional settings: デフォルトでOK
  • Cookie settings: cookieのセキュリティ設定なので、適宜設定
  • Additional settings: デフォルトでOK

大量の入力が必要でしたが、ここまで入力してAdd applicationを選択すればAccess Applicationが作成されます。

試してみる

🔗

設定を行ったURLに実際にアクセスしてみると

cloudflare_zero_trust_auth

と認証画面が表示され、ボタンを押すとGitHubの認証画面に飛びます。（GitHubログイン済みの場合はここはスキップされます。）GitHubへのログインに成功すると、無事保護したいページが表示されます！

多少設定は煩雑で手間がかかりますが、Cloudflare Zero Trust、GitHub OAuth Applicationともに少数ユーザレベルでは無料で利用可能なので、コスパよく環境を保護したいときにはぜひ利用していきたいなと思いました。

今回は以上です。