效果
正如本站底部右下角所显示的那样当前CDN节点: San Jose, CA, United States - (SJC)，是不是感觉有炫酷？请继续往下看
原理与实现
当一个网站开启了CloudFlare的CDN页面时，会出现一个CF（CloudFlare简称，下同）的CDN测试页面，就在这里域名/cdn-cgi/trace，我这里访问得到的应答是以下：
fl=XXX
h=huai.pub
ip=XXXX # 用户本地IP
ts=1584093702.641
visit_scheme=https
uag=XXXX # 用户的浏览器UA
colo=SJC # CF的CDN节点
http=http/2
loc=CN
tls=TLSv1.3
sni=plaintext
warp=off
所以我们需要取出colo字段，当然这里只是简写。我们可以在 https://www.cloudflarestatus.com/ 获取全部节点信息。我们刚才拿到的的SJC就是San Jose, CA, United States - (SJC)。这样的话，实现方法就来了，我就直接贴代码了。
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<!--引入JQuery，如果别处引入过滤，可省略-->
当前CDN节点: <span id="cdn">unknown</span>
<!--在适当的地方放入需要显示CDN节点的信息-->
<script>
getCDNinfo = function() {
$.ajax({
url: "/cdn-cgi/trace",
success: function(data, status) {
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* let areas = "Antananarivo, Madagascar - (TNR);Cape Town, South Africa - (CPT);Casablanca, Morocco - (CMN);Dar Es Salaam, Tanzania - (DAR);Djibouti City, Djibouti - (JIB);Durban, South Africa - (DUR);Johannesburg, South Africa - (JNB);Kigali, Rwanda - (KGL);Lagos, Nigeria - (LOS);Luanda, Angola - (LAD);Maputo, MZ - (MPM);Mombasa, Kenya - (MBA);Port Louis, Mauritius - (MRU);Réunion, France - (RUN);Bangalore, India - (BLR);Bangkok, Thailand - (BKK);Bandar Seri Begawan, Brunei - (BWN);Cebu, Philippines - (CEB);Chengdu, China - (CTU);Chennai, India - (MAA);Chittagong, Bangladesh - (CGP);Chongqing, China - (CKG);Colombo, Sri Lanka - (CMB);Dhaka, Bangladesh - (DAC);Dongguan, China - (SZX);Foshan, China - (FUO);Fuzhou, China - (FOC);Guangzhou, China - (CAN);Hangzhou, China - (HGH);Hanoi, Vietnam - (HAN);Hengyang, China - (HNY);Ho Chi Minh City, Vietnam - (SGN);Hong Kong - (HKG);Hyderabad, India - (HYD);Islamabad, Pakistan - (ISB);Jakarta, Indonesia - (CGK);Jinan, China - (TNA);Karachi, Pakistan - (KHI);Kathmandu, Nepal - (KTM);Kolkata, India - (CCU);Kuala Lumpur, Malaysia - (KUL);Lahore, Pakistan - (LHE);Langfang, China - (NAY);Luoyang, China - (LYA);Macau - (MFM);Malé, Maldives - (MLE);Manila, Philippines - (MNL);Mumbai, India - (BOM);Nagpur, India - (NAG);Nanning, China - (NNG);New Delhi, India - (DEL);Osaka, Japan - (KIX);Phnom Penh, Cambodia - (PNH);Qingdao, China - (TAO);Seoul, South Korea - (ICN);Shanghai, China - (SHA);Shenyang, China - (SHE);Shijiazhuang, China - (SJW);Singapore, Singapore - (SIN);Suzhou, China - (SZV);Taipei - (TPE);Thimphu, Bhutan - (PBH);Tianjin, China - (TSN);Tokyo, Japan - (NRT);Ulaanbaatar, Mongolia - (ULN);Vientiane, Laos - (VTE);Wuhan, China - (WUH);Wuxi, China - (WUX);Xi'an, China - (XIY);Yerevan, Armenia - (EVN);Zhengzhou, China - (CGO);Zuzhou, China - (CSX);Amsterdam, Netherlands - (AMS);Athens, Greece - (ATH);Barcelona, Spain - (BCN);Belgrade, Serbia - (BEG);Berlin, Germany - (TXL);Brussels, Belgium - (BRU);Bucharest, Romania - (OTP);Budapest, Hungary - (BUD);Chișinău, Moldova - (KIV);Copenhagen, Denmark - (CPH);Cork, Ireland - (ORK);Dublin, Ireland - (DUB);Düsseldorf, Germany - (DUS);Edinburgh, United Kingdom - (EDI);Frankfurt, Germany - (FRA);Geneva, Switzerland - (GVA);Gothenburg, Sweden - (GOT);Hamburg, Germany - (HAM);Helsinki, Finland - (HEL);Istanbul, Turkey - (IST);Kyiv, Ukraine - (KBP);Lisbon, Portugal - (LIS);London, United Kingdom - (LHR);Luxembourg City, Luxembourg - (LUX);Madrid, Spain - (MAD);Manchester, United Kingdom - (MAN);Marseille, France - (MRS);Milan, Italy - (MXP);Moscow, Russia - (DME);Munich, Germany - (MUC);Nicosia, Cyprus - (LCA);Oslo, Norway - (OSL);Paris, France - (CDG);Prague, Czech Republic - (PRG);Reykjavík, Iceland - (KEF);Riga, Latvia - (RIX);Rome, Italy - (FCO);Saint Petersburg, Russia - (LED);Sofia, Bulgaria - (SOF);Stockholm, Sweden - (ARN);Tallinn, Estonia - (TLL);Thessaloniki, Greece - (SKG);Vienna, Austria - (VIE);Vilnius, Lithuania - (VNO);Warsaw, Poland - (WAW);Zagreb, Croatia - (ZAG);Zürich, Switzerland - (ZRH);Arica, Chile - (ARI);Asunción, Paraguay - (ASU);Bogotá, Colombia - (BOG);Buenos Aires, Argentina - (EZE);Curitiba, Brazil - (CWB);Fortaleza, Brazil - (FOR);Guatemala City, Guatemala - (GUA);Lima, Peru - (LIM);Medellín, Colombia - (MDE);Panama City, Panama - (PTY);Porto Alegre, Brazil - (POA);Quito, Ecuador - (UIO);Rio de Janeiro, Brazil - (GIG);São Paulo, Brazil - (GRU);Santiago, Chile - (SCL);Willemstad, Curaçao - (CUR);St. George's, Grenada - (GND);Amman, Jordan - (AMM);Baghdad, Iraq - (BGW);Baku, Azerbaijan - (GYD);Beirut, Lebanon - (BEY);Doha, Qatar - (DOH);Dubai, United Arab Emirates - (DXB);Kuwait City, Kuwait - (KWI);Manama, Bahrain - (BAH);Muscat, Oman - (MCT);Ramallah - (ZDM);Riyadh, Saudi Arabia - (RUH);Tel Aviv, Israel - (TLV);Ashburn, VA, United States - (IAD);Atlanta, GA, United States - (ATL);Boston, MA, United States - (BOS);Buffalo, NY, United States - (BUF);Calgary, AB, Canada - (YYC);Charlotte, NC, United States - (CLT);Chicago, IL, United States - (ORD);Columbus, OH, United States - (CMH);Dallas, TX, United States - (DFW);Denver, CO, United States - (DEN);Detroit, MI, United States - (DTW);Honolulu, HI, United States - (HNL);Houston, TX, United States - (IAH);Indianapolis, IN, United States - (IND);Jacksonville, FL, United States - (JAX);Kansas City, MO, United States - (MCI);Las Vegas, NV, United States - (LAS);Los Angeles, CA, United States - (LAX);McAllen, TX, United States - (MFE);Memphis, TN, United States - (MEM);Mexico City, Mexico - (MEX);Miami, FL, United States - (MIA);Minneapolis, MN, United States - (MSP);Montgomery, AL, United States - (MGM);Montréal, QC, Canada - (YUL);Nashville, TN, United States - (BNA);Newark, NJ, United States - (EWR);Norfolk, VA, United States - (ORF);Omaha, NE, United States - (OMA);Philadelphia, United States - (PHL);Phoenix, AZ, United States - (PHX);Pittsburgh, PA, United States - (PIT);Port-Au-Prince, Haiti - (PAP);Portland, OR, United States - (PDX);Queretaro, MX, Mexico - (QRO);Richmond, Virginia - (RIC);Sacramento, CA, United States - (SMF);Salt Lake City, UT, United States - (SLC);San Diego, CA, United States - (SAN);San Jose, CA, United States - (SJC);Saskatoon, SK, Canada - (YXE);Seattle, WA, United States - (SEA);St. Louis, MO, United States - (STL);Tampa, FL, United States - (TPA);Toronto, ON, Canada - (YYZ);Vancouver, BC, Canada - (YVR);Tallahassee, FL, United States - (TLH);Winnipeg, MB, Canada - (YWG);Adelaide, SA, Australia - (ADL);Auckland, New Zealand - (AKL);Brisbane, QLD, Australia - (BNE);Melbourne, VIC, Australia - (MEL);Noumea, New caledonia - (NOU);Perth, WA, Australia - (PER);Sydney, NSW, Australia - (SYD)".split(";");
*/
let area = data.split("colo=")[1].split("\n")[0];
for (var i = 0; i < areas.length; i++) {
if (areas[i].indexOf(area) != -1) {
document.getElementById("cdn").innerHTML = areas[i];
break;
}
}
}
})
}
$(document).ready(function() {
getCDNinfo();
//页面加载完毕就获取CDN信息
});
</script>好了，下面就可以看到你当前访问所使用的节点了！
可以看到我们对/cdn-cgi/trace发起了请求，获得信息之后截取出colo=后面的信息（节点所在城市的机场代码），然后寻找对应的城市名字。
也可以分开写，单独js代码。直接在footer.php中引入js即可。
//引入JQuery，如果别处引入过，可省略
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
//然后引入cdn.js
<script type="text/javascript" src="/usr/cdn.js"></script>
//最后在html加载完之后调用
$(document).ready(function() {
getCDNinfo();
console.log("获取CDN信息");
//页面加载完毕就获取CDN信息
});代码
我修改了一下原文章中获取脚本的返回，缩减了一点点代码~~，然后增加了n多代码~~
原脚本用indexOf()匹配节点，修改版用正则替换了一下，改成了数组内套json的方法绝对不是看原版的括号不爽，这样更直接，难出错。
格式化后的JavaScript脚本，太长了，这里把它先折叠起来
修改版将所有的中国节点加上了国旗emoji，替换为了中文，有兴趣的同学也可以自行替换其他节点
不过Cloudflare大陆节点只有Enterprise Plan用户且已备案才能使用，咱也不是sukka那种巨佬我不认为能看到大陆节点出现的那一天😢
原理
Cloudflare为所有客户加上了/cdn-cgi/端点，任何一个套了Cloudflare的网站访问example.com/cdn-cgi/trace后都会返回用户现在的信息，如ip地址、CDN节点、是否开启WARP、tls协议版本等。
那么就可以在前端访问这个端点，再进行解析，将内容写入前段对应id的标签内，就可以呈现出目前的用户与Cloudflare CDN间的关系了。
使用
前提
由于使用了jQuery来访问cdn-cgi，所以使用这个脚本需要先引入这个库。已经引用了此库的博客无需再次引用。
目前大部分博客都用了jQuery库，所以大概率无需改代码。实在没有的可以简单改写下该脚本再使用
min缩减版：
$(document).ready($.ajax({url: "/cdn-cgi/trace",success: function(data, status) {let areas=['{"s":"TNR","l":"Antananarivo, Madagascar"}','{"s":"CPT","l":"Cape Town, South Africa"}','{"s":"CMN","l":"Casablanca, Morocco"}','{"s":"DAR","l":"Dar Es Salaam, Tanzania"}','{"s":"JIB","l":"Djibouti City, Djibouti"}','{"s":"DUR","l":"Durban, South Africa"}','{"s":"JNB","l":"Johannesburg, South Africa"}','{"s":"KGL","l":"Kigali, Rwanda"}','{"s":"LOS","l":"Lagos, Nigeria"}','{"s":"LAD","l":"Luanda, Angola"}','{"s":"MPM","l":"Maputo, MZ"}','{"s":"MBA","l":"Mombasa, Kenya"}','{"s":"MRU","l":"Port Louis, Mauritius"}','{"s":"RUN","l":"Réunion, France"}','{"s":"BLR","l":"Bangalore, India"}','{"s":"BKK","l":"Bangkok, Thailand"}','{"s":"BWN","l":"Bandar Seri Begawan, Brunei"}','{"s":"CEB","l":"Cebu, Philippines"}','{"s":"CTU","l":"成都, 🇨🇳 中国大陆"}','{"s":"MAA","l":"Chennai, India"}','{"s":"CGP","l":"Chittagong, Bangladesh"}','{"s":"CKG","l":"重庆, 🇨🇳 中国大陆"}','{"s":"CMB","l":"Colombo, Sri Lanka"}','{"s":"DAC","l":"Dhaka, Bangladesh"}','{"s":"SZX","l":"东莞, 🇨🇳 中国大陆"}','{"s":"FUO","l":"佛山, 🇨🇳 中国大陆"}','{"s":"FOC","l":"福州, 🇨🇳 中国大陆"}','{"s":"CAN","l":"广州, 🇨🇳 中国大陆"}','{"s":"HGH","l":"杭州, 🇨🇳 中国大陆"}','{"s":"HAN","l":"Hanoi, Vietnam"}','{"s":"HNY","l":"衡阳, 🇨🇳 中国大陆"}','{"s":"SGN","l":"Ho Chi Minh City, Vietnam"}','{"s":"HKG","l":"🇭🇰 香港"}','{"s":"HYD","l":"Hyderabad, India"}','{"s":"ISB","l":"Islamabad, Pakistan"}','{"s":"CGK","l":"Jakarta, Indonesia"}','{"s":"TNA","l":"济南, 🇨🇳 中国大陆"}','{"s":"KHI","l":"Karachi, Pakistan"}','{"s":"KTM","l":"Kathmandu, Nepal"}','{"s":"CCU","l":"Kolkata, India"}','{"s":"KUL","l":"Kuala Lumpur, Malaysia"}','{"s":"LHE","l":"Lahore, Pakistan"}','{"s":"NAY","l":"廊坊, 🇨🇳 中国大陆"}','{"s":"LYA","l":"洛阳, 🇨🇳 中国大陆"}','{"s":"MFM","l":"🇲🇴 澳门"}','{"s":"MLE","l":"Malé, Maldives"}','{"s":"MNL","l":"Manila, Philippines"}','{"s":"BOM","l":"Mumbai, India"}','{"s":"NAG","l":"Nagpur, India"}','{"s":"NNG","l":"南宁, 🇨🇳 中国大陆"}','{"s":"DEL","l":"New Delhi, India"}','{"s":"KIX","l":"Osaka, Japan"}','{"s":"PNH","l":"Phnom Penh, Cambodia"}','{"s":"TAO","l":"青岛, 🇨🇳 中国大陆"}','{"s":"ICN","l":"Seoul, South Korea"}','{"s":"SHA","l":"上海, 🇨🇳 中国大陆"}','{"s":"SHE","l":"沈阳, 🇨🇳 中国大陆"}','{"s":"SJW","l":"石家庄, 🇨🇳 中国大陆"}','{"s":"SIN","l":"Singapore, Singapore"}','{"s":"SZV","l":"苏州, 🇨🇳 中国大陆"}','{"s":"TPE","l":"台北, 🇨🇳 台湾"}','{"s":"PBH","l":"Thimphu, Bhutan"}','{"s":"TSN","l":"天津, 🇨🇳 中国大陆"}','{"s":"NRT","l":"Tokyo, Japan"}','{"s":"ULN","l":"Ulaanbaatar, Mongolia"}','{"s":"VTE","l":"Vientiane, Laos"}','{"s":"WUH","l":"武汉, 🇨🇳 中国大陆"}','{"s":"WUX","l":"无锡, 🇨🇳 中国大陆"}','{"s":"XIY","l":"西安, 🇨🇳 中国大陆"}','{"s":"EVN","l":"Yerevan, Armenia"}','{"s":"CGO","l":"郑州, 🇨🇳 中国大陆"}','{"s":"CSX","l":"株洲, 🇨🇳 中国大陆"}','{"s":"AMS","l":"Amsterdam, Netherlands"}','{"s":"ATH","l":"Athens, Greece"}','{"s":"BCN","l":"Barcelona, Spain"}','{"s":"BEG","l":"Belgrade, Serbia"}','{"s":"TXL","l":"Berlin, Germany"}','{"s":"BRU","l":"Brussels, Belgium"}','{"s":"OTP","l":"Bucharest, Romania"}','{"s":"BUD","l":"Budapest, Hungary"}','{"s":"KIV","l":"Chișinău, Moldova"}','{"s":"CPH","l":"Copenhagen, Denmark"}','{"s":"ORK","l":"Cork, Ireland"}','{"s":"DUB","l":"Dublin, Ireland"}','{"s":"DUS","l":"Düsseldorf, Germany"}','{"s":"EDI","l":"Edinburgh, United Kingdom"}','{"s":"FRA","l":"Frankfurt, Germany"}','{"s":"GVA","l":"Geneva, Switzerland"}','{"s":"GOT","l":"Gothenburg, Sweden"}','{"s":"HAM","l":"Hamburg, Germany"}','{"s":"HEL","l":"Helsinki, Finland"}','{"s":"IST","l":"Istanbul, Turkey"}','{"s":"KBP","l":"Kyiv, Ukraine"}','{"s":"LIS","l":"Lisbon, Portugal"}','{"s":"LHR","l":"London, United Kingdom"}','{"s":"LUX","l":"Luxembourg City, Luxembourg"}','{"s":"MAD","l":"Madrid, Spain"}','{"s":"MAN","l":"Manchester, United Kingdom"}','{"s":"MRS","l":"Marseille, France"}','{"s":"MXP","l":"Milan, Italy"}','{"s":"DME","l":"Moscow, Russia"}','{"s":"MUC","l":"Munich, Germany"}','{"s":"LCA","l":"Nicosia, Cyprus"}','{"s":"OSL","l":"Oslo, Norway"}','{"s":"CDG","l":"Paris, France"}','{"s":"PRG","l":"Prague, Czech Republic"}','{"s":"KEF","l":"Reykjavík, Iceland"}','{"s":"RIX","l":"Riga, Latvia"}','{"s":"FCO","l":"Rome, Italy"}','{"s":"LED","l":"Saint Petersburg, Russia"}','{"s":"SOF","l":"Sofia, Bulgaria"}','{"s":"ARN","l":"Stockholm, Sweden"}','{"s":"TLL","l":"Tallinn, Estonia"}','{"s":"SKG","l":"Thessaloniki, Greece"}','{"s":"VIE","l":"Vienna, Austria"}','{"s":"VNO","l":"Vilnius, Lithuania"}','{"s":"WAW","l":"Warsaw, Poland"}','{"s":"ZAG","l":"Zagreb, Croatia"}','{"s":"ZRH","l":"Zürich, Switzerland"}','{"s":"ARI","l":"Arica, Chile"}','{"s":"ASU","l":"Asunción, Paraguay"}','{"s":"BOG","l":"Bogotá, Colombia"}','{"s":"EZE","l":"Buenos Aires, Argentina"}','{"s":"CWB","l":"Curitiba, Brazil"}','{"s":"FOR","l":"Fortaleza, Brazil"}','{"s":"GUA","l":"Guatemala City, Guatemala"}','{"s":"LIM","l":"Lima, Peru"}','{"s":"MDE","l":"Medellín, Colombia"}','{"s":"PTY","l":"Panama City, Panama"}','{"s":"POA","l":"Porto Alegre, Brazil"}','{"s":"UIO","l":"Quito, Ecuador"}','{"s":"GIG","l":"Rio de Janeiro, Brazil"}','{"s":"GRU","l":"São Paulo, Brazil"}','{"s":"SCL","l":"Santiago, Chile"}','{"s":"CUR","l":"Willemstad, Curaçao"}','{"s":"GND","l":"St. George‘s, Grenada"}','{"s":"AMM","l":"Amman, Jordan"}','{"s":"BGW","l":"Baghdad, Iraq"}','{"s":"GYD","l":"Baku, Azerbaijan"}','{"s":"BEY","l":"Beirut, Lebanon"}','{"s":"DOH","l":"Doha, Qatar"}','{"s":"DXB","l":"Dubai, United Arab Emirates"}','{"s":"KWI","l":"Kuwait City, Kuwait"}','{"s":"BAH","l":"Manama, Bahrain"}','{"s":"MCT","l":"Muscat, Oman"}','{"s":"ZDM","l":"Ramallah"}','{"s":"RUH","l":"Riyadh, Saudi Arabia"}','{"s":"TLV","l":"Tel Aviv, Israel"}','{"s":"IAD","l":"Ashburn, VA, United States"}','{"s":"ATL","l":"Atlanta, GA, United States"}','{"s":"BOS","l":"Boston, MA, United States"}','{"s":"BUF","l":"Buffalo, NY, United States"}','{"s":"YYC","l":"Calgary, AB, Canada"}','{"s":"CLT","l":"Charlotte, NC, United States"}','{"s":"ORD","l":"Chicago, IL, United States"}','{"s":"CMH","l":"Columbus, OH, United States"}','{"s":"DFW","l":"Dallas, TX, United States"}','{"s":"DEN","l":"Denver, CO, United States"}','{"s":"DTW","l":"Detroit, MI, United States"}','{"s":"HNL","l":"Honolulu, HI, United States"}','{"s":"IAH","l":"Houston, TX, United States"}','{"s":"IND","l":"Indianapolis, IN, United States"}','{"s":"JAX","l":"Jacksonville, FL, United States"}','{"s":"MCI","l":"Kansas City, MO, United States"}','{"s":"LAS","l":"Las Vegas, NV, United States"}','{"s":"LAX","l":"Los Angeles, CA, United States"}','{"s":"MFE","l":"McAllen, TX, United States"}','{"s":"MEM","l":"Memphis, TN, United States"}','{"s":"MEX","l":"Mexico City, Mexico"}','{"s":"MIA","l":"Miami, FL, United States"}','{"s":"MSP","l":"Minneapolis, MN, United States"}','{"s":"MGM","l":"Montgomery, AL, United States"}','{"s":"YUL","l":"Montréal, QC, Canada"}','{"s":"BNA","l":"Nashville, TN, United States"}','{"s":"EWR","l":"Newark, NJ, United States"}','{"s":"ORF","l":"Norfolk, VA, United States"}','{"s":"OMA","l":"Omaha, NE, United States"}','{"s":"PHL","l":"Philadelphia, United States"}','{"s":"PHX","l":"Phoenix, AZ, United States"}','{"s":"PIT","l":"Pittsburgh, PA, United States"}','{"s":"PAP","l":"Port-Au-Prince, Haiti"}','{"s":"PDX","l":"Portland, OR, United States"}','{"s":"QRO","l":"Queretaro, MX, Mexico"}','{"s":"RIC","l":"Richmond, Virginia"}','{"s":"SMF","l":"Sacramento, CA, United States"}','{"s":"SLC","l":"Salt Lake City, UT, United States"}','{"s":"SAN","l":"San Diego, CA, United States"}','{"s":"SJC","l":"San Jose, CA, United States"}','{"s":"YXE","l":"Saskatoon, SK, Canada"}','{"s":"SEA","l":"Seattle, WA, United States"}','{"s":"STL","l":"St. Louis, MO, United States"}','{"s":"TPA","l":"Tampa, FL, United States"}','{"s":"YYZ","l":"Toronto, ON, Canada"}','{"s":"YVR","l":"Vancouver, BC, Canada"}','{"s":"TLH","l":"Tallahassee, FL, United States"}','{"s":"YWG","l":"Winnipeg, MB, Canada"}','{"s":"ADL","l":"Adelaide, SA, Australia"}','{"s":"AKL","l":"Auckland, New Zealand"}','{"s":"BNE","l":"Brisbane, QLD, Australia"}','{"s":"MEL","l":"Melbourne, VIC, Australia"}','{"s":"NOU","l":"Noumea, New caledonia"}','{"s":"PER","l":"Perth, WA, Australia"}','{"s":"SYD","l":"Sydney, NSW, Australia"}'];let area = data.split("colo=")[1].split("\n")[0];for (var i = 0; i < areas.length; i++) {const as = JSON.parse(areas[i]);if (as.s == area) {document.getElementById("cdn").innerHTML = as.l;break;}}}}));
放入<script></script>内或者作为文件引用皆可。
显示节点信息
在想要呈现节点信息的地方添加<span id="cdn"></span>即可
效果可见本博客下方