追加の設定

多言語対応

詳しくは対応言語を参照してください。

favicon のカスタマイズ

Cloudflare Challenges は GET /favicon.ico でウェブサイトの favicon を取得し、Challenge Page に表示します。

次の HTML スニペットで favicon をカスタマイズできます。

HTML elementhtml

<link rel="shortcut icon" href="<FAVICON_LINK>" />

カスタム Content Security Policy (CSP) とエラーページ

Content Security Policy (CSP) は、ブラウザーがそのページで読み込めるスクリプトとリソースを制御します。Challenge Page は特定の Cloudflare スクリプトに依存するため、カスタム CSP の設定によっては Challenge が動作しなくなることがあります。

<meta> タグや Transform Rules を使って、Challenge Page に独自の CSP や Referer-Policy を設定することはできません。オリジンのレスポンスヘッダーは Challenge Page のコンテキストでも変更できますが、変更すると Challenge が壊れることがあります。

ウェブサイト全体の HTTP レスポンスヘッダーを変更する Transform Rule がある場合（例: カスタム CSP ヘッダーの追加）、そのルールは Challenge Page に干渉し、失敗の原因になります。

これを防ぐには、Transform Rule の式を変更して、Challenge Page のレスポンスを除外します。式の先頭に次の条件を追加します。

not cf.response.error_type in {"managed_challenge" "iuam" "legacy_challenge" "country_challenge"}

この式は、Cloudflare が Challenge Page を返すときにヘッダー変更をスキップします。Challenge のスクリプトは正しく読み込まれます。

カスタム Challenge Page

Cloudflare アカウントでカスタム Challenge Page を定義する前に、そのページを設計して実装する必要があります。自前のウェブサーバーでも、Snippets などの Cloudflare 製品でもホストできます。

詳しくはカスタムエラーページを設計するを参照してください。

仕組み

カスタム Challenge Page を設定すると、Cloudflare はアップロードされた HTML テンプレートを取得し、::CF_WIDGET_BOX:: プレースホルダーを Challenge スクリプトに置き換えます。

プレースホルダートークン

カスタムエラートークンは、エラーページに表示する診断情報や特定の機能を提供します。詳しくは Error tokens を参照してください。

::CF_WIDGET_BOX::
::CAPTCHA_BOX::
::IM_UNDER_ATTACK_BOX::
::CLIENT_IP::
::RAY_ID::
::GEO::

要件

::CF_WIDGET_BOX:: は <body> 内にちょうど 1 回だけ必要です。ここに Challenge スクリプトが挿入されます。
<head> タグが必要です。
カスタムテンプレート使用時、Cloudflare はブラウザーの window._cf_chl_opt に cTplC: 1 を設定します。独自の window._cf_chl_opt は追加しないでください。既存の定義があると競合します。
Content Security Policy (CSP) で /cdn-cgi/challenge-platform/ パスをブロックしないでください。この種のブロックがあると、Challenge は正しく動作しません。
::CF_WIDGET_BOX:: を使うと、3 種類すべての Challenge（managed、interactive、non-interactive）でこのページが使われます。

テンプレート

Examplehtml

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Example Title</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
  ::CF_WIDGET_BOX::
</body>
</html>

Examplehtml

<!DOCTYPE html>
<html lang="en-US">
<head>
  <title>Security Check — example.com</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="robots" content="noindex,nofollow">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1a1a2e;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
    .card {
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
      padding: 2.5rem 3rem;
      max-width: 520px;
      width: 100%;
      text-align: center;
    }
    .logo {
      width: 64px;
      height: 64px;
      margin: 0 auto 1.5rem;
    }
    h1 {
      font-size: 1.4rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    .subtitle {
      font-size: 0.95rem;
      color: #666;
      margin-bottom: 2rem;
      line-height: 1.5;
    }
    /* The challenge widget will be injected here — give it space */
    .challenge-widget {
      margin: 1.5rem 0;
      min-height: 65px;        /* Turnstile widget is ~65px tall */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .meta {
      margin-top: 2rem;
      font-size: 0.75rem;
      color: #aaa;
      line-height: 1.6;
    }
    noscript .noscript-warning {
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 8px;
      padding: 1rem;
      font-size: 0.9rem;
      color: #856404;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <div class="card">
    <!-- Your logo / branding -->
    <svg class="logo" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="32" cy="32" r="32" fill="#E8F4FD"/>
      <path d="M32 16a16 16 0 1 1 0 32A16 16 0 0 1 32 16zm0 4a12 12 0 1 0 0 24A12 12 0 0 0 32 20z"
            fill="#0051C3"/>
      <circle cx="32" cy="32" r="4" fill="#0051C3"/>
    </svg>
    <h1>Verifying you are human</h1>
    <p class="subtitle">
      This security check helps us protect example.com from automated traffic.
      It will only take a moment.
    </p>
    <noscript>
      <div class="noscript-warning">
        Please enable JavaScript and cookies to continue.
      </div>
    </noscript>
    <!--
      REQUIRED: One of the following placeholders must appear exactly once.
      Cloudflare will replace it with the challenge bootstrap <script>.
      Use ::CF_WIDGET_BOX:: for all challenge types (recommended).
      Older alternatives:
        ::CAPTCHA_BOX::          — managed / interactive challenges
        ::IM_UNDER_ATTACK_BOX:: — non-interactive / JS challenge
    -->
    <div class="challenge-widget">
      ::CF_WIDGET_BOX::
    </div>
    <div class="meta">
      Performance & security by your company<br>
      Ray ID: <code>::RAY_ID::</code> •
      Your IP: <code>::CLIENT_IP::</code> •
      Country: <code>::GEO::</code>
    </div>
  </div>
</body>
</html>