コンテンツにスキップ

カスタムページの設定 (エラーとチャレンジ)

概要

Cloudflareは、リクエストトラフィックの処理における問題を特定するために、幅広いエラーコードを使用しています。デフォルトでは、これらのエラーページにはCloudflareが言及されていますが、カスタムエラーページを使用することで、ユーザーに一貫したブランド体験を提供できます。

Pro、Business、またはEnterpriseプランに加入している場合、これらのページをアカウント全体または特定のドメインに対してカスタマイズおよびブランド化できます。セキュリティチャレンジ中やエラーが発生した際に表示されるカスタムエラーページをデザインできます。

また、Enterprise顧客は、ダッシュボードのCustom Pagesアプリ内のEnable Origin Error Pagesを使用して、オリジンで5XXエラーページをカスタマイズできます。

ステップ1: カスタムページを作成する

Cloudflareアカウントにカスタムエラーページを追加する前に、そのページを自分のWebサーバー上でデザイン、コーディング、ホスティングする必要があります。

以下のカスタムエラーテンプレートを使用して、ページの構築を開始できます：

<html>
<head></head>
 <body>
   ::[REPLACE WITH CUSTOM ERROR TOKEN NAME]::
 </body>
</html>

公開されると、追加のスクリプト、画像、またはスタイルシートは、カスタムエラーページのソースサイズを約50%増加させます。

カスタムページの例

スタイリングなしの5XXカスタムエラーページのサンプルコードは以下の通りです：

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
    <title>5XXレベルエラーページ</title>
</head>
<body>
  <h1> 5XXレベルエラー </h1>
  <h2>::CLOUDFLARE_ERROR_500S_BOX::</h2>
</body>
</html>

ステップ2: カスタムエラートークンを選択する

カスタムエラーページをデザインする際には、1つのページ固有のカスタムエラートークンを含める必要があります。各カスタムエラートークンは、エラーページに表示される診断情報を提供します。

各エラーに対してカスタムページを表示するには、エラーごとに別々のページを作成します。たとえば、IP/Country BlockとInteractive Challengeの両方のカスタムエラーページを作成するには、2つの別々のページをデザインして公開する必要があります。

以下の表は、該当するカスタムエラーページごとにグループ化された各カスタムエラートークンを示しています。

トークン利用可能なページ
::CLIENT_IP::すべてのページ
::RAY_ID::すべてのページ
トークン利用可能なページ
::GEO::IP/Country Block
::CAPTCHA_BOX::Interactive Challenge
Country Challenge (Managed Challenge)
Managed Challenge / I’m Under Attack Mode (Interstitial Page)
::IM_UNDER_ATTACK_BOX::JS Challenge
::CLOUDFLARE_ERROR_500S_BOX::5XXエラー
::CLOUDFLARE_ERROR_1000S_BOX::1XXXエラー

ステップ3: カスタムページをスタイリングする

各カスタムエラートークンにはデフォルトの外観と感触があります。ただし、CSSを使用して各カスタムエラートークンのクラスIDを使用してスタイライズできます。CSSスタイリングに慣れている場合は、各トークンのクラスIDを使用してエラーページの外観と感触をカスタマイズできます。すべての外部リソース（画像、CSS、スクリプトなど）は、プロセス中にインライン化されることに注意してください。そのため、すべての外部リソースは利用可能である必要があります（つまり、200 OKを返す必要があります）。そうでない場合、エラーが発生します。

ステップ4: カスタムページをプレビューして公開する

カスタムエラーページをカスタマイズした後、Cloudflareにページを追加するための2つのオプションがあります：

  • アカウントレベル：カスタムエラーページは、アカウントに関連付けられたすべてのドメインに適用されます。
  • ドメインレベル：カスタムエラーページは、アカウントに関連付けられた1つのドメインにのみ適用されます。

アカウントレベルのカスタムエラーページ

アカウントレベルのカスタムエラーページを公開するには：

  1. Cloudflareアカウントにログインします。
  2. Manage Account > Configurationsに移動します。
  3. 左側のナビゲーションでCustom Pagesをクリックします。
  4. 希望するカスタムエラーページのタイプを特定し、Custom Pagesボタンをクリックします。Custom Pageダイアログが表示されます。
  5. オリジンサーバーでカスタマイズしたカスタムエラーページのURLを入力し、Previewをクリックします。
  6. プレビューでスタイルや画像が希望通りに表示されていることを確認します。
  7. ページプレビューに満足したら、Custom Pageダイアログに戻り、Publishをクリックします。

ドメインレベルのカスタムエラーページ

ドメインレベルのカスタムエラーページを公開するには：

  1. Cloudflareアカウントにログインします。
  2. カスタムエラーページを公開したいドメインを選択します。
  3. Custom Pagesアプリをクリックします。
  4. 希望するカスタムエラーページのタイプを特定し、Custom Pagesボタンをクリックします。Custom Pageダイアログが表示されます。
  5. オリジンサーバーでカスタマイズしたカスタムエラーページのURLを入力し、Previewをクリックします。
  6. プレビューでスタイルや画像が希望通りに表示されていることを確認します。
  7. ページプレビューに満足したら、Custom Pageダイアログに戻り、Publishをクリックします。

公開後のカスタムエラーページの更新

Custom Pagesアプリでカスタムエラーページを正常に公開した後、オリジンサーバーからページを削除できます。

将来的にカスタムエラーページを更新する必要がある場合、ページのURLが変更されていなくても、オリジンとCloudflareダッシュボードの両方でページを再公開する必要があります。

一般的なカスタムページの問題をトラブルシュートする

ブロックされたリクエストのエラーページ

国やIPアドレスをIPアクセスルールでブロックすると、影響を受けた訪問者は1005エラーとあなたのIP/Country Blockカスタムページを受け取ります。

国やIPアドレスをWAFカスタムルールでブロックし、ルール内でブロックされたリクエストのカスタムレスポンスを設定しない場合、影響を受けた訪問者はあなたのWAF Blockページを受け取ります。

レート制限ルールによりリクエストがブロックされ、ブロックされたリクエストのカスタムレスポンスをルール内で設定しない場合、影響を受けた訪問者はCloudflareの1015エラーを表示する429 Errorsページを受け取ります。

ファイアウォールルール（現在は非推奨）で国やIPアドレスをブロックすると、影響を受けた訪問者はあなたの1000 Class Errors pageを受け取ります。

1xxxエラー

1XXX Errorsは、Custom Pagesアプリを介して以下のHTTPエラーをカスタマイズしません：

  • 1001 - 解決できません
  • 1003 - 不正なホストヘッダー
  • 1018 - 所有権の確認失敗により解決できません
  • 1023 - 機能の確認失敗により解決できません

カスタムエラーページのサイズ

カスタムエラーページは空白であってはならず、1.43 MBを超えてはいけません。カスタムエラーページの制限を超えないようにするために、公開前にページサイズをテストするためにプレビューを確認してください。

一般的なトラブルシューティングのアドバイス

  • カスタムエラーページのプレビューまたは公開中にエラーが発生した場合は、HTMLバリデーター ↗を使用して、コードが正しく解決されることを確認してください。
  • カスタムエラーページがHTTP 200ステータスコードで提供されていることを確認してください。

関連リソース

Cloudflare DashboardDiscordCommunityLearning CenterSupport Portal
Cookie Settings