OpenResty Edge で hCaptcha を有効にするには、グローバル設定の CAPTCHA 設定ページに hCaptcha の Sitekey と Secret key を入力し、ページルールに「Enable hCaptcha」アクションを追加するか、WAF のブロックアクションを hCaptcha に設定して、設定をリリースするだけです。hCaptcha は、ボット、スパム、不正行為からウェブサイトを保護するサードパーティサービスです。

本チュートリアルでは、この 2 つの有効化方法をスクリーンショット付きで解説し、clearance time が検証の頻度をどのように制御するかもご紹介いたします。

OpenResty Edge が返す hCaptcha 検証ページ

グローバル設定における hCaptcha キーの設定

いつものように、OpenResty Edge の Admin Web コンソールにアクセスしましょう。これはコンソールのサンプルデプロイメントです。各ユーザーは独自のローカルデプロイメントを持っています。

OpenResty Edge Admin Web コンソール

アプリケーションで hCaptcha を有効にする前に、hCaptcha の Sitekey と Secret key を設定する必要があります。

OpenResty Edge コンソールのアプリケーション一覧ページ

グローバル設定ページに移動します。

トップメニューからグローバル設定ページへ移動

CAPTCHA 設定ページに進みます。

グローバル設定で CAPTCHA 設定ページを開く

hCaptcha の Sitekey と Secret key は、hCaptcha の公式ウェブサイトから取得する必要があります。

OpenResty Edge の CAPTCHA 設定にある hCaptcha の Sitekey と Secret key の入力欄

hCaptcha の公式ウェブサイトにアクセスしてログインまたは登録します。

hCaptcha 公式サイトでログインまたは登録

次に、ウェブサイトページに進み、Sitekey リストを確認します。Sitekey 設定ページに移動します。

hCaptcha サイトページの Sitekey リスト

ここで Sitekey の詳細情報を取得できます。

hCaptcha Sitekey 設定ページの Sitekey 詳細

次に、設定ページに移動して Secret key を確認します。

Secret key を取得するために hCaptcha の設定ページを開く

ここで Secret key を取得できます。

hCaptcha 設定ページに表示された Secret key

hCaptcha ウェブサイトから取得した Sitekey と Secret key を入力します。

OpenResty Edge に hCaptcha の Sitekey と Secret key を入力

保存をクリックします。

hCaptcha の CAPTCHA 設定を保存

これで hCaptcha の Sitekey と Secret key が設定されました。

hCaptcha の Sitekey と Secret key の設定完了

ページルールアクションによる hCaptcha の有効化

次に、アプリケーションに hCaptcha を設定しましょう。

グローバル設定からアプリケーション一覧ページへ戻る

引き続き test-edge.com ドメインを使用して、hCaptcha の設定方法をデモンストレーションします。

アプリケーション一覧で test-edge.com ドメインを検索

このアプリケーションに進みます。

検索結果に表示された test-edge.com アプリケーション

前回のチュートリアルで、すでにアップストリームを定義しています。

アプリケーションのアップストリームページへ移動

この my_backend アップストリームは、バックエンドサーバーを定義しています。

バックエンドサーバーが定義された my_backend アップストリーム

また、ページルールも定義済みです。

アプリケーションのページルールページへ移動

前回のチュートリアルでは、このページルールで先ほど確認したアップストリームへのリバースプロキシを設定しました。

my_backend アップストリームへのリバースプロキシのページルール

では、hCaptcha アクションを有効にする新しいページルールを追加しましょう。

hCaptcha を有効にする新しいページルールを追加

このルールには条件を設定していないことに注意してください。これは、このルールが無条件にトリガーされることを意味します。

条件未設定のページルールは無条件にトリガーされる

新しいアクションを追加します。

ページルールに新しいアクションを追加

「Enable hCaptcha」アクションを検索します。

Enable hCaptcha アクションを検索

「Enable hCaptcha」オプションを選択します。

Enable hCaptcha オプションを選択

クライアントが CAPTCHA 検証を通過した後、OpenResty Edge は指定された期間内に同じクライアントからのすべてのリクエストを許可します。この期間は clearance time と呼ばれます。hCaptcha は cookie を使用して検証情報を記録します。

Enable hCaptcha アクションの clearance time 設定

この時間を 10 秒に設定します。

hCaptcha の clearance time を 10 秒に設定

このルールを最上位に移動して、優先的に実行されるようにします。これはデモンストレーションを容易にするための設定です。実際には任意の順序に設定できます。

新しいページルールの挿入位置オプション

このルールを保存します。

Always-Top を選択してページルールを作成

いつものように、編集したページルールをプッシュするために新しい設定をリリースする必要があります。

未リリースの変更の通知とリリースリンク

このボタンをクリックします。

リリースページで保留中の変更をリリース

リリースします。

確認ダイアログでリリースをクリック

設定が完全に同期されました。

設定がすべてのゲートウェイクラスターとサーバーに同期完了

これで、新しいページルールがすべてのゲートウェイクラスターとサーバーにプッシュされました。

OpenResty Edge ゲートウェイクラスターへの設定同期の開始

OpenResty Edge ゲートウェイクラスターへの設定同期の進行中

