附加配置 · Cloudflare challenges docs

多语言支持

有关更多信息，请参阅支持的语言。

网站图标 (Favicon) 自定义

Cloudflare Challenges 使用 GET /favicon.ico 获取您网站的 favicon 并将其显示在质询页面上。

您可以使用以下 HTML 片段自定义您的 favicon。

HTML elementhtml

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

自定义内容安全策略 (CSP) 和错误页面

内容安全策略 (CSP) 控制允许浏览器在页面上加载哪些脚本和资源。质询页面依赖于特定的 Cloudflare 脚本，因此自定义 CSP 配置可能会阻止质询起作用。

您不能使用 <meta> 标签或转换规则 (Transform Rules) 在质询页面上设置您自己的 CSP 或 Referer-Policy。在质询页面上下文中，源响应标头仍然可以修改，但这样做可能会导致质询中断。

如果您有转换规则 (Transform Rule) 修改您网站上的 HTTP 响应标头（例如，添加自定义 CSP 标头），该规则将干扰质询页面并导致它们失败。

为了防止这种情况，请修改您的 Transform Rule 表达式以排除质询页面响应。将以下条件添加到表达式的开头：

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

当 Cloudflare 提供质询页面时，此表达式会跳过您的标头修改，以便正确加载质询脚本。

自定义质询页面

在您的 Cloudflare 账户中定义自定义质询页面之前，您需要设计并编写该页面的代码。它可以托管在您自己的 Web 服务器上，也可以使用诸如 Snippets 之类的 Cloudflare 产品。

有关更多信息，请参阅设计自定义错误页面。

工作原理

当您配置自定义质询页面时，Cloudflare 会获取您上传的 HTML 模板并将 ::CF_WIDGET_BOX:: 占位符替换为质询脚本。

占位符令牌

自定义错误令牌提供出现在错误页面上的诊断信息或特定功能。有关更多详细信息，请参阅错误令牌。

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

要求

::CF_WIDGET_BOX:: 必须在 body 中恰好出现一次。这是注入质询脚本的位置。
<head> 标签必须存在。
当使用自定义模板时，Cloudflare 将在浏览器的 window._cf_chl_opt 中设置 cTplC: 1。不要添加您自己的 window._cf_chl_opt。任何现有定义都会引起冲突。
不要通过内容安全策略 (CSP) 阻止 /cdn-cgi/challenge-platform/ 路径。存在此类阻止时，质询将无法正常工作。
如果您使用 ::CF_WIDGET_BOX::，该页面将服务于所有三种质询类型（托管、交互式、非交互式）。

模板

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>