Cloudflare Access、ログインと拒否の画面をHTMLで作り替え可能に

Cloudflareは10月27日、社内の画面や開発中のアプリの前に置く認証の仕組み「Cloudflare Access」で、利用者が目にする画面をHTMLとLiquidのテンプレートで作り替えられるようにした。変更履歴によると、対象はログイン、本人確認の後の拒否、本人確認以外の理由での拒否、コマンドラインのログインの承認の4つの画面だ。見た目をそろえられるほか、なぜ止められたのかや、次に何をすればよいかを画面に書ける。

作り替えられる4つの画面

Cloudflareの説明書によると、テンプレートは画面の種類ごとに1つずつ作る。種類は「Login」「Identity denied」「Forbidden」「Interstitial」の4つで、作った後に種類は変えられない。

ログインの画面には、Accessがサインインの部品を差し込む専用の要素を1つだけ置く。コマンドラインのログインを承認する画面にも、承認の部品の要素を1つだけ置く。どちらも、Liquidの条件や繰り返しの中に入れず、画面に必ず1回だけ出るようにする。自作のフォームや承認のボタンで置き換えてはいけない。拒否の2つの画面には、決まった部品は要らない。

画面ごとに出せるデータが違う

画面に出せるデータは種類ごとに違う。ログインの画面では、アプリの名前とドメイン、組織、選べるIDプロバイダー、ワンタイムPINが使えるか、サインインの知らせを出せる。IDプロバイダーの一覧は表示用の情報で、サインインのURLは入っていない。

拒否の2つの画面では、アプリの情報のほか、問い合わせに使うRay ID、ログインした人の情報、ポリシーの判定の情報を出せる場合がある。サインインの前は人の情報が無いこともある。承認の画面では、ログインを求めている道具の情報を出せる。説明書の例では、メールアドレスやRay IDがある時だけ表示するよう、Liquidの条件で囲んでいる。Liquidの出力はHTMLとして無害化され、無いデータは空の文字になる。

見た目だけを変える仕組み

説明書は、テンプレートは見た目を変えるだけで、通すかどうかの判断は変えないと書いている。自前のJavaScript、画面の要素に直接書くイベントの処理、自作のログインのフォームは使えない。Liquidの「include」「render」「layout」「echo」「raw」のタグも使えない。HTMLとCSSは無害化され、外部の画像や書体はHTTPSで読み込む必要がある。解析や描画、メモリにも上限がある。テンプレートが使えない時や安全に描けない時は、Accessは標準の画面に戻す。

アプリへの割り当てと手入れ

テンプレートはCloudflare Oneの管理画面の「Reusable components」の「Custom pages」で作り、編集画面で検査してから公開する。公開したテンプレートは、アプリの設定で画面ごとに割り当てるか、アカウントの既定にする。アプリの設定では、本人確認の後の拒否、それ以外の拒否、ログイン、承認の画面ごとに、種類の合うテンプレートだけを選べる。アプリごとの割り当てが既定より優先され、どちらも無ければ標準の画面になる。割り当てを外す時は「Cloudflare default」を選んで保存する。テンプレートを消す前には、アプリへの割り当てを替え、既定からも外しておく。

1つのテンプレートを複数のアプリで使えるので、直して公開すると、それを使う全部のアプリの画面が変わる。検査は描いた画面の見本ではないため、別のアプリで一度試してから広く使うよう説明書は勧めている。編集画面には見本の表示もダウンロードも無く、HTMLとLiquidの写しは手元に残しておく必要がある。

編集部の見方

Cloudflare Accessで、作ったアプリや社内の道具を自分たちだけに見せている小さなチームにとって、拒否の画面に理由と問い合わせ先を書けるのは助かる。止められた人が何をすればよいか分からず、連絡が来るまで気づかない、ということが減るからだ。ただ、ポリシーの判定の情報をそのまま出すと、グループ名などの中身が外に見えてしまう。説明書もそこに注意を促している。まずは拒否の画面に、Ray IDと連絡先だけを出すところから試すとよい。