OpenResty Edge ゲートウェイクラスターへの設定同期の完了

設定の変更にはサーバーのリロード、再起動、バイナリのアップグレードは必要ありません。そのため、非常に効率的でスケーラブルです。

構成図:Edge Admin サーバーが各ノードのローカルキーバリューストレージへ設定を同期し、リクエスト処理セッションはリロードなしで新しい設定を反映

CAPTCHA 検証のテスト

では、test-edge.com にアクセスしてみましょう。オリジンサイトのコンテンツではなく、hCaptcha の検証ページが表示されることがわかります。

test-edge.com へのアクセス時に返される hCaptcha 検証ページ

検証をクリックします。指示に従って正しい画像を選択してください。

hCaptcha の画像選択チャレンジ

正しくない画像を選択した場合、別の画像セットが表示され、選択を続けることができます。

誤った選択の後に表示される別の hCaptcha 画像セット

検証が完了すると、この URI で期待されるコンテンツが表示されます。先ほど clearance time を 10 秒に設定したことに注意してください。これは、10 秒間 CAPTCHA なしでこのアプリケーションにアクセスできることを意味します。

hCaptcha 検証通過後に表示されるオリジンのコンテンツ(OpenResty ウェルカムページ)

10 秒経過後は、再度検証が必要になります。

clearance time 経過後に再度表示される hCaptcha 検証

hCaptcha の WAF ブロックアクション設定

アクションで CAPTCHA を設定するだけでなく、WAF ルールでも CAPTCHA を設定できます。WAF ルールの具体的な機能については、OpenResty Edge で WAF を有効にするチュートリアルをご覧ください。

リリースページからアプリケーションのページルールへ移動

まずは、WAF ルールで hCaptcha を設定する方法を簡単に見てみましょう。

hCaptcha のページルールを開いて WAF セクションを編集

WAF を有効にします。

ページルール内の WAF セクションを有効化

ここでブロックアクションを hCaptcha に設定できます。

ページルールの WAF セクションにある Block Action 設定

「OpenResty Edge gateway server captcha challenge - hCaptcha」オプションを選択します。

OpenResty Edge gateway server captcha challenge - hCaptcha オプションを選択

WAF のブロックアクションとして hCaptcha を選択済み

先ほどアクションを設定したときと同様に、ここでも clearance time を設定する必要があります。ここでは詳細なデモンストレーションは省略します。詳細については、WAF ルールに関連する動画をご覧ください。

hCaptcha WAF ブロックアクションの clearance time 設定

なお、OpenResty Edge の組み込み CAPTCHA サービスもサポートしています。これはゲートウェイサーバーから直接検証ページを返すものです。詳細は組み込み CAPTCHA のチュートリアルをご覧ください。

OpenResty Edge について

OpenResty Edge は、マイクロサービスと分散トラフィックアーキテクチャ向けに設計された多機能ゲートウェイソフトウェアです。トラフィック管理、プライベート CDN 構築、API ゲートウェイ、セキュリティ保護などの機能を統合し、現代のアプリケーションの構築、管理、保護を容易にします。OpenResty Edge は業界をリードする性能と拡張性を持ち、高同時接続・高負荷シナリオの厳しい要求を満たすことができます。K8s などのコンテナアプリケーショントラフィックのスケジューリングをサポートし、大量のドメイン名を管理できるため、大規模ウェブサイトや複雑なアプリケーションのニーズを容易に満たすことができます。

このチュートリアルがお役に立ちましたら、ブログサイトや YouTube チャンネル のチャンネル登録をお願いいたします。

著者について

章亦春(Zhang Yichun)は、オープンソースの OpenResty® プロジェクトの創始者であり、OpenResty Inc. の CEO および創業者です。

章亦春(GitHub ID: agentzh)は中国江蘇省の出身で、現在は米国ベイエリアに在住しています。中国における初期のオープンソース技術と文化の提唱者・リーダーの一人であり、Cloudflare、Yahoo!、Alibaba などの国際的なハイテクノロジー企業に勤務した経験があります。「エッジコンピューティング」「動的トレーシング」「マシンプログラミング」の先駆者でもあり、22 年以上のプログラミング経験と 16 年以上のオープンソース経験を有します。世界で 4,000 万以上のドメインに採用されているオープンソースプロジェクトのリーダーとして、OpenResty® を基盤に、米国シリコンバレーの中心部に OpenResty Inc. を創設しました。同社の主力製品である OpenResty XRay動的トレーシング 技術を活用した非侵入型のプロファイリングおよびトラブルシューティングツール)と OpenResty Edge(マイクロサービスおよび分散トラフィック向けの統合ゲートウェイソフトウェア)は、世界各地の上場企業および大企業に広く採用されています。OpenResty 以外にも、Linux カーネル、Nginx、LuaJITGDBSystemTapLLVM、Perl など、多数のオープンソースプロジェクトに累計 100 万行超のコードを寄与し、60 件を超えるオープンソースソフトウェアライブラリを手がけています。

翻訳

英文版の原文と日本語訳版(本文)をご用意しております。読者の皆様による他の言語への翻訳版も歓迎いたします。全文翻訳で省略がなければ、採用を検討させていただきます。心より感謝申し上げます!