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

Doplňková konfigurace

Podpora více jazyků

Viz podporované jazyky s dalšími informacemi.

Přizpůsobení favicony

Cloudflare Challenges použije favicon vašeho webu pomocí GET /favicon.ico a zobrazí jej na Challenge Page.

Favicon si můžete přizpůsobit pomocí následujícího úryvku HTML.

HTML element

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

Vlastní Content Security Policy (CSP) a chybové stránky

Content Security Policy (CSP) určuje, jaké skripty a zdroje smí prohlížeč na stránce načíst. Stránky s výzvou závisí na konkrétních skriptech Cloudflare, takže vlastní konfigurace CSP může jejich fungování znemožnit.

Vlastní CSP ani Referer-Policy nelze na challenge pages nastavit pomocí <meta> značky nebo Transform Rules. Hlavičky odpovědi origin serveru lze v kontextu stránky s výzvou stále upravovat, ale může to způsobit, že výzva přestane fungovat.

Pokud máte Transform Rule která upravuje hlavičky HTTP odpovědí na celém vašem webu (například přidáním vlastních hlaviček CSP), bude toto pravidlo narušovat stránky s výzvou a způsobovat jejich selhání.

Abyste tomu předešli, upravte výraz Transform Rule tak, aby vylučoval odpovědi se stránkou výzvy. Na začátek výrazu přidejte následující podmínku:

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

Tento výraz přeskočí úpravy vašich hlaviček, pokud Cloudflare zobrazí stránku výzvy, aby se skripty výzvy načetly správně.

Vlastní Challenge Pages

Než ve svém účtu Cloudflare definujete vlastní Challenge Page, musíte tuto stránku navrhnout a naprogramovat. Můžete ji hostovat na vlastním webovém serveru nebo pomocí produktu Cloudflare, jako je Snippets.

Viz Navrhněte si vlastní chybovou stránku s dalšími informacemi.

Jak to funguje

Když nastavíte vlastní stránku s výzvou, Cloudflare načte vámi nahranou šablonu HTML a nahradí v ní ::CF_WIDGET_BOX:: zástupný symbol skriptem výzvy.

Zástupné tokeny

Vlastní chybový token poskytuje diagnostické informace nebo specifickou funkčnost, která se zobrazuje na chybové stránce. Více informací najdete v Chybové tokeny pro další podrobnosti.

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

Požadavky

::CF_WIDGET_BOX:: se musí v těle stránky objevit přesně jednou. Právě sem se vkládá skript challenge.
<head> značka musí být přítomna.
Cloudflare nastaví cTplC: 1 v prohlížeči v window._cf_chl_opt pokud se používá vlastní šablona. Nepřidávejte vlastní window._cf_chl_opt. Jakákoli existující definice způsobí konflikty.
Neblokujte /cdn-cgi/challenge-platform/ cesty prostřednictvím Content Security Policy (CSP). Pokud je tento typ blokování zavedený, výzvy nebudou fungovat správně.
Stránka se zobrazuje pro všechny tři typy výzev (managed, interactive, non-interactive), pokud používáte ::CF_WIDGET_BOX::.

Šablony

Příklad

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

Příklad

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