在网页展示上 Cloudflare 网关跟踪信息 —— Cloudflare-Trace-Info-on-Web | Lufs's Blog

在网页任意位置展示当前 Cloudflare 节点、用户 IP、地区等信息～

前言

我自己的网站和我给实验室搭建的网站都套用了 Cloudflare 来当 CDN，但在国内 Cloudflare Free Plan 在默认情况下的速度就是一个迷，显示下节点信息好歹能知道速度咋样（顺便填充下空空的底部

而 Cloudflare 一直都有提供 /cdn-cgi/trace 接口，展示一些网关跟踪信息，不如把它弄到网页上吧～

实现

访问 https://blog.isteed.cc/cdn-cgi/trace 即可看到 Cloudflare 网关跟踪信息

fl=503f97
h=blog.isteed.cc
ip=114.51.41.191
ts=1734761838.666
visit_scheme=https
uag=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0
colo=LAX
sliver=none
http=http/2
loc=CN
tls=TLSv1.3
sni=plaintext
warp=off
gateway=off
rbi=off
kex=X25519MLKEM768

要做的就是，将其解析并展示在网页上，并给每个节点加上对应地区的详细信息

爬取 Cloudflare 节点信息

既然要节点信息，那就不如参照 Cloudflare 文档，里面给出了具体的 colo 代表的意义

The three-letter code in the data center name is the IATA code of the nearest major international airport.

即 colo 是离节点最近的机场的 IATA 代码，写了个脚本从 Cloudflare System Status 抓取 Cloudflare 所有节点信息，然后再人工手撸其中文翻译（不要问，问就是懒得脚本接翻译 🤣

这坨能用的代码放 LufsX/Cloudflare-Data-Center-IATA-Code-list 了

数据文件整理成了

• 中文
  • GitHub Raw: https://github.com/LufsX/Cloudflare-Data-Center-IATA-Code-list/raw/main/cloudflare-iata-zh.json
  • Jsdelivr CDN: https://cdn.jsdelivr.net/gh/LufsX/Cloudflare-Data-Center-IATA-Code-list/cloudflare-iata-zh.json
• 英文
  • GitHub Raw: https://github.com/LufsX/Cloudflare-Data-Center-IATA-Code-list/raw/main/cloudflare-iata.json
  • Jsdelivr CDN: https://cdn.jsdelivr.net/gh/LufsX/Cloudflare-Data-Center-IATA-Code-list/cloudflare-iata.json

用抽象的纯静态文件做了个简易 API，方便调用

• https://iata.isteed.cc/<zh|en>/<IATA Code>
  • <zh|en>: 语言 Language，zh 中文 Chinese，en 英文 English
  • <IATA Code>: IATA 代码

解析 Cloudflare 节点信息

其实解析做起来很简单，格式规范且工整，直接 split 一下就行了，没啥含金量

const response = await fetch("/cdn-cgi/trace");
if (!response.ok) throw new Error("Failed to fetch Cloudflare trace data");
const text = await response.text();
data = Object.fromEntries(
  text
    .trim()
    .split("\n")
    .map((line) => line.split("="))
);

展示到网页

展示到网页可以用自定义，毕竟只会写这点 JavaScript，直接原生 JS 算了，支持了个模版自定义，可以在页面完全加载完毕后再插入所有的元素～

直接就用了 JavaScript 字符串模版格式，不用多的学习成本，把获取到的信息格式化后插入到网页，就完成了最后的需求～

成果

把所有 js 封装好了，直接嵌入网页就可以了，详见 LufsX/Cloudflare-Trace-Info-on-Web（欢迎 Star 😋

有两个版本，一个是直接内置了所有节点信息，Cloudflare 节点太多，导致 js 体积很大（Minify 后都有 17.49KiB），另一个从 API 获取节点信息，仅仅额外请求返回了个文本，但体积很小（Minify 后有 1.24KiB）

---

在网页任意处插入以下内容

<script type="text/javascript" src="https://npm.onmicrosoft.cn/cloudflare-trace-info-on-web@0.0.5/cftiw.min.js"></script>
<div class="cloudflare-trace-info">加载完成前显示的文本</div>

Cloudflare Trace Info on Web => cftiw

---

通过 API 获取 IATA 数据，可以减小加载的脚本体积 17KB => 1.2KB

<script type="text/javascript" src="https://npm.onmicrosoft.cn/cloudflare-trace-info-on-web@0.0.5/cftiwo.min.js"></script>
<div class="cloudflare-trace-info">加载完成前显示的文本</div>

Cloudflare Trace Info on Web Online Edition => cftiwo

用法

该脚本在页面加载完成 (DOMContentLoaded) 后将信息插入进 ID 为 cloudflare-trace-info 的元素中

参数有 data-hide-ip、data-hide-loc 和 data-template

• data-hide-ip
  • 在显示的内容中隐藏 IP 信息
• data-hide-loc
  • 在显示的内容中隐藏位置信息
• data-template
  • 自定义内容模版
  • 具体支持参数见 /cdn-cgi/trace
  • 额外支持参数 ${iata} IATA 地区信息

<script type="text/javascript" src="https://npm.onmicrosoft.cn/cloudflare-trace-info-on-web@0.0.5/cftiwo.min.js"></script>
<!-- 默认状态 -->
<div class="cloudflare-trace-info">加载完成前显示的文本</div>
<!-- 隐藏 IP 信息 -->
<div class="cloudflare-trace-info" data-hide-ip></div>
<!-- 隐藏位置信息 -->
<div class="cloudflare-trace-info" data-hide-loc></div>
<!-- 自定义内容模版 -->
<div class="cloudflare-trace-info" data-template="位置：${loc} · IP：${ip} · 数据中心：[${colo}]${iata} · TLS 版本：${tls} · 时间戳：${ts}"></div>

对应效果如下

---

加载完成前显示的文本

---

当 data-template 有内容时，data-hide-ip 和 data-hide-loc 无法生效

参考

• Cloudflare 文档
• Cloudflare System Status

碎碎念

早就写好了，但就是懒得发，今天刚好不懒了，给博客多水水，水水更健康 🤣