841-biborokuWebフロントエンドの備忘録

Cloudflare PagesへデプロイしたサイトにCloudflare Accessでアクセス制限をかける

Cloudflare PagesにデプロイしたサイトにCloudflare Accessで簡単にアクセス制限の設定ができたのでその記録です。

※Freeプラン登録の手順は省きます。

Cloudflare Accessとは

Cloudflare AccessはCloudflare Zero Trustの一部で、安全なアプリケーションアクセスを提供します。ユーザー認証、SSO、MFAなどの機能を通じてゼロトラストセキュリティを実現します。

内容

ユーザー数の制限

最大50人のユーザーが利用可能(Freeプラン)

基本的なセキュリティ機能

シングルサインオン(SSO)、多要素認証(MFA)、デバイス姿勢チェック

アプリケーションの制限

特定の数のアプリケーションに対するアクセス制御

サポートの制限

コミュニティサポートやセルフサポートリソースのみ利用可能

シンプルなポリシー設定

基本的なポリシー設定が可能

アイデンティティプロバイダーの統合

Google Workspace、Microsoft Azure ADなどの主要プロバイダーと統合

トラフィック暗号化

全てのトラフィックが暗号化され、セキュアな通信を保証

ログイン試行の監視

ユーザーのログイン試行を監視し、不正なアクセスを検出

セッション管理

セッションのタイムアウト設定など、セッション管理機能

簡易設定と導入

簡単に設定でき、すぐに導入可能

アクセスログ

基本的なアクセスログを提供し、アクセスの監査が可能

シームレスなユーザー体験

ユーザーにとってシームレスなアクセス体験を提供

IP制限

特定のIPアドレス範囲からのアクセスを制限可能

リアルタイム監視

リアルタイムでのアクセス監視機能

バージョン管理

ポリシーや設定のバージョン管理が可能

”ChatGPT”

Cloudflare Pagesへデプロイしたサイトにアクセス制限を設定する

ダッシュボードのサイドバーからZero TrustまたはWorkers & Pagesの管理画面どちらからでも設定が可能です。

Workers & Pagesから設定

  1. ダッシュボードからWorkers & Pagesを開く
  2. アクセス制限をかけるサイトの「管理」へ
  3. Access ポリシーの「アクセスポリシーを有効にする」
  4. プレビューのデプロイに対してアクセスポリシーが有効になりました

プレビューURLにアクセスするとCloudflare Accessの画面が表示されます。

認証画面とワンタイムPIN入力画面

Emailを入力し「Send me a code」をクリックするとワンタイムPIN入力画面に遷移します。Cloudflareから「Login code for xxx.xxx.pages.dev」とメールが届きます。

記載のワンタイムPIN入力、「Sign in」で認証が通るとサイトが表示されます。

※最初のリクエストから10分後に期限切れます。

プロダクションURLにも制限を適用する

  1. 管理ページのAccess ポリシー>ポリシーを管理からApplicationsへ移動
  2. 自動で作成されたApplicationの「Configure」を開く
  3. 「Overview」タブに移動
  4. 「+ Add domain」で条件を追加
  5. Subdomainは空欄の状態で保存

プロダクションURLにアクセスして認証画面が表示されたら成功です。

許可していないアクセスの場合

CloudflareのForbiddenページが表示されます。

Zero Trustから設定

以下は、特定のメールアドレスだけ認証を許可するための手順です。

  1. ダッシュボードからZero Trustを開く
  2. サイドバーのAccess>Applicationsを開く
  3. 「+Add an application」をクリックし開いたページ内の「Self-hosted」の「Select」を選択
  4. 設定の登録
    1. Application name:設定名
    2. Session Duration:セッション時間
    3. Application domain:対象ドメイン(サブドメイン)
  5. ポリシー設定の登録
    1. Policy name:ポリシー設定名
    2. Action:アクション(許可を選択)
    3. Session duration:セッション期間
  6. ルールの登録
    1. Selector:Emailsを選択
    2. Value:許可するメールアドレス
  7. 次へ・・で完了まで進む

特定IPだけアクセスを許可する

すでにアクセス制限をしているサイトに対して、特定IPだけアクセスを許可する設定を追加してみます。

  1. ダッシュボードからZero Trustを開く
  2. サイドバーのAccess>Applicationsを開く
  3. 条件を追加するApplicationの「Configure」を開く
  4. 「Policies」の「+Add a policy」をクリックし開いたページ内のポリシーを登録
    1. Policy name:ポリシー設定名
    2. Action:アクション(Bypassを選択)
  5. ルールの登録
    1. Selector:IP rangesを選択
    2. Value:許可するIP
  6. 「Add policy」をクリックして表示されたページの「Save application」をクリックで完了

Policiesページの認証条件は上から順番に実行されます。(上の図では、メールアドレス認証>IPの順)

認証の順番を変更する場合は、左端にある「︙」をドラッグで上下に移動するか、右端にある「︙」のMove up/Move down/Move toで移動して入れ替えが可能です。

設定のテストを実行する

  1. ダッシュボードからZero Trustを開く
  2. サイドバーのAccess>Applicationsを開く
  3. テストをするApplicationの「Configure」を開く
  4. 「Policies」の「Test your policies」をクリック
  5. メールアドレスを入力し「Test policies」で実行

許可されていない場合「Access denied」と表示され、許可されている場合「Access granted」とPoliciesには実行された結果が表示されます。