← Challenges / cloudflare-challenges / challenge-types / challenge-pages

Дополнительная настройка

Поддержка нескольких языков

См. поддерживаемые языки, где это описано подробнее.

Настройка favicon

Cloudflare Challenges использует favicon вашего сайта с помощью GET /favicon.ico и отображает его на странице Challenge Page.

Вы можете настроить favicon с помощью приведённого ниже HTML-фрагмента.

HTML-элемент

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

Пользовательская политика Content Security Policy (CSP) и страницы ошибок

Content Security Policy (CSP) определяет, какие скрипты и ресурсы браузеру разрешено загружать на странице. Страницы проверки зависят от определённых скриптов Cloudflare, поэтому собственные настройки CSP могут помешать работе проверок.

Вы не можете задать собственные CSP или Referer-Policy для страниц проверки с помощью <meta> теги или Transform Rules. Заголовки ответа исходного сервера по-прежнему можно изменять в контексте страницы проверки, но это может нарушить её работу.

Если у вас есть Transform Rule который изменяет заголовки HTTP-ответов на всём сайте (например, добавляет собственные заголовки CSP), это правило будет мешать работе страниц проверки и приводить к их сбою.

Чтобы избежать этого, измените выражение Transform Rule так, чтобы оно исключало ответы со страницей Challenge. Добавьте в начало выражения следующее условие:

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

Это выражение пропускает изменение заголовков, когда Cloudflare показывает страницу Challenge, чтобы скрипты Challenge корректно загружались.

Пользовательские Challenge Pages

Прежде чем настраивать собственную Challenge Page в аккаунте Cloudflare, вам нужно спроектировать и написать код этой страницы. Разместить её можно на собственном веб-сервере или с помощью продукта Cloudflare, например Snippets.

См. Создайте собственную страницу ошибки, где это описано подробнее.

Как это работает

Когда вы настраиваете пользовательскую страницу проверки, Cloudflare загружает ваш HTML-шаблон и заменяет в нём ::CF_WIDGET_BOX:: заполнитель на скрипт проверки.

Токены-заглушки

Пользовательский токен ошибки содержит диагностическую информацию или обеспечивает специфическую функциональность, отображаемую на странице ошибки. См. Токены ошибок для дополнительных сведений.

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

Требования

::CF_WIDGET_BOX:: должен присутствовать в теле страницы ровно один раз. Именно сюда добавляется скрипт проверки.
<head> тег должен присутствовать.
Cloudflare установит cTplC: 1 в браузере window._cf_chl_opt при использовании собственного шаблона. Не добавляйте свой window._cf_chl_opt. Любое уже существующее определение вызовет конфликты.
Не блокируйте /cdn-cgi/challenge-platform/ пути через Content Security Policy (CSP). При такой блокировке проверки не будут работать корректно.
Эта страница отображается для всех трёх типов challenge (managed, interactive, non-interactive), если вы используете ::CF_WIDGET_BOX::.

Шаблоны

Пример

<!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>

Пример

<!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>