如何自定义 Cloudflare 错误页面?

目录

  1. 概述
  2. 自定义错误页面
    1. 可用的自定义错误 token
    2. 设计样式
    3. 发布
    4. 更新
  3. 解决自定义错误页面的问题

概述

Cloudflare 拥有多种错误代码,用于区分特定问题。默认情况下,这些错误页面会提到 Cloudflare;但是,作为付费客户,您可以自定义和标记这些错误页面。拥有自定义错误页面有助于为用户提供页面一致性的体验,即使在页面加载错误的情况下也是如此。

可自定义的错误页面分为两组:

Challenge:

  • Basic security
  • Web Application Firewall
  • IP Firewall (Country block, Country challenge, IP (range) block)

Cloudflare 错误:

  • 502, 504, and CF 52X errors
  • 10XX errors
  • Always Online

注意: 500、501、503 和 505 响应不会触发自定义错误页面,以避免破坏特定的 API 端点和其他 Web 应用程序。对于源服务器无法返回请求响应的情况(520-526 错误),应保留自定义错误页面。

自定义错误页面
下面是一个基本的自定义错误模板,您可以在此基础上构建。在创建自定义错误模板时,请注意最大页面大小为 1.5 MB,页面不能为空。此外,所有外部资源都使用 base64 编码内联,发布时大小大约会增加 50%。

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

可用的自定义错误 token
某些类型的自定义错误页面必须在自定义错误页面的 HTML 中的任何位置包含以下 token 之一。 每个错误页面可能只存在一个页面特定的令牌,因此如果您希望自定义每个错误,则需要为包含相应令牌的每个错误创建一个自定义错误页面。

自定义页面类型 token
所有页面 ::CLIENT_IP::
所有页面 ::RAY_ID::
Basic Security (CAPTCHA Challenge) ::CAPTCHA_BOX::
WAF (CAPTCHA Challenge) ::CAPTCHA_BOX::
Country Challenge (CAPTCHA Challenge) ::CAPTCHA_BOX::
I'm Under Attack Mode (Interstitial Page) ::IM_UNDER_ATTACK_BOX::
5XX Errors ::CLOUDFLARE_ERROR_500S_BOX::
1XXX Errors ::CLOUDFLARE_ERROR_1000S_BOX::
Always Online ::ALWAYS_ONLINE_NO_COPY_BOX::

设计样式
每个标记都有一个唯一的类,以用来设置单个错误代码的样式。可以使用 CSS 对 div/span/section 中的标记设置样式,因为它们都具有类 ID。请注意,每个页面(challenge、5xx 错误)将使用不同的 ID,因此您应使用预览选项获取正确的 ID。

发布
完成自定义错误页面后,您需要将其发布到我们的服务器。这可以通过按下每个可自定义错误旁边的“Customize”按钮来完成。按“Customize”按钮后,将显示一个弹出窗口,要求您提供自定义错误页面的 URL。

当您输入自定义错误页面的 URL 并点击“发布”按钮时,我们会一次性请求自定义错误页面,然后将其存储在我们的服务器上。

更新
可以通过重新发布错误页面来更新错误页面。请注意,如果 Cloudflare 无法加载您的网站,或者您已在 Cloudflare 防火墙中阻止了美国,则发布和预览错误页面将不起作用。

解决自定义错误页面的问题

  • 如果您在尝试预览或发布自定义错误页面时遇到错误,请通过 HTML 验证程序运行该页面并确保其没有错误。
  • 确保页面大小大于 0。您需要向页面添加内容。
  • 确保您发送带有 200 状态代码的自定义错误页面。
  • 如果 Cloudflare 无法加载您的网站,或者您已在 IP 防火墙中阻止了美国,则发布和预览错误页面将不起作用。
Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

由 Zendesk 提供技术支持