id: e3536a4d3a454bac9e4385584908fc5d
parent_id: 
item_type: 1
item_id: dbe4c5b05b2d4ec9b1d859c0576b5735
item_updated_time: 1764345635646
title_diff: "[{\"diffs\":[[1,\"Cloudflare从入门到精通6. 那些悄悄保护你网站的默认配置 [2]\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":37}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>Cloudflare从入门到精通6. 那些悄悄保护你网站的默认配置</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <meta name=\\\"content-class\\\" content=\\\"yinxiang.peso.superNote\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.noteLayout\\\" content=\\\"{\\\"autoParagraphSpace\\\":\\\"recommend\\\",\\\"autoTitleWordSize\\\":28,\\\"autoLineSpace\\\":\\\"recommend\\\",\\\"autoLayoutWidth\\\":0}\\\"/>\\\r\\\n  <meta name=\\\"application-data:yinxiang.superNote\\\" content=\\\"{\\\"aiMode\\\":false}\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"43480\\\"></a>\\\r\\\n<h1>Cloudflare从入门到精通6. 那些悄悄保护你网站的默认配置</h1>\\\r\\\n\\\r\\\n<div><span><h1 style=\\\"other-props:eyJibG9ja0lkIjoiS1NKeVFTYVJzdjcifQ==;\\\">Cloudflare从入门到精通6. 那些悄悄保护你网站的默认配置</h1><div><br/></div><div><br/></div><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483778&amp;idx=1&amp;sn=773e537d33bf76431bb221fb805b89d0&amp;chksm=c2fbaec928474cdba7284696a3de40efbd73be5b4efac58fbb7ab412194989d0f12ddcdd052e&amp;mpshare=1&amp;scene=1&amp;srcid=0526QthjlhvVtREDvFg6Iyee&amp;sharer_shareinfo=245f647378ae3c290109d92f53542bb9&amp;sharer_shareinfo_first=245f647378ae3c290109d92f53542bb9#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><div><br/></div><div><br/></div><div>原创DeBill DeBill独立开发 </div><p><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📜 前言</span></span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">当我们的网站用上 Cloudflare 以后，Cloudflare 就自动帮我设置了一系列的防护措施，或许很多朋友们还不清楚具体给我们网站做了哪些事，今天给大家讲讲 Cloudflare 那些悄悄保护你网站的默认配置。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiTXV4YlI2ZFEzTDQifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">DDoS 防护</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这是 Cloudflare 的卖点之一，Cloudflare 会自动为所有用户（包括免费计划）提供基本的 DDoS 防护，无需任何配置。套上 Cloudflare，再也不用担心网站收到天价的流量账单。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">以下是 Cloudflare 免费计划 DDoS 防护的一些要点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>始终开启：</b>Cloudflare 的 DDoS 防护网络始终处于活动状态，并持续监控流量以检测和缓解攻击。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>无需配置：</b>你无需进行任何配置即可获得基本 DDoS 防护。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>针对常见攻击：</b> Cloudflare 的免费计划可以有效缓解常见的第 3 层和第 4 层 DDoS 攻击，例如 SYN Flood、UDP Flood 和 DNS Amplification attacks。</span></p></li></ul><p><span style=\\\"color: rgb(76, 76, 76);\\\">当然 Cloudflare 也提供了一些个性化的 DDoS 的防护配置，但都需要企业级用户才可以使用。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">防护的实现原理是这样的， Cloudflare 的边缘和集中式 DDoS 系统会分析路径外的流量样本，这使得 Cloudflare 能够异步检测 DDoS 攻击，而不会造成延迟或影响性能。流量会被分析如下内容：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>数据包字段</b>，例如源 IP、源端口、目标 IP、目标端口、协议、TCP 标志、序列号、选项和数据包速率</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>HTTP 请求元数据</b>，例如 HTTP 标头、用户代理、查询字符串、路径、主机、HTTP 方法、HTTP 版本、TLS 密码版本和请求率。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>HTTP 响应指标</b>，例如客户原始服务器返回的错误代码及其速率</span></p></li></ul><h3 style=\\\"other-props:eyJibG9ja0lkIjoidDA3UlFDRUR1MGgifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">避坑指南：不要在 Cloudflare 之前再套一层 CDN</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果你在 Cloudflare 之前又套了一层 CDN，长期下来 Cloudflare 可能发现对你网站的请求都来自一组特定的 ip。</span><span style=\\\"color: rgb(37, 37, 37);\\\">在极少数情况下（例如在 Cloudflare 前面使用 Akamai CDN ）由于来自这些特定 IP 地址的流量很大，可能看起来好像 CDN 正在对 Cloudflare 发起 DDoS 攻击。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiNUFwcVJlTExJZHQifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">Free Managed Rule</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 提供的 <b>Free Managed Ruleset</b> 是一组预定义的安全规则，旨在帮助网站抵御常见的网络攻击。这些规则由 Cloudflare 的安全团队维护，并会定期更新，以适应新型威胁和漏洞。以下是 Free Managed Rule 的一些核心特点：</span></p><ol><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>基础的 Web 应用防火墙 (WAF) 保护</b>：包括对 SQL 注入 (SQLi)、跨站脚本 (XSS)、远程代码执行 (RCE) 等常见攻击的防护。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>自动更新</b>：规则集会随着新发现的漏洞和威胁自动更新，确保最新的防护措施应用到你的站点。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>无复杂配置</b>：Cloudflare 的 Free Managed Ruleset 是开箱即用的，无需配置。</span></p></li></ol><p><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划的用户也无法对该规则进行配置，具体的更新内容需要关注 Cloudflare 的定期发布</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiU2RiMVFhQW1GS2UifQ==;\\\"><span style=\\\"font-size: 24px;\\\">Security Level</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个选项在 [ <b>Websites --&gt; Zone --&gt; Security --&gt; Settings</b> ] 默认是 Medium</span></p><img src=\\\":/94e43c3342c6417295e8222884017a4f\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Security Level 使用 treat score（不了解这个概念的朋友参考这篇文章 </span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483766&amp;idx=1&amp;sn=7dd167fe571c5893231ace3b1ef0748b&amp;chksm=c31079bef467f0a80a044a2e12ca7813d47c4f1fd1107954756d8ab90ae2ecb89c970f76bcd7&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 从入门到精通 | 5. 使用 WAF 保护你的网站</span></a><span style=\\\"color: rgb(76, 76, 76);\\\">） 来决定是否向访问者提出挑战。一旦访问者输入正确的挑战，才能获取网站资源。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">你可以根据请求所构成的威胁调整这个参数以对其进行质询。可用的安全级别如下：</span></p><table style=\\\"--en-fitwindow:false;border-left:1px solid #d9d9d9;border-top:1px solid #d9d9d9;border-collapse:collapse;width:570px;\\\" width=\\\"570px\\\"><colgroup><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col></colgroup><tbody><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><b>Security Level</b></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><b>Threat score 范围</b></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><b>描述</b></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><div><span style=\\\"color: rgb(56, 56, 56);\\\">Off (Enterprise</span></div><div><span style=\\\"color: rgb(56, 56, 56);\\\">customers only)</span></div></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\"><i>N/A</i></span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">不挑战 IP 地址</span></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">Essentially off</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">50–100</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(37, 37, 37);\\\">仅挑战信誉最差的 IP 地址</span></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">Low</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">25–100</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">挑战有威胁的访客</span></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">Medium</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">15–100</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(37, 37, 37);\\\">挑战有威胁性和中度威胁性的访客</span></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">High</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">0–100</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(37, 37, 37);\\\">挑战过去 14 天内表现出威胁行为的所有访客</span></p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\">I’m Under Attack!</span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(56, 56, 56);\\\"><i>N/A</i></span></p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p><span style=\\\"color: rgb(37, 37, 37);\\\">仅当你的网站当前遭受 DDoS 攻击时使用</span></p></td></tr></tbody></table><p><span style=\\\"color: rgb(76, 76, 76);\\\">选择更高的安全级别值意味着即使风险较低（即威胁分数较低）的请求也会受到挑战。选择较低的安全级别值意味着只有具有更高风险（即威胁分数较高）的请求才会受到挑战。</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiSTFGMlNDRW03ZzAifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">官方建议配置</span></span></h3><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">新站长应该设置中或高安全级别，并将Chanllenge Passage 设置为 30 分钟以下，以确保 Cloudflare 始终保护网站。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">对安全设置有信心的经验丰富的网站管理员可能会将 Security Level 设置为 关闭 或低，同时将 Chanllenge Passage 设置为一周、一个月甚至一年，以提供更好的用户体验。</span></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiTmViWlJXSUdTekUifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">Challenge Passage</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个选项在 [ <b>Websites --&gt; Zone --&gt; Security --&gt; Settings</b> ] 默认是 30 分钟。</span></p><img src=\\\":/475b4f02b92445b0b6fe7f92b66a55a5\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 官方建议设置为 15 到 45 分钟之间。这个功能的工作原理：当用户初次访问你的网站时，如果触发了 Cloudflare 的安全校验，校验成功后会在你的浏览器中设置一个名为 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">cf_clearance</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 的 cookie，当用户访问网站其他网页页面是 Cloudflare 会校验该 cookie 是否在有效期内，有效期内无需再校验</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiSHNOSFJlS0RtNDAifQ==;\\\"><span style=\\\"font-size: 24px;\\\">Browser Integrity Check</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个选项在 [ <b>Websites --&gt; Zone --&gt; Security --&gt; Settings</b> ] </span></p><img src=\\\":/d7265877355c42498008fcb7cb74b638\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Browser Integrity Check 会查找垃圾邮件发送者最常滥用的 HTTP 标头并拒绝这些请求。打开这个开关后还会挑战没有 user agent 和非标准 user agent 的请求，一般这些请求都是来自机器人、爬虫</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoidWhZalRLN0g2OVEifQ==;\\\"><span style=\\\"font-size: 24px;\\\">Replace insecure JS libraries</span></h2><img src=\\\":/f8d454fc7d97449aa6bcc7ca3e35b62e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">开启后，Cloudflare 将检查 HTTP(S) 流量中是否存在指向潜在不安全服务的 src 属性的脚本标签，并将 src 值替换为 cdnjs下托管的等效链接。此重写操作目前支持托管在 polyfill.io 中的 polyfill JavaScript 库。重写的 URL 将保留原始 URL 请求头（http:// 或 https://）。这个功能提高了网站的安全性和性能，并降低了注入恶意代码的风险。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiMXBMUlNlZWkzbkMifQ==;\\\"><span style=\\\"font-size: 24px;\\\">Email Address Obfuscation</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个选项在 [ <b>Websites --&gt; Zone --&gt; Scrape Shield</b> ]</span></p><img src=\\\":/0600191ec65849258560b78731d4152b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">打开这个开关后，网页上的邮件地址只对真实用户可见而对爬虫等机器不可见，这样能防止大量邮件爬虫机器人收集你的邮箱给你发垃圾邮件。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">有些网站会有邮箱的 logo，以我的博客为例，当你点击这个图表时就会自动跳转到邮件编写界面，有些爬虫就利用这点大量发送垃圾邮件。</span></p><img src=\\\":/ab9ec3a1705346268f362f897fb51c0b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">有的站长为了防止这种情况会将自己的邮件地址改成 <span style=\\\"background-color: #eeeeee;\\\">help [at] cloudflare [dot] com </span>的形式，但是这样又不方便用户发送邮件。</span><span style=\\\"color: rgb(37, 37, 37);\\\">通过启用 Email Address Obfuscation，你网页上的电子邮件地址将被混淆（隐藏），不会被机器人发现，但仍然对用户可见，用户一点击“@”的 logo 就会自动跳转到邮件发送界面。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiQV9TTlNTTUVRMm4ifQ==;\\\"><span style=\\\"font-size: 24px;\\\">Hotlink Protection</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个选项在 [ <b>Websites --&gt; Zone --&gt; Scrape Shield</b> ]</span></p><img src=\\\":/9d0ea5cad14f4c578d97cf0bd4765615\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"autopx\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Hotlink Protection 可防止您的图片被其他网站使用，从而减少原始服务器消耗的带宽。该功能对爬虫没有影响，但会阻止图片显示在 Google 图片、Pinterest 和 Facebook 等网站上。如果你想让特定的图片可以被 Google ，RSS 图像订阅等其他网站引用，你可以参考如下的操作方式：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">在网站（或者对象存储）中创建一个 hotlink-ok 的文件夹，将需要被引用的图片放进文件夹。访问资源时类似这样：</span></p></li></ul><p><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">http://example.com/hotlink-ok/pic.jpg</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">（需要 hotlink 保护的图片）</span></p><p><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">http://example.com/images/pic.jpg</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">（无需 hotlink 保护的图片）</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">在 WAF 中 Custom Rule 中设置规则，具体设置方式参考这篇文章 </span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483766&amp;idx=1&amp;sn=7dd167fe571c5893231ace3b1ef0748b&amp;chksm=c31079bef467f0a80a044a2e12ca7813d47c4f1fd1107954756d8ab90ae2ecb89c970f76bcd7&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 从入门到精通 | 5. 使用 WAF 保护你的网站</span></a></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiR0hKalEtT242ZDAifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📝 总结</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">上面介绍的默认配置，免费计划的用户都可以享受到，Cloudflare 也在不断迭代他们的安全产品后续会推出更多免费的安全产品。除此之外，Cloudflare 还有一些功能只需要你在控制面板轻轻点一下开关就开启，这里不再赘述留给大家慢慢探索。写这篇文章的时候查找大量资料才发现Cloudflare 真的像一尊“佛祖”一般，在默默守护我们的网站 : )</span></p><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoidWRPLVRlTHh0Mi0ifQ==;\\\">Cloudflare从入门到精通 0. Cloudflare简介</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483675&amp;idx=1&amp;sn=4dd3077f30a1708c2f1ea5fac9d2ee7d&amp;chksm=c214cb89e35c66a887ca669caff9f78c9d8d75c9fe420f057046495fab5e8943a0457a3012cc&amp;mpshare=1&amp;scene=1&amp;srcid=0526Qz40mbuUoRhvmbdDigxW&amp;sharer_shareinfo=3daafef5618b9e30f7123471a019a383&amp;sharer_shareinfo_first=3daafef5618b9e30f7123471a019a383#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483675&amp;idx=1&amp;sn=4dd3077f30a1708c2f1ea5fac9d2ee7d&amp;chksm=c214cb89e35c66a887ca669caff9f78c9d8d75c9fe420f057046495fab5e8943a0457a3012cc&amp;mpshare=1&amp;scene=1&amp;srcid=0526Qz40mbuUoRhvmbdDigxW&amp;sharer_shareinfo=3daafef5618b9e30f7123471a019a383&amp;sharer_shareinfo_first=3daafef5618b9e30f7123471a019a383#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483675&amp;idx=1&amp;sn=4dd3077f30a1708c2f1ea5fac9d2ee7d&amp;chksm=c214cb89e35c66a887ca669caff9f78c9d8d75c9fe420f057046495fab5e8943a0457a3012cc&amp;mpshare=1&amp;scene=1&amp;srcid=0526Qz40mbuUoRhvmbdDigxW&amp;sharer_shareinfo=3daafef5618b9e30f7123471a019a383&amp;sharer_shareinfo_first=3daafef5618b9e30f7123471a019a383#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/92dfb0b00b2c45c5af82448581c8d7f2\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>本文大纲</b></span></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><p>📜 前言</p><div><br/></div><div><br/></div><p>❓Cloudflare 是谁？</p><p>    公司背景</p><p>    服务概述</p><div><br/></div><div><br/></div><p>🔧 核心服务</p><p>     DNS 解析</p><p>    CDN</p><p>    DDoS 防护</p><p>    SSL/TLS 安全服务</p><p>    WAF 应用防火墙</p><p>    页面规则</p><p>    网站分析</p><div><br/></div><div><br/></div><p>📦 产品</p><p>    Email Routing</p><p>    Turnsile</p><p>    R2</p><p>    Workers</p><p>    Workers KV</p><p>    D1</p><p>     Pages</p><p>    Tunnel</p><p>    ZeroTrust</p><p>    Workers AI</p><p>    AI Gateway</p><p>    Zaraz</p><div><br/></div><div><br/></div><p>🌟 优势与特点</p><p>    安全</p><p>    便宜量大</p><div><br/></div><div><br/></div><p>📝 总结</p><div><br/></div><div><br/></div><p>🧑‍💻 更新日志</p><p>    2024.06.10</p><div><br/></div><div><br/></div></div><h2 style=\\\"other-props:eyJibG9ja0lkIjoicllzVlRLQ2h3S0EifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">📜 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><span style=\\\"background-color: #ffa900;\\\">前言</span></span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">博主不知不觉中用了很多 Cloudflare 的服务，但是发现还有很多人不知道赛博佛祖 Cloudflare，索性开个专栏介绍 Cloduflare 的产品和服务，这篇是 Cloudflare 简介篇，也可以看作一个目录后续会持续更新，那我们开始吧。</span></p><hr/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiUzN4OFJ1YXhyWlIifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">❓Cloudflare 是谁？</span></span></h2><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoidW1CNFRlNkdyaHgifQ==;\\\"><span style=\\\"font-size: 20px;\\\">公司背景</span></h3><div><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare由Matthew Prince、Lee Holloway和Michelle Zatlyn于2009年共同创立，总部位于美国旧金山。Cloudflare是一家提供<b>网络性能和安全服务</b>的公司，其使命是帮助建设一个更好的互联网。Cloudflare通过其全球分布的网络基础设施，提供多种服务，包括<b>内容分发网络 (CDN)、DDoS防护、DNS管理、SSL/TLS加密、Web应用防火墙 (WAF) </b>等。这些服务旨在提升网站的性能、安全性和可靠性。<b>Cloudflare 拥有遍布全球250多个城市的网络,据称可以覆盖全球95%的互联网用户。</b>经过十几年的不断努力，Cloudflare 也在 2019 年与纽交所成功上市（虽说 22 年以来股价有点惨不忍睹...）</span></div><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiNEZ5NlNhWEJQOFMifQ==;\\\"><span style=\\\"font-size: 20px;\\\">服务概述</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare提供内容分发网络 (CDN)、DDoS防护、DNS管理、SSL/TLS加密、Web应用防火墙 (WAF)等核心服务，2020 年以来还推出了许多的新产品，例如对象存储 R2，KV 存储 workers kv，边缘服务器 Workers 等。这些产品广受开发者的好评，使用Cloudflare生态的产品，可以轻松构建安全、可靠的现代web应用</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiTlhJbFFPZTh3bUgifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">🔧 核心服务</span></span></h2><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiVDBqMlF1dVZ6UncifQ==;\\\"><span style=\\\"font-size: 20px;\\\">DNS 解析</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们可以在 Cloudflare 买域名自动托管在 Cloudflare 的 DNS，也可以在别的域名服务商购买域名，再迁移到 Cloudflare 里 ，相比其他厂商，Cloudflare 的 DNS 强大之处有以下几点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">更快的解析速度。Cloudflare的DNS 解析速度非常快，通常在全球范围内的 DNS 性能测试中名列前茅。其 Anycast 网络和高效的缓存机制使得 DNS 查询响应时间极短，显著提升了用户访问网站的速度。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">更高的安全性。Cloudflare 在 DNS安全性方面投入了大量资源，提供DNSSEC、DDoS防护、DoH和DoT等高级安全功能，这些都是许多其他DNS服务提供商无法完全匹配的。也就是说如果你用了他家的 DNS，直接就给你 DDoS 防护了，非常香！</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">更好的隐私保护。Cloudflare的1.1.1.1公共DNS解析服务强调隐私保护，承诺不记录用户数据</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">更好的服务生态。能跟自家 WAF、CDN 等服务无缝对接</span></p></li></ul><div><br/></div><div><br/></div><p><span style=\\\"color: rgb(76, 76, 76);\\\">顺便提一下 Cloudflare 本身也是域名服务商，你可以在 Cloudflare 购买域名无缝对接其 DNS 服务。Cloudflare 的域名有个特点，不做活动，但是续费也不涨价，例如你在 Cloudflare 第一年花 $10购买了一个域名，后续每年续费都是这个价格，不用担心被域名服务商敲诈 : )</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiNXJkUVJtcFYzQnQifQ==;\\\"><span style=\\\"font-size: 20px;\\\">CDN</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare的内容分发网络 (CDN) 服务是其核心服务之一，旨在加速网站和应用程序的交付，提升用户体验。个人认为，Cloudflare 相较于其他CDN服务提供商的优势如下：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Argo 智能路由：通过实时分析互联网流量和网络状况，选择最快、最可靠的路径传输数据。这种技术确保了数据传输的低延迟和高可靠性，即使在网络拥堵或出现故障的情况下也能保持性能稳定。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">缓存个性化设置：你可以配置不同的缓存设置，例如缓存级别、到期时间、缓存关键资源等。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">边缘证书：确保你的网站使用SSL/TLS加密。Cloudflare提供免费的边缘证书，自动管理SSL/TLS配置，确保数据传输的安全</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">可与任何对象存储方案集成</span></p></li></ul><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiNG9GV1ItV2x4emUifQ==;\\\"><span style=\\\"font-size: 20px;\\\">DDoS 防护</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">DDoS 防护也是 Cloudflare 的核心服务卖点之一，凭借遍布全球的服务器，防护能力 max，优势如下：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">无缝集成的生态：如果你用了 CDN 或者 DNS 服务，甚至不知道原来 Cloudlfare 自动就给你套了层 DDoS 防护</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">多层防护策略：Cloudflare 提供 L4 （传输层）和 L7 （应用层）防护</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">自适应速率限制：Cloudflare的速率限制功能可以根据流量特征动态调整，防止恶意流量洪水淹没服务器。用户可以根据具体需求设置速率限制策略，进一步提高防护效果。</span></p></li></ul><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiLW54UVRHN2NrVXkifQ==;\\\"><span style=\\\"font-size: 20px;\\\">SSL/TLS 安全服务</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">相比其他厂商优势Cloudflare 如下：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">自动化 SSL 证书管理。Cloudflare提供自动化的SSL证书管理，简化了证书申请、安装和更新的过程。用户无需手动处理复杂的证书管理任务，Cloudflare会自动处理所有细节，确保网站始终使用最新的证书。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b><u>免费 SSL/TLS 证书</u></b> Cloudflare 为每位客户提供免费的最高 15 年的 SSL 证书！这使得任何网站都可以轻松实现HTTPS加密，这对小型网站和个人用户特别有利，他们无需支付额外费用即可享受SSL/TLS加密。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">灵活的 SSL/TLS 配置。这点后续的文章会详细介绍</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">TLS 1.3 支持。Cloudflare是最早支持TLS 1.3协议的提供商之一。TLS 1.3相比之前的版本，提供了更高的安全性和更快的握手速度，提升了用户体验和数据保护水平。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">自动 HTTPS 重写。Cloudflare提供自动HTTPS重写功能，可以将所有HTTP请求自动重定向到HTTPS。这帮助用户轻松迁移到HTTPS，确保所有流量都经过加密传输。</span></p></li></ul><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiRFRrdVEtaWQ1cEYifQ==;\\\"><span style=\\\"font-size: 20px;\\\">WAF 应用防火墙</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare的应用防火墙可以防护常见的Web攻击,如SQL注入、跨站脚本、敏感信息泄露等。它支持以下功能：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">自定义规则。<b><u>免费版能配置5条规则</u></b>，例如可以配置放行一些搜索引擎爬虫</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">速率限制。<b><u>免费版能配置1条规则</u></b>，可以限制某些api的访问速率。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">安全事件分析。Cloudflare提供面板分析经过 WAF 的流量都是什么请求</span></p></li></ul><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiN3BZdFJPSzEtMlgifQ==;\\\"><span style=\\\"font-size: 20px;\\\">页面规则</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 作为客户端和服务器之间的中间层，还提供自定义的缓存和页面重定向规则</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiLWt6OFNtamNhQ1YifQ==;\\\"><span style=\\\"font-size: 20px;\\\">网站分析</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 提供简单的 Http 流量、网站性能等内容的分析，还可以查看流量的来源地</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiMl9MRFNpNUk3WTIifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">📦 产品</span></span></h2><p style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">Email Routing</span></p><img src=\\\":/866d77561a9340dfbbd481e87f416708\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">通过电子邮件路由，你可以将自定义的域名邮箱接收的邮件转发到你个人邮箱里</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiQzVIM1NTQ1laaTcifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Turnsile</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Turnstile 可以嵌入到任何网站中，无需通过 Cloudflare 发送流量，并且无需向访问者显示验证码即可完成验证。一图胜千言，相信大家上网冲浪时都遇到过 Cloudflare 的这个标志</span></p><img src=\\\":/d403d7861a764fc99ff0d4499ecc2fb8\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">R2</span></p><img src=\\\":/b645b32e307546bf971db813424bd331\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 提供的对象存储服务，免费计划的用户有 <b><u>10G 的对象存储空间</u></b>，<b><u>A 类操作 100 万次请求/月，B 类操作 1000 万次请求/月</u></b>。A 类操作通常指那些相对较少使用但计算成本较高的 API 调用（例如创建 bucker, 增加对象，删除对象等），B 类操作指读取对象。总之个人使用绰绰有余</span></p><p style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">Workers</span></p><img src=\\\":/f903bc3e15e64fdebea001c7fe4a4bba\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare Workers 是 Cloudflare 提供的一种 Serverless 计算平台。它允许开发者在 Cloudflare 的边缘网络上运行 JavaScript 代码，无需管理传统的服务器基础设施。你可以在 Workers 做包括但不限于如下事情：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">代理转发</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">集成第三方服务</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">边缘计算</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">请求鉴权</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">批量重定向</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">缓存 Post 请求</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">........</span></p></li></ul><p><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划里包括：<b><u>10 万次请求/天，每个请求最大占用 10ms CPU 时间，最多 100 个 Worker 脚本</u></b></span></p><p style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">Workers KV</span></p><img src=\\\":/dca3453872e34d62bccdcb1f0b3e5fd8\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div><br/></div><div><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare Workers KV（Key-Value）是一个全球分布式、低延迟的键值数据存储系统，专门设计用于与 Cloudflare Workers 配合使用。它提供了一种在边缘存储和访问数据的简单方法，你可以把它当缓存使用，免费计划里包括：<b><u>1GB 键值存储空间，10 万次读取/天，1000 次写入/每天，1000 次删除/天</u></b></span></div><div><br/></div><div><br/></div><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">D1</span></div><div><br/></div><img src=\\\":/5f07c166fb1e4d31ad6805b6267cf160\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div><br/></div><div><br/></div><p>Cloudflare D1 是 Cloudflare 提供的分布式 SQLite 数据库服务，设计用于与 Cloudflare Workers 无缝集成。</p><p>免费计划里提供 <span style=\\\"color: rgb(76, 76, 76);\\\"><b><u>5G 存储空间，500 万次读取/天，10 万次写入/天</u></b></span></p><p><span style=\\\"font-size: 20px;\\\">Pages</span></p><img src=\\\":/4829cb6e51b34bd3adc1b249d42e4be7\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"text-align:justify;\\\"><br/></p><div><br/></div><div><br/></div><div style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare Pages 是 Cloudflare 提供的一个静态网站托管和持续部署平台，支持常见的前端框架编写的代码部署（如 Vue, React, Nuxt, Nextjs 等）。它允许开发者直接从 Git 仓库部署网站，并提供了与其他 Cloudflare 服务（如 Workers 和 D1）的集成能力。免费计划包括：<b><u>500 次构建/月，每次构建时间最长 20 分钟，无限网站数量，无限请求数量</u></b></span></div><div><span style=\\\"font-size: 20px;\\\">Tunnel</span></div><div style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">内网穿透神器，后续有详细文章介绍</span></div><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">ZeroTrust</span></div><div style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare Zero Trust 是一套全面的安全服务，旨在保护组织的应用程序、数据和设备，无论它们位于何处。这种方法基于&quot;永不信任，始终验证&quot;的原则。Zero Trust 提供了非常多个性化的服务，有免费也有收费的</span></div><ul><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Access: 为应用提供身份感知的访问控制。例如你自部署了一些应用在互联网上，你希望满足制定规则的人才能访问你的应用</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Gateway: 提供 DNS 过滤和完全 web 网关、内容过滤和恶意软件防护 、加密 DNS 查询(DOH)</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">WARP: 加密所有流量，可与 Access 和 Gateway 集成，实现端到端安全</span></p></li></ul><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划包括：<b><u>最多 50 个用户，包括基本的 Access 和 Gateway 功能</u></b></span></p><div style=\\\"text-align:center;\\\"><br/></div><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">Workers AI</span></div><div style=\\\"text-align:center;\\\"><br/></div><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">2024 年 Cloudflare 推出的无服务器的 GPU 驱动推理平台，允许开发者在 Cloudflare 的全球网络上调用各种类型的大语言模型，目前支持的模型如下：</span></p><ul><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">文本生成：qwen1.5 系列大模型、llama 系列大模型</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">语音识别：whisper</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">图生成文：llava-1.5-7b</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Text Embedding: bge 系列模型</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">文生成图：stable-diffusion 系列模型</span></p></li><li><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">.....</span></p></li></ul><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划提供：<b><u>1 万 Neurons/天的使用额度</u></b>。Neurons 是 Workers AI api 调用单位，换算过来每天大概可以生成 100-200 个 LLM 响应、500 个翻译、500 秒的语音到文本音频、10,000 个文本分类或 1,500 - 15,000 个 embedding。</span></p><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">如果你是 worker 付费用户，从 2024 年 4 月 1 日起，非 beta 版模型的使用将开始计费，超出免费额度的部分将按照 $0.011/1000 Neurons 计费</span></p><div style=\\\"text-align:center;\\\"><br/></div><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">AI Gateway</span></div><div style=\\\"text-align:center;\\\"><br/></div><div style=\\\"text-align:center;\\\"><br/></div><p><span style=\\\"color: rgb(76, 76, 76);\\\">AI 模型的 API 网关，提供和普通网关类似的功能，你可以对用户调用 API 进行跟踪分析、限流、超时重试、模型回退等操作。相比普通网关，AI Gateway 还提供 input 和 output token 的统计。目前已对接主流厂商，但是暂不支持对代理 api 的转发和统计功能。</span></p><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">Zaraz</span></div><img src=\\\":/36b7bab45e0842f989ff84520aa043b5\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Zaraz 让你允许通过 Cloudflare 云端服务器加载第三方工具显著提升了 Web 应用程序的性能、安全性和隐私性。第三方脚本可能成为攻击者的入口点，Zaraz 允许你控制这些脚本在网站上的行为，降低了潜在的安全风险。Zaraz 还提供了对第三方工具访问个人数据的控制，帮助你更好地保护用户隐私。最常见的应用是将网页的 header 脚本放到 zaraz 上（如：Google Analytics, Umami 脚本等）</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiNVRBWVNTRGE4SGIifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">🌟 优势与特点</span></span></h2><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">安全</span></div><p><span style=\\\"color: rgb(76, 76, 76);\\\">安全是Cloudflare的安家立命之本，一个网站用上Cloudflare 的DNS + DDoS防护 + SSL + WAF这套组合拳基本可以高枕无忧，想要击穿Cloudflare的防护那得多有钱多闲 : ）你不用担心哪天被 DDoS 攻击后隔日收到云服务发来的天价账单</span></p><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">便宜量大</span></div><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare的服务和产品给我第一感觉就是优质、便宜 、 量大，且不说免费的基础防护套装，R2也提供10g免费对象存储空间和免费的https流量，D1和Pages等产品个人用也绰绰有余，即便收费5刀/月的worker套餐相比动不动 20 刀/月起步还要另收流量费的 PaaS 厂商相比实在太过良心，可以说是个人开发者和独立开发的不二之选</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiTmhWZVNxcHEzSzYifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">📝 总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">上面介绍了这么多产品和服务，大家也清楚为什么那么推荐使用 Cloudflare ，用一个公式表示就是：</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">DNS + DDoS 防护+SSL/TSL+WAF+ Workers + Pages + ..... = 免费</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare就像一位“赛博佛祖”，静静地守护着互联网，为企业和开发者提供了许多优质的服务与产品。Cloudlfare还有很多产品和玩法无法一一囊括，本文章后续也会持续汇总更新 Cloudflare 的各种产品的玩法，欢迎读者分享和订阅本文章。</span></p><hr/><p><br/></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiNzlBc1NTV1hDaHMifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"background-color: #ffa900;\\\">🧑‍💻 更新日志</span></span></h2><div style=\\\"text-align:center;\\\"><span style=\\\"font-size: 20px;\\\">2024.06.10</span></div><p><span style=\\\"color: rgb(76, 76, 76);\\\">2024 年 6 月 7 日 Cloudlfare warp 和 warp+据说集体挂掉，又少了个科学上网的办法</span></p><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div style=\\\"text-align:center;\\\"><br/></div><div style=\\\"text-align:center;\\\"><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiSDhhV1FTUS1fSTIifQ==;\\\">Cloudflare从入门到精通 1. DNS快速入手</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483693&amp;idx=1&amp;sn=4fab10bd79e211965a7b0c61d4b5863d&amp;chksm=c261622371a3daf2450870f0f6040e740ceb6f3f4a428977f9e93aef3e9fbae1e4c5a0c5bd4f&amp;mpshare=1&amp;scene=1&amp;srcid=0526FokexIJ3TrJEnP2GlrGZ&amp;sharer_shareinfo=51aa241365367128e302e52b05ff043d&amp;sharer_shareinfo_first=51aa241365367128e302e52b05ff043d#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483693&amp;idx=1&amp;sn=4fab10bd79e211965a7b0c61d4b5863d&amp;chksm=c261622371a3daf2450870f0f6040e740ceb6f3f4a428977f9e93aef3e9fbae1e4c5a0c5bd4f&amp;mpshare=1&amp;scene=1&amp;srcid=0526FokexIJ3TrJEnP2GlrGZ&amp;sharer_shareinfo=51aa241365367128e302e52b05ff043d&amp;sharer_shareinfo_first=51aa241365367128e302e52b05ff043d#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483693&amp;idx=1&amp;sn=4fab10bd79e211965a7b0c61d4b5863d&amp;chksm=c261622371a3daf2450870f0f6040e740ceb6f3f4a428977f9e93aef3e9fbae1e4c5a0c5bd4f&amp;mpshare=1&amp;scene=1&amp;srcid=0526FokexIJ3TrJEnP2GlrGZ&amp;sharer_shareinfo=51aa241365367128e302e52b05ff043d&amp;sharer_shareinfo_first=51aa241365367128e302e52b05ff043d#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/c37e6f501b9a4a9eb3d5bd315b582197\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoib0lfOFNHYVU5WjIifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📜<span style=\\\"color: rgb(0, 0, 0);\\\">前言</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 的很多服务需要你有域名托管在 Cloudflare DNS 系统才能使用，可以说了解 Cloudflare DNS 是使用他们其他服务的第一步， 你可以在 Cloudflare 购买域名直接使用 Cloudflare 的 DNS 服务，因为绝大多数人域名都不在 Cloudflare 购买，本文主要介绍<b>其他域名服务商的域名如何使用 Cloudflare DNS</b>。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">本文以腾讯云购买的域名为例，演示如何将域名进行迁移，其他域名服务商的操作步骤雷同，也可以参考本文。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiZzhsblJLN2Z4c3gifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🌐 <span style=\\\"color: rgb(0, 0, 0);\\\">购买域名</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">你可以在 Cloudflare 购买域名，进入后台管理界面后，点击左侧的 Domain Registration -&gt; Register Domains, 然后在搜索框输入你想购买的域名查看价格。Cloudflare 域名不算便宜，也不做促销活动，优点在于续费价格不变，如果你打算长期经营一个域名，正好 Cloudflare 有卖可以考虑一下。顺便一嘴，Cloudflare 上没有卖这两年大热的.ai 域名，但是可以托管到 Cloudflare DNS</span></p><img src=\\\":/eecf4381916944898e27b3a66f77a2f9\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoidTdQV1QyUG1HdnUifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🧾<span style=\\\"color: rgb(0, 0, 0);\\\">教程</span></span></h2><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiQmRpa1FTNkJjUWcifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">步骤一：注册 Cloudflare</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">前往 Cloudflare官网 注册与登录，登录后，点击左侧 Websites，点击页面右侧的 Add a Site</span></p><img src=\\\":/444ea446e38d4dfda5f2aa91361fb35a\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiaTRacFFlZVhHUEsifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">步骤二：添加域名</span></span></h3><img src=\\\":/b6f3a877232c43458e7e711da7331b18\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">添加你在别的域名服务商购买的域名，按照提示选择 <b>Free plan</b>，无需绑定信用卡，最后会来到这样的一个界面，最下面是 cloudflare 的两个 nameservers，后面会用到。不清楚 DNS 和 NS 关系的朋友可以参考我的博客里的这篇文章 </span><span style=\\\"color: rgb(0, 122, 170);\\\">DNS和NS的关系 (https://ljlv.site/archives/dns)</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiTElmalEtS2haMUoifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">步骤三：更改原服务商 Nameserver</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">将域名直接迁移到 Cloudflare 的这种方式虽然可行，但是不少域名服务商会对这种行为进行限制（例如规定多少个月以后才能迁走），我们不采用这种方式，而是通过更改 Nameserver 实现。前往域名管理的后台，找到你的域名点击管理。此时在 DNS 解析里可以看到 DNS 服务器，点击<b>“修改 DNS 服务器服务器”</b>将服务器地址改成 Cloudflare 提供的地址，这里我已经换成了 Cloudflare 的 Nameserver，然后等待 DNS 缓存刷新就大功告成了！</span></p><img src=\\\":/b357fc8df392481d8a7e4a29c5a71aca\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiS0w0NFJlLXl3UHAifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">步骤四：Cloudflare 添加域名解析</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">接下来就可以到 Cloudflare 添加域名解析，注意！这里有个特殊的地方就是下方红色方框框出来的小黄云，<b>默认是打开的，打开后就能自动 DDoS 防护和使用 Cloudflare CDN</b>。关闭的话 Cloudflare 就成了普通的 DNS，只帮你做域名映射，会导致以下问题：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">直接IP访问：访问者将直接连接到你的原始服务器IP，而不是通过Cloudflare的网络。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">失去CDN功能：无法使用Cloudflare的 CDN，可能会影响网站加载速度，特别是对远距离用户。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">安全防护减弱：失去Cloudflare提供的DDoS保护、Web应用防火墙等安全功能。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">流量分析受限：无法使用Cloudflare的详细流量分析工具。</span></p></li></ul><img src=\\\":/4dd1143e16eb4276bc35cec0e3a8878e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoid2N5Y1N5ZnRNX3kifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">步骤五：验证 DNS 解析是否生效</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们上 https://www.itdog.cn/ping 测试看看DNS记录是否生效，当你看到 IP 位置变成 Anycast/cloudflare.com 说明已经成功了</span></p><img src=\\\":/9c4cb80a053f41429129c9887b4aa143\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoicWNMcVF1My1ZOU8ifQ==;\\\"><span style=\\\"font-size: 24px;\\\">〰️ <span style=\\\"color: rgb(0, 0, 0);\\\">Cloudflare DNS 解析流程</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">一般 DNS 服务商的域名解析流程如下图，DNS 解析后流量直接打到源站</span></p><img src=\\\":/b6a169953de64e5aa4e4233dff990f98\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare DNS 解析则完全不同，DNS 解析后流量先打到 Cloudflare 全球 CDN 节点，然后根据你配置的页面路由规则、WAF 设置等再将满足条件的流量打到源站。</span></p><img src=\\\":/1d10cb4a5afe4db396483aa04938260f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoid0otVlMtcXhCMC0ifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📝 <span style=\\\"color: rgb(0, 0, 0);\\\">总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">上面教程的关键是<b>更改原域名的 Nameserver</b> 和添加域名解析时<b>打开小黄云</b>，还有一点需要确定你的域名 Cloudflare 是否支持解析，可以参考 Cloudflare 的  TLD 政策，Cloudflare 目前支持 200 多个顶级域名，个人经验来看，一些免费的域名可能Cloudflare 无法解析，但付费域名基本都能让 Cloudflare DNS 解析。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">总结为以下几点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">更改原域名的 Nameserver</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">打开小黄云</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">参考 Cloudflare 的  TLD（https://www.cloudflare.com/tld-policies/） 政策确定Cloudflare 是否支持解析该域名</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">上 https://www.itdog.cn/ping 验证是否生效</span></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiZmVOS1N5N3BpdmIifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🐣 <span style=\\\"color: rgb(0, 0, 0);\\\">彩蛋</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">有些域名在境内会被墙，例如 vercel.app, workers.dev 等域名，你可以用一个自己的域名在Cloudflare DNS 里添加一个 cname 记录绕过这一层限制 : ) 这里就不展开讲了，你可以自己实操试一下</span></p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiSTZPLVFlNE9HSmMifQ==;\\\">Cloudflare从入门到精通 2. 15年免费SSL证书</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483706&amp;idx=1&amp;sn=8a7cd6dd81328b024c87777745f20dc7&amp;chksm=c25f6d5cd44a838cb3eaedd84876dd2916e86f70ead86156dfcf0936cab02d5c7e10909c2353&amp;mpshare=1&amp;scene=1&amp;srcid=0526Cf36BFhzefEkHk7i1c6N&amp;sharer_shareinfo=36f925cc7b3843bc5d71be0867389ac4&amp;sharer_shareinfo_first=36f925cc7b3843bc5d71be0867389ac4#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483706&amp;idx=1&amp;sn=8a7cd6dd81328b024c87777745f20dc7&amp;chksm=c25f6d5cd44a838cb3eaedd84876dd2916e86f70ead86156dfcf0936cab02d5c7e10909c2353&amp;mpshare=1&amp;scene=1&amp;srcid=0526Cf36BFhzefEkHk7i1c6N&amp;sharer_shareinfo=36f925cc7b3843bc5d71be0867389ac4&amp;sharer_shareinfo_first=36f925cc7b3843bc5d71be0867389ac4#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483706&amp;idx=1&amp;sn=8a7cd6dd81328b024c87777745f20dc7&amp;chksm=c25f6d5cd44a838cb3eaedd84876dd2916e86f70ead86156dfcf0936cab02d5c7e10909c2353&amp;mpshare=1&amp;scene=1&amp;srcid=0526Cf36BFhzefEkHk7i1c6N&amp;sharer_shareinfo=36f925cc7b3843bc5d71be0867389ac4&amp;sharer_shareinfo_first=36f925cc7b3843bc5d71be0867389ac4#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/c87a8a7c6db846abb025690d247eca45\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoicHhlVFFPRUpDWVYifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📜 <span style=\\\"color: rgb(0, 0, 0);\\\">前言</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">现代化的网站基本要求支持 https 协议，如果你的网站不支持，浏览器还会警告用户这是不安全的网站（例如 Chrome），所以建一个网站时 SSL 证书就成了必备品。如何获取 SSL 证书也是一个问题，去年腾讯云提供一年的免费 SSL 证书，一年到期后还能继续申请，最高可申请 50 张证书，今年证书有效期就变成了 3 个月，而且还不是泛域名证书。什么意思呢？如果你给 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.com</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">域名申请了 SSL 证书，那这个证书只能给该域名使用，子域名 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">blog.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 需要申请新的证书，非常麻烦。然而我们的赛博佛祖 Cloudflare 居然提供 <b>15 年免费的泛域名 SSL 证书</b>？！今天就来介绍 Cloudflare SSL/TLS，帮大家厘清一些关键概念避免一些小坑，这些坑都是德彪我踩了很多次总结出来的，希望大家多多点赞转发支持。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiWmNBTVJpcWlJZWIifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🧾<span style=\\\"color: rgb(0, 0, 0);\\\"> 教程</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们进入 Cloudflare 的管理后台，选择左侧的 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Websites</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 选择你的域名就会进入下面的界面，可以发现左边栏跟刚进入管理时不一样，里面有很多跟网站相关的选项我们后面的文章会讲到，今天主要关注 SSL/TLS 选项。</span></p><img src=\\\":/e9a87286fc5d4c9d97705bce0fe0e055\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiVDg4YlEtaW42Q1YifQ==;\\\"><span style=\\\"font-size: 20px;\\\">🔏 加密模式选择</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">点击 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">SSL/TLS</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 下的 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Overview</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">就会进入加密模式的选择，我们前面（</span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483693&amp;idx=1&amp;sn=4fab10bd79e211965a7b0c61d4b5863d&amp;chksm=c31079e5f467f0f3a81e7f3079d023461232afe1462ad4af931be61ec9705b44b37d942bdc5a&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare从入门到精通 | 1. DNS快速入手</span></a><span style=\\\"color: rgb(76, 76, 76);\\\">）提到，客户端流量会先打到 Cloudflare CDN 上，然后 Cloudflare 再将流量打到源站，所以 Cloudflare 提供了 4 种加密模式：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Off</b>: 客户端到 Cloudflare，Cloudflare 到源站完全不加密。</span><span style=\\\"color: rgb(255, 104, 39);\\\">不推荐使用</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Flexible</b>: 客户端到 Cloudflare 加密传输，Cloudflare 到源站完全不加密。</span><span style=\\\"color: rgb(255, 104, 39);\\\">不推荐使用</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Full</b>: 客户端到 Cloudflare，Cloudflare 到源站加密。Cloudflare 到源站之间使用你自己提供的 SSL 证书, 但是 Cloudflare 不验证你的证书的可靠性和可用性。<b>推荐使用</b></span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Full (Stirct)：</b>客户端到 Cloudflare，Cloudflare 到源站完全加密。Cloudflare 到源站之间使用 Cloudflare 提供的 SSL 证书<b>。推荐使用</b></span></p></li></ul><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们看网站上鼠标悬浮在不同选项时的动画就能很好理解了</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiMDNCa1E2WGU1MDEifQ==;\\\"><span style=\\\"font-size: 20px;\\\">📜 <span style=\\\"color: rgb(0, 0, 0);\\\">边缘证书 - Edge Certifcates</span></span></h3><img src=\\\":/203eb000f6674d09815191e56e327c6c\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">客户端和 Cloudflare 之间的通讯可以通过 SSL 加密访问，所以有 Edge Certificates 的说法，即客户端和 Cloudflare 之间通讯使用的 SSL 证书。点击左侧的 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Edge Certifcates</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 选项可以看到非常多的配置项，我们挑重点的配置讲解。</span></p><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiaHcyWVNXU2lQMksifQ==;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">通用证书</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 给我们提供了免费的<b>通用证书（Universal SSL）</b>也允许付费计划用户上传自己的边缘证书，如果没有特别需求，我们直接用通用证书即可，你域名托管在 Cloudflare 后选择 Full 或者 Full (Stirct)就会自动帮你配置。免费计划需要注意以下几点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">只支持根域名和二级域名的 SSL 证书，多级域名证书不支持，要升级得付钱。例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">blog.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 可以使用边缘证书，</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">good.blog.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 则不可以</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 可以更改 certificate authority (CA) 而不提前通知你，如果你想选择特定 CA，要使用 advanced certificate</span></p></li></ul><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiV28yVFJ1SXlwVTYifQ==;\\\"><span style=\\\"color: rgb(49, 49, 49);\\\">Always Use HTTPS</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">打开这个选项后，你根域名和子域名下的所有 http 请求都会被重定向成 https 请求。建议打开</span></p><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoicXhqa1N1eWEyUVAifQ==;\\\"><span style=\\\"color: rgb(49, 49, 49);\\\">HTTP Strict Transport Security (HSTS)</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">HSTS 保护 HTTPS Web 服务器免受降级攻击。这些攻击可以将请求重定向到攻击的服务器，从而导致数据安全问题。使用 HSTS 需要打开 https 加密，这个选项看你自己需要选择开关。</span></p><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiZ2laVlRDYWNOTXoifQ==;\\\"><span style=\\\"color: rgb(49, 49, 49);\\\">Minimum TLS Version</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">仅允许来自支持所选 TLS 协议版本或更高版本的访问者的 HTTPS 连接。一般推荐 TLS 1.1  以上版本</span></p><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiZm96elRhQTgySngifQ==;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">TLS 1.3</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">是否支持 TLS 1.3 协议。建议打开。</span></p><h4 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiS2I2elNlZlRYVFMifQ==;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">Automatic HTTPS Rewrites</span></h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">防止“混合内容错误”（mixed content errors）。这里说一下什么是混合内容错误，假设用户使用 https 协议访问你的网页，你的网页里正好有其他资源的引用链接（常见 JavaScript 代码的引用），如果这个引用使用的是 http 协议访问，那么用户访问你网页的时候浏览器（例如Chrome）的控制台会报 “混合内容错误”。打开这个开关后，Cloudflare 会自动帮你重写网页里的引用 http 为 https，前提是该资源提供方支持 https 协议</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiZlR3RFNtZEdLT0MifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📜  Origin Server</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">点击左侧 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Origin Server</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 选项，这个页面给你提供源站 SSL 证书的地方，如果你源站没有 SSL 证书点击 Create 创建一个。</span></p><img src=\\\":/0c5cb5b33f114a9ab1f7e2808ce8ed50\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div><span style=\\\"color: rgb(76, 76, 76);\\\">可以看到 Cloudflare 非常良心，提供的证书默认是支持 <b>泛域名证书</b>的，而且最长支持年限是15年，我网站挂了这个证书都没挂 🤣</span></div><div><br/></div><img src=\\\":/10a74a00969b4f87905e514a206e8005\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">这里需要注意！Cloudflare 提供的 Origin Certificate </span><span style=\\\"color: rgb(255, 104, 39);\\\"><b>只用于 Cloudflare 回源访问，不是通用 SSL 证书</b></span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">这种方式即保障了安全性（只有 Cloudflare 能跟你源站 SSL 握手）也有一定限制，看你自己选择</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoibjMzTVNlM1NudmkifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🕳️ <span style=\\\"color: rgb(0, 0, 0);\\\">避坑指南</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">德彪在这个 SSL 配置上踩了不少坑，遇到好几次 SSL 握手失败，错误 5xx 等，博客都整挂了好几次 ☹️。下面是一些避坑指南：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果你源站已经有 SSL 证书，没必要折腾再使用 Cloudflare 提供的 Origin Certificate，加密模式选择 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Full</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">就行，但你得自己解决 SSL 证书的续期问题。</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果你用了 Cloudflare 提供的 Origin Certificate 访问网站还是错误 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">5xx</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 将加密模式从 Full (Strict)切换到 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Full</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">，并检查你的 TLS 加密算法是否选择错误</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果上面的方法还是没办法解决，那就不要用 Origin Certificate</span></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiTnlzYlFxUTlTb0YifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📝<span style=\\\"color: rgb(0, 0, 0);\\\"> 总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare SSL/TLS 选项的概念和配置很多，配错就肯定导致网站访问失败，需要注意以下几点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">加密模式的选择。一般使用 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Full</b></span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 或者 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Full (Strict)</b></span></code></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">边缘证书使用通用证书（</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Universal SSL</b></span></code><span style=\\\"color: rgb(76, 76, 76);\\\">）即可，其他配置根据个人需求开关</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">源证书（</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Origin Certificate</b></span></code><span style=\\\"color: rgb(76, 76, 76);\\\">） <b>只用于 Cloudflare 回源访问，不是通用 SSL 证书</b></span></p></li></ul><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoianU5WFQ2X0NlZ0MifQ==;\\\">Cloudflare从入门到精通 3. 无需迁移域名使用Cloudflare</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c2fb7434c0b8c8f86d3a07bb519cc73cad64b76c223279f2b28eaf4c39c20144f13d44f90fcf&amp;mpshare=1&amp;scene=1&amp;srcid=05261OVIgyCO8fxtJOkJHCSU&amp;sharer_shareinfo=7ebe11954c5fb01a71b0167598123a30&amp;sharer_shareinfo_first=7ebe11954c5fb01a71b0167598123a30#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c2fb7434c0b8c8f86d3a07bb519cc73cad64b76c223279f2b28eaf4c39c20144f13d44f90fcf&amp;mpshare=1&amp;scene=1&amp;srcid=05261OVIgyCO8fxtJOkJHCSU&amp;sharer_shareinfo=7ebe11954c5fb01a71b0167598123a30&amp;sharer_shareinfo_first=7ebe11954c5fb01a71b0167598123a30#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c2fb7434c0b8c8f86d3a07bb519cc73cad64b76c223279f2b28eaf4c39c20144f13d44f90fcf&amp;mpshare=1&amp;scene=1&amp;srcid=05261OVIgyCO8fxtJOkJHCSU&amp;sharer_shareinfo=7ebe11954c5fb01a71b0167598123a30&amp;sharer_shareinfo_first=7ebe11954c5fb01a71b0167598123a30#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/dc8b3e1ca51b426a81715478e108eb83\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiR3VZMVNPeTlveWsifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📜 前言</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">有粉丝反映自己的域名在其他域名服务商里已经设置了很多记录，迁移到 Cloudflare 太折腾了，有没有办法不迁移域名也能用上 Cloudflare 的防护？答案是：<b>可以！</b>今天就给大家介绍 Cloudflare SaaS 回源给你的老网站套上防护</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiaUt6QlNDZVBTdUsifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🧰 事前准备</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">提前准备两个域名</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">域名 A：你的原域名(例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.com</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">)</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">域名 B：托管在 Cloudflare 的域名，只要能被 Cloudflare 解析就行（例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">）</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoieWVLSFNLblhzLVoifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🤖 原理解析</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">有聪明的粉丝估计会想到在源域名服务添加一个 cname 记录到 Cloudflare 托管的域名上不就 OK 了？类似下面这张图</span></p><img src=\\\":/2d6e3d6ca51046cd8681387bfe9db532\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"text-align:justify;\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">但是！Cloudflare 出于安全考虑，<b>在没有设置 SaaS 回源的情况下，是</b></span><span style=\\\"color: rgb(223, 42, 63);\\\"><b>禁止</b></span><span style=\\\"color: rgb(76, 76, 76);\\\"><b>这种操作的</b>，访问网站会失败。下面就教大家如何设置 Cloudflare SaaS 回源，无需迁移域名也能使用 Cloudflare 进行防护。</span></p><div><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🧾 教程</span></span></div><div><br/></div><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoia2RYR1M2YzRKalMifQ==;\\\"><span style=\\\"font-size: 20px;\\\">准备域名</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">要准备一个域名托管在 Cloudflare DNS 上，具体如何操作参考这篇文章 </span>👉 <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483693&amp;idx=1&amp;sn=4fab10bd79e211965a7b0c61d4b5863d&amp;chksm=c31079e5f467f0f3a81e7f3079d023461232afe1462ad4af931be61ec9705b44b37d942bdc5a&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\">Cloudflare从入门到精通 | 1. DNS快速入手</a></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiaUoweVNtMkgyYUgifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Cloudflare SaaS 配置</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">到 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Websites</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">选择域名</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">SSL/TLS</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Custom Hostnames</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">进行相应配置。</span></p><img src=\\\":/f78d6cee3a03494c80eb6b2824cd2373\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">这里添加 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">origin.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 作为我们回源域名，添加完成后会出现 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">initialing</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 的提示，然后再进行下一步操作</span></p><img src=\\\":/0106e955be44479aa546f5e1ad6e4820\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiRXhHdVRlU2FXV0YifQ==;\\\"><span style=\\\"font-size: 20px;\\\">更改回源域名 DNS 记录</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">假设我们用 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">origin.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 作为回源域名，</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><span style=\\\"background-color: #b9d6ff;\\\">35.212.136.22</span></span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 是我们的服务器 ip，那么我们配置一条 DNS 的 A 记录进行域名映射。</span></p><img src=\\\":/1aa879aa589b463995cf4d337e873f69\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">配置完成后我们回到</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">SSL/TLS</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Custom Hostnames</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">发现Fallback Origin status: </span><span style=\\\"color: rgb(0, 209, 0);\\\">Active</span><span style=\\\"color: rgb(76, 76, 76);\\\">的提示，说明回源域名已经设置完成。接下来再点击 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Add Custom Hostname</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 按钮添加</span></p><img src=\\\":/1305341ecdc4419a900ae4b2f84465ba\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">这里添加你的原域名（该域名可以不托管在 Cloudflare 上）</span></p><img src=\\\":/dbdd4a8a4d9e494c9ac0310acf2a6348\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">添加完成后还有一步域名验证的过程，将 Cloudflare 提供的这两条记录添加到刚刚添加的原域名 DNS 里，等待 Cloudflare 验证成功后，所有配置就完成了</span></p><img src=\\\":/e86a95f1b9eb4ca4bf3d2f009bf6e813\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoidkh5c1I2MlphMU4ifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">更改原域名 DNS 记录</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">假设我们原域名的 DNS 映射关系是这样的：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.com -&gt; <span style=\\\"background-color: #b9d6ff;\\\">35.212.136.22</span></span></code><span style=\\\"color: rgb(76, 76, 76);\\\">, 用户访问 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.com</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 相当于直接访问 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\"><span style=\\\"background-color: #b9d6ff;\\\">35.212.136.22</span></span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 现在我们将 A 记录改成 cname 记录 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">debill.com -&gt; origin.debill.cc</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">，其他 DNS 记录不变</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoieGE3OVF1dkIyejMifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">验证是否生效</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">上 </span>itdog<span style=\\\"color: rgb(76, 76, 76);\\\">ping 一下看看，如果你的源站没有套 CDN 那么不使用 Cloudflare 防护可以直接访问到你的源服务器的 IP，使用 Cloudflare 防护后我们能看到源站地址全部是 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Anycast/cloudflare.com</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">，说明之前的配置已经生效了</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoic0ZOTFFhb3ZNLWMifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🕳️ 避坑指南</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">需要注意一点：托管在 Cloudflare 用于回源的域名<b>不要使用免费域名</b>，很多免费域名都是二级域名（例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">eu.orgcloudns.be</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">）我测试下来有些免费域名可以用来回源，有些则不行，所以推荐大家花点小钱买个便宜的域名进行回源</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiUUIyYlE2cEs3TDcifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📝 总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">今天介绍了如何不迁移原域名还能使用 Cloudflare 的一系列防护功能，总结为以下几点：</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">1️⃣ 准备一个域名托管在 Cloudflare 用于回源，注意不要使用免费域名</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">2️⃣ Cloudflare DNS 设置回源域名指向服务器 IP</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">3️⃣ 到 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Websites</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">选择域名</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">SSL/TLS</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> -&gt; </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Custom Hostnames</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">进行相应配置</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">4️⃣ 更改原域名的 DNS 记录，让 A 记录不再指向服务器 ip，而是指向 2️⃣ 中设置的回源域名</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">5️⃣ 测试是否已经生效</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">架构图如下：</span></p><img src=\\\":/9587165df2f74bcdaf19d6314479d459\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">通过这种方式，只需要简单更改原域名的一条 DNS 记录就可以使用 Cloudflare 进行防护，将网站无缝迁移上 Cloudflare</span></p><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiNGs3b1N5clZ5a0EifQ==;\\\">Cloudflare从入门到精通4. 加速境内Cloudflare托管网站</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483736&amp;idx=1&amp;sn=807a3b569e3e300f3755ad66b2e53d28&amp;chksm=c29af28e0273522acdb6fecba29933fb7514ee2403ff7f4d57abf54350344973275b3c530936&amp;mpshare=1&amp;scene=1&amp;srcid=05266mw4xK2BCUuaKgJpDhMq&amp;sharer_shareinfo=2bc791d5c6ff9b02347a65a86e44a4ce&amp;sharer_shareinfo_first=2bc791d5c6ff9b02347a65a86e44a4ce#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483736&amp;idx=1&amp;sn=807a3b569e3e300f3755ad66b2e53d28&amp;chksm=c29af28e0273522acdb6fecba29933fb7514ee2403ff7f4d57abf54350344973275b3c530936&amp;mpshare=1&amp;scene=1&amp;srcid=05266mw4xK2BCUuaKgJpDhMq&amp;sharer_shareinfo=2bc791d5c6ff9b02347a65a86e44a4ce&amp;sharer_shareinfo_first=2bc791d5c6ff9b02347a65a86e44a4ce#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483736&amp;idx=1&amp;sn=807a3b569e3e300f3755ad66b2e53d28&amp;chksm=c29af28e0273522acdb6fecba29933fb7514ee2403ff7f4d57abf54350344973275b3c530936&amp;mpshare=1&amp;scene=1&amp;srcid=05266mw4xK2BCUuaKgJpDhMq&amp;sharer_shareinfo=2bc791d5c6ff9b02347a65a86e44a4ce&amp;sharer_shareinfo_first=2bc791d5c6ff9b02347a65a86e44a4ce#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/152401903fd449209fa8f1f74a4c0539\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiSTBBRlNtdkI2dTIifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📜 前言</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">境内使用 Cloudflare 都会遇到一个问题，Cloudflare 不是有全球的 CDN 节点吗？怎么给我的网站“反向加速”了？我们再看看这张图片：</span></p><img src=\\\":/34b52244236e4fb783d0c6b5835f8483\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare DNS 会自动将请求路由到全球的 CDN 节点，<b>非企业级用户无法指定 CDN 节点</b>，假如你的服务器在境内，Cloudflare 可能会将你的请求先路由到美国的 CDN 节点如果 CDN 没有想要的资源那就要回源境内服务器，这样一折腾自然会变慢，本文教你一种简单的方式加速境内套了 Cloudflare 网站</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiUXZ3S1R1bjNyTk4ifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🧰 事前准备</span></span></h2><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">dnspod：因为 dnspod 允许境内外分流</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">域名 A：托管在 dnspod</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">域名 B：托管在 Cloudflare</span></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiU2RVSVJxVl9QbHgifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🪩 原理解析</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">dnspod 允许境内外分流，我们可以让境外流量走境外的 Cloudflare 节点，境内的流量走优选过的 Cloudflare 节点，这样就实现了境内网站加速。那么问题来了，怎么找优选过的 Cloudflare 节点？Cloudflare 公开了自己所有节点的 ip（https://www.cloudflare.com/ips/）</span></p><img src=\\\":/e0b3bdbbd9854a06aa9db35f162624ff\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">理论上可以通过优选 ip + DDNS（动态 DNS）实现加速。目前已知有两种实现方式，如果有其他方式，欢迎大家评论区告诉我</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">1️⃣  使用这个 Github 项目（https://github.com/XIU2/CloudflareSpeedTest），设置一个定时任务定时获取优选 ip，然后使用 DDNS 让你的域名时刻指向优选后的 Cloudflare 节点</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">2️⃣  找到一个使用 Cloudflare 的域名且已经进行过优选 ip，我们的域名 cname 过去后，再用 Cloudflare SaaS 回源（不懂 SaaS 回源的朋友参考这篇文章 </span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c3107983f467f0959dc28dc89fae229c4d75099c89a39a064dface3d7a7f0f1923df78bc9c29&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare从入门到精通 | 3. 无需迁移域名使用Cloudflare</span></a><span style=\\\"color: rgb(76, 76, 76);\\\">）</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">本文采取方案 2️⃣ 来加速境内使用 Cloudflare 的网站，方案 1️⃣ 的缺点如下：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">你得自己优选 IP</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">你要弄 DDNS</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">优选出来的 IP 也未必提速（亲测）</span></p><p><br/></p></li></ul><p><span style=\\\"color: rgb(76, 76, 76);\\\">方案 2️⃣ 的问题在于，怎么找到境内满足条件的域名？正巧我发现 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">visa.cn</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 满足条件</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们在 itdog 里 ping 一下看看，果然 ip 地址都是 Cloudflare 的节点，说明该网站也用了Cloudflare且全国各地的访问速度还不慢，尤其在人口密集的东部，访问速度非常快。</span></p><img src=\\\":/181d7188b12d43f19707dd0a93725104\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">仔细想想 visa 肯定是 Cloudflare 的企业级大客户，线路肯定经过优化的，那我们蹭一蹭这班 （bai）车（piao）来给我们自己的网站加速。相比方案 1️⃣ ，该方案的优点如下：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">无需优选 ip</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">稳定可靠。visa.cn 的域名肯定比你找的其他 Cloudflare 域名要稳定</span></p></li></ul><h2 style=\\\"other-props:eyJibG9ja0lkIjoiLWs0X1RpUFh4TlcifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">🧾 教程</span></span></h2><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiY21yclIybW40QlIifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">dnspod 设置境内外分流</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">这里我用的我的博客 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">ljlv.site</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 为例，教大家如何设置</span></p><img src=\\\":/f310dc2d58754ecdafe513242dd6ca40\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">1️⃣ 先设置一条 cname 记录，让 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">ljlv.site 指向 cdn.ljlv.site</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> (这个子域名你叫什么都行)</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">2️⃣ 设置一条 A 记录，让 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">cdn.ljlv.site 指向 1.0.0.5</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 这个 ip 是 Cloudflare 的亚太节点，同时线路选择境外</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">3️⃣ 设置一条 cname 记录，让</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">cdn.ljlv.site 指向 visa.cn</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 线路选择境内</span></p><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiT3RnOVQtUWUzbFcifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">设置回源域名</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们用一个域名托管在 Cloudflare 用于回源，这个域名用户不直接访问，所以只要 Cloudflare 能解析什么域名都可以，Add Custom Domain 里添加 ljlv.site ，具体操作参看这篇文章 </span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c3107983f467f0959dc28dc89fae229c4d75099c89a39a064dface3d7a7f0f1923df78bc9c29&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare从入门到精通 | 3. 无需迁移域名使用Cloudflare</span></a><span style=\\\"color: rgb(76, 76, 76);\\\"> 这里不再赘述。下面是图解：</span></p><img src=\\\":/59248c6234da42d782da065c8ed8ad29\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoiNzBvaVNPbmdmQWsifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">验证效果</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">还是上 itdog 验证一下</span></p><img src=\\\":/033a130937d44a199a83700baa9e720e\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">境内总体来说延迟都在 100 多毫秒，可以接受的程度，偶尔有个别地区的个别运营商解析失败。境外的访问速度就飞快了</span></p><img src=\\\":/dbbbc86a53e54d26baa2d4126c1a015d\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"text-align:center;other-props:eyJibG9ja0lkIjoidTk3QVN5YWo4NzEifQ==;\\\"><span style=\\\"font-size: 20px;\\\">进阶玩法</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">已经设置境内外分流了，如果你还是嫌境内访问速度不够快，那你可以设置境内使用境内服务商提供的 CDN 服务，境外使用 Cloudflare 的 CDN 这样境内外访问你的网站都能有不错的体验，具体的操作留给大家自己尝试。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoielg5OVRxc2pXNjEifQ==;\\\"><span style=\\\"font-size: 24px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">📝 总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">根据上面的设置就可以给你境内套了 Cloudflare 的网站进行简单的加速，当然还有优化的空间，这种方式胜在简单易行。如果你不用 dnspod，无法境内外分流，那就只设置一条 cname 到 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">visa.cn</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 的记录即可。通过本文结合 </span><a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483723&amp;idx=1&amp;sn=73db6b166fde0a0822d284d7393696a1&amp;chksm=c3107983f467f0959dc28dc89fae229c4d75099c89a39a064dface3d7a7f0f1923df78bc9c29&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare从入门到精通 | 3. 无需迁移域名使用Cloudflare</span></a><span style=\\\"color: rgb(76, 76, 76);\\\"> 你可以实现以下效果：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">不迁移域名也能给网站套上 Cloudflare 防护</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">境内网站即便用了 Cloudflare 也有不错的访问速度</span></p></li></ul><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoianA0VFFDN0x6cUUifQ==;\\\">Cloudflare 从入门到精通5. 使用 WAF 保护你的网站</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483766&amp;idx=1&amp;sn=7dd167fe571c5893231ace3b1ef0748b&amp;chksm=c2d9b595f7cec0733afeae7710e7925944571dd0e3b1e36f2ef21a61f08d2959ae5a852189e0&amp;mpshare=1&amp;scene=1&amp;srcid=0526iX5rNkKhqg57nKC16VIN&amp;sharer_shareinfo=9c33623567a076b0b764c960b270c22b&amp;sharer_shareinfo_first=9c33623567a076b0b764c960b270c22b#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483766&amp;idx=1&amp;sn=7dd167fe571c5893231ace3b1ef0748b&amp;chksm=c2d9b595f7cec0733afeae7710e7925944571dd0e3b1e36f2ef21a61f08d2959ae5a852189e0&amp;mpshare=1&amp;scene=1&amp;srcid=0526iX5rNkKhqg57nKC16VIN&amp;sharer_shareinfo=9c33623567a076b0b764c960b270c22b&amp;sharer_shareinfo_first=9c33623567a076b0b764c960b270c22b#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483766&amp;idx=1&amp;sn=7dd167fe571c5893231ace3b1ef0748b&amp;chksm=c2d9b595f7cec0733afeae7710e7925944571dd0e3b1e36f2ef21a61f08d2959ae5a852189e0&amp;mpshare=1&amp;scene=1&amp;srcid=0526iX5rNkKhqg57nKC16VIN&amp;sharer_shareinfo=9c33623567a076b0b764c960b270c22b&amp;sharer_shareinfo_first=9c33623567a076b0b764c960b270c22b#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/04b681aa27ed4aa9b546e4d71afc37aa\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoicUZtQ1FLcHE4ZFkifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📜 前言</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">WAF（</span><span style=\\\"color: rgb(56, 56, 56);\\\">Web Application Firewall</span>）全称应用防火墙，顾名思义可以帮我们过滤掉恶意的网络流量，只要域名托管在 Cloudflare 上就可以使用 Cloudflare WAF 强大的定制规则来保护我们的应用，无需在网站后端自己部署一个网关来处理各种流量，本文会介绍 Cloudflare WAF 的核心概念和组件，同时教大家配置一些简单的规则防护你的网站。</p><p><span style=\\\"color: rgb(76, 76, 76);\\\">WAF 是 Cloudflare 的拳头产品，其中的概念和用法非常多，且免费计划和各类付费计划能使用的功能也各不相同，下文会先介绍免费计划里能用到的功能，也会提付费计划里能用到的各种概念和功能，方便大家对 WAF 有个一个整体的认识。为了避免歧义，博主会用英文来直接描述各种概念，避免翻译造成的歧义。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiMVFEZlJ1bDZ3NVAifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🆓 免费计划可用功能</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">首先我们找到 WAF 的操作界面：Dashboard --&gt; 域名空间 --&gt; Security --&gt; WAF 。可以到一共由 Custom rules, Rate limiting rules, Managed rules, Tools 四部分组成，下面一一介绍。</span></p><img src=\\\":/5d665da2309340c99eb90211dcdad47a\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiT0pPeFNHc3UwMWIifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Custom rules</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划允许用户创建 5 条自定义规则来处理流量。点击 「Create rule」可以进入规则设置界面。规则遵循以下机制：<b>Field value 达到什么条件，就采取什么 Action。</b>Cloudflare 提供了操作面板配置你想要的规则，也允许用户直接编写规则表达式来配置规则，一般情况下我们用面板直接配置就行。</span></p><img src=\\\":/39f5da2c9f67430a85640a54793252cb\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">Field 可以选择的项非常多，例如 URI 路径、AS Num、国家、客户端类型等等选项，基本能满足你 90%的需求。</span></p><img src=\\\":/acdd33b598514ba8bf5d3d64d7980b30\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">action 主要有 5 种：</span></p><img src=\\\":/490ae517f00b48779811cfd444d09034\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Managed Challenge:这个 Cloudflare </span><span style=\\\"color: rgb(223, 42, 63);\\\">官方推荐</span>的一种的验证方式。我们上网时肯定会遇到类系的验证方式，在九宫格图片中让我们点选满足条件的方块，类似下图：</p><div><br/></div><div><br/></div></li></ul><img src=\\\":/64e3346e55b94cef85da918030124456\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" height=\\\"378px\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><ul><li><p><br/></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">这种验证方式非常麻烦，稍不留神就会点错，交互体验不好。Cloudflare 提供了一种动态校验请求的验证方式，用户不再需要点选 captcha 图，相信大家上网时都看过下面的图。</span></p><div><br/></div><div><br/></div></li></ul><img src=\\\":/47f7803a57db43e994ee073e550082d8\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" height=\\\"274px\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Block: 拒绝请求，不再执行后续的规则。所以你有多条规则要运行的时候，如果有规则采取 block 操作要注意规则放置的位置</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">JS Challenge: JS Challenge 要求用户在浏览器中运行 Cloudflare 提供的 JavaScript 脚本，以确认其身份，适合需要额外安全性的情况。用户必须等待浏览器处理完 JS 脚本才能进行下一步操作，处理时间一般在 5 秒以内</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Skip: 跳过 WAF 一些功能或者特定的防护产品。例如可以让命中规则的请求跳过剩下的规则。</span></p></li></ul><img src=\\\":/ec7d7a7752cf49659e85fdc8d2d7b4dd\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" height=\\\"416px\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Interactive Challenge: 采取交互式的验证方式，这种方式 Cloudflare </span><span style=\\\"color: rgb(223, 42, 63);\\\">不推荐</span>，推荐使用 Managed Challenge</p></li></ul><p><span style=\\\"color: rgb(76, 76, 76);\\\">后选择该规则放置的位置，位置会影响一些使用了 Block，Skip 的规则。最后点 Deploy 该规则就立马生效了。</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiY2ZBZ1JlTU5GZVEifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\">Rate limiting rules</span></span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">该功能对命中匹配表达的请求进行访问速率限制，免费计划只有 1 条可以使用，且可选项也比较有限，例如 Field 目前只有 Password Leaked、URI Path、Verified Bot、Verified Bot Category 选项。特征也只能选择 ip，速率也只能选择每 10 秒多少个请求，action 只能选择 block。</span></p><img src=\\\":/502dcbe0a98d4fd4814a9f7d92144eaa\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiM3d4SFJPUWZDS08ifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Managed rules</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Managed rules </span><span style=\\\"color: rgb(37, 37, 37);\\\">允许你部署预配置的规则集，避免常见的网络攻击，</span>点进这个 Tab 发现要升级成 pro 会员才能进一步设置。但是根据官方提示我们知道，即便免费计划的用户也能享用 Free Managed Ruleset 的基础防护，至于这个 Ruleset 是什么，以后的文章会详细介绍，这里不展开说明。</p><img src=\\\":/c28f1663e5b7463fbcb2d1add2dc40f8\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiUVFlc1RDWWNnbVUifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Tools</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果前面的 Custom rules 和 Rate limiting rule 还不能满足你的需求，Cloudflare 还提供了一些防护工具，免费计划能用的是 Ip Access Rules 和 User Agent Blocking</span></p><h4 style=\\\"other-props:eyJibG9ja0lkIjoiS3pYUVN5OC0tVmUifQ==;\\\">Ip Access Rules</h4><img src=\\\":/0d026430464a44beab6860d5e7e35aed\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">该功能允许你对 IP、IP 范围、国家、ASN 的请求进行特定的操作，相当于 Custom Rules 的一个特例，所以 Cloudflare 也建议你用 Custom Rules 来设置规则，而不是使用该工具。但是对于免费用户来说 5 条自定义规则少得可怜，如果你 Custom Rules 里涉及到对 IP、IP 范围、国家、ASN 的请求进行特定的操作，不妨使用该工具。需要注意以下几点：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">每个帐号可以设置 50000 条 Ip Access Rules，对于绝大多数人来说完全用不完</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">免费用户不能用该工具 block 指定国家的请求，只能在 Custom rules 里设置</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">Ip Access Rules 设置为 Allow 的流量，不会出现在 Security Events 看板里</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">根据上图右侧流量处理顺序，Ip Access Rules 先于 Custom rules 执行，所以 Custom rules 里无法使用 skip 跳过</span></p></li></ul><h4 style=\\\"other-props:eyJibG9ja0lkIjoiM01RTFRpLVhDSjUifQ==;\\\">User Agent Blocking</h4><p><span style=\\\"color: rgb(76, 76, 76);\\\">免费计划可以定义 10 条规则来限制不同客户端的各种行为，同样这个工具相当于 Custom Rules 的一个特例，所以 Cloudflare 也建议你用 Custom Rules 来设置规则，除非你不想占用 5 条宝贵的 Custom Rules</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiODNDUlR5QjRBOEcifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Security Events</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Security Events 提供一个看板可以查看命中规则的请求一些基本信息，免费计划最多只能查看某一天内的所有命中规则的请求日志。这个功能很有意思，我用它来查看有哪些网站来爬过我的网站，即便我的博客没有多少访问量，Google, Bing, Feedly, Ahrefs 都来爬过我的网站，还有一些我完全不认识的网站也会来爬我的网站，然而我给百度提交那么多次网站，百度的爬虫从来没来过 : )</span></p><img src=\\\":/b44cd8e79bc143da93d96c745a4825ab\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiajRLSVRTQ3dyVXQifQ==;\\\"><span style=\\\"font-size: 24px;\\\">💰 付费计划独有功能</span></h2><h3 style=\\\"other-props:eyJibG9ja0lkIjoia2ZLcVF1Wm91VW4ifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Managed Rules</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">付费用户除了可以使用 Free Managed Ruleset 还可以使用 Cloudflare 多年维护更新的规则集，给你的网站再上一层防护。例如：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Cloudflare Managed Ruleset</b>: Cloudflare 安全团队维护的规则集合，会有频繁的更新</span></p></li><li><p><span style=\\\"color: rgb(76, 76, 76);\\\"><b>Cloudflare OWASP Core Ruleset</b>: Cloudflare 对 Open Web Application Security Project 的实现</span></p></li></ul><p><span style=\\\"font-size: 20px;\\\">WAF Attack score</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个功能其实是 Custom rules 里的一些选项的统称，只有高级付费用户（Business 和 Enterprise）才有这些选项，按 Cloudflare 官方的说法，WAF Attack score 是 Managed Rules 的补充，细分下来有 WAF SQLi Attack Score、WAF XSS Attack Score、WAF RCE Attack Score，因为绝大多数人也用不上就不展开讲了</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiaVFRLVE2RFVZeFMifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Uploaded content scanning</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个功能只有 Enterprise（企业级）计划的用户才能使用，简单提一句就是帮你检查用户上传的文件是否有病毒。</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiYjVhRFMyNFhWNDkifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Security Analytics</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">这个功能只有 Business 和 Enterprise 计划的用户才能使用。相比 Security Event 会有更丰富的图标供你分析你的网站</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiR0JBd1EyNDlpT2YifQ==;\\\"><span style=\\\"font-size: 24px;\\\">🆚 概念区分</span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare WAF 的概念和功能非常多，有必要跟解释一些概念的差异</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiQ2tSN1QtMUZUemkifQ==;\\\"><span style=\\\"font-size: 20px;\\\">WAF 入口区分</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">Cloudflare 现在版本的 WAF 入口有两个，分别是：</span></p><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">入口 1: Dashboard --&gt; WAF。可以看到是付费用户才能使用的功能，而且必须是<b>企业级用户</b>才能使用。主要功能是允许你设置一些账户级别的 Custom rulesets(规则集)，从而让账户下每个域名都能共享这些规则，而无需在每个域名下面一一设置</span></p></li></ul><img src=\\\":/0e95c96712014b7abf45701eed4828aa\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><ul><li><p><span style=\\\"color: rgb(76, 76, 76);\\\">入口 2: Dashboard --&gt; 域名空间 --&gt; Security --&gt; WAF。这是我们绝大部分用户使用 WAF 的入口，上文已经有详细的介绍。</span></p></li></ul><img src=\\\":/b1307a521a924dcfbce155d632091850\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiWlpKR1FpaF94cEUifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Threat Score</span></h3><img src=\\\":/75dcf0d7c54e4be1a5f4869e54d79a1c\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">在 Custom rule 的设置里能看到有一个选项叫 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Threat Score</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">，Cloudflare 通过这个指标来衡量请求的 <b>IP 信誉度</b>，根据 Cloudflare 官方的说法该分数是根据 Project Honeypot 、外部公共 IP 信息以及 WAF 托管规则和 DDoS 的内部威胁情报计算的。分数从 0 到 100 分，越接近 0 分说明该 ip 风险越低，得分超过 10 分代表该 ip 可能来自垃圾邮件或者爬虫机器人，超过 40 分代表一些恶意行为，所以使用这个属性的时候，可以将 40 作为关键阈值</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiMGxNdlNlblhQa2QifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Know Bots</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">在 Custom rule 的设置里还有一个选项叫 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Known Bots</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">指 Cloudflare Radar 发现的一些已知机器人，其中包括好的机器人也包括坏的机器人。结合 Threat score 我们可以制定一条规则：所有 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Threat score</span></code><span style=\\\"color: rgb(76, 76, 76);\\\"> 低于 40 的</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Known Bots</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">我们都放行</span></p><img src=\\\":/e148e1372c3c4a3ea066700d4845208f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiXzJIMFR1UU1hbHIifQ==;\\\"><span style=\\\"font-size: 20px;\\\">Verified Bot Category</span></h3><img src=\\\":/cc96b09ad0d24ba584edff81a5e5cccd\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">在 Custom rule 的设置里还有一个选项叫 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">Verified Bots Category</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">指 Cloudflare 验证过的一些好的机器人的分类，例如搜索引擎的爬虫机器人，监控和分析相关的机器人等等，可以到 https://radar.cloudflare.com/traffic/verified-bots 查找是否有你想要的机器人，配置 Custom rule 的时候可以考虑使用这个属性。例如我们希望让所有搜索引擎的爬虫都能爬到我们网站的内容，那个Verified Bots Category 这一项就可以选择 Search Engine Crawler</span></p><img src=\\\":/d518e97750ad4540b0b0b072622cbc8f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiN0xpVFNxZzFMM0oifQ==;\\\"><span style=\\\"font-size: 20px;\\\">规则执行顺序</span></h3><p><span style=\\\"color: rgb(76, 76, 76);\\\">前面我们提了很多规则，他们的执行顺序如下：</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">Custom rulesets（企业级用户才有的功能，作用于全部域名）--&gt; Custom rules（每个域名自己的规则）--&gt; Rate limiting rules --&gt; Managed Rules</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiazJ5elFlSTBORjgifQ==;\\\"><span style=\\\"font-size: 24px;\\\">💡<span style=\\\"color: rgb(56, 56, 56);\\\">彩蛋</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">如果我们需要对一批 ip 进行特定的处理，在 Custom rule 里设置规则时就需要一条一条添加 ip，非常麻烦，很多人不知道 Cloudflare 还有 List 功能，免费计划里这个功能可以让你设置一个 ip 集合，让你不用再手动添加大量的 ip。</span></p><p><span style=\\\"color: rgb(76, 76, 76);\\\">入口：帐号首页 --&gt; Manage Account --&gt; Configurations --&gt; Lists</span></p><img src=\\\":/e629214fdc1e411f8c71b224bc7d8ee0\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">点击 Create list，免费计划只能添加跟 ip 相关的 list，付费计划可以创建其他类型的 List</span></p><img src=\\\":/7f082bec7433478fad9d9eb55663eb4d\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">我们回到 WAF --&gt; Custom rules。这里我们设置一条规则：屏蔽在 list_test 里的 ip 。Field 选择 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">IP Source Address</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">, Operator 选择 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(76, 76, 76);\\\">is in</span></code><span style=\\\"color: rgb(76, 76, 76);\\\">，这里发现 value 无法下拉选择，我们只能通过修改表达式的方式实现。注意填写正确的list变量名，如果给 list 命名为 list_test 则变量为$list_test。设置成功后我们点击部署即可。</span></p><img src=\\\":/d4eab59cffab439cad98ae802e9153c5\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><span style=\\\"color: rgb(76, 76, 76);\\\">部署完我们查看规则详情，发现正确引用了自定义的 list，点击 Manage lists 又会跳转到 List 的设置界面</span></p><img src=\\\":/a8fe8afb48fc4d0cafee784612cb1ac2\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p><br/></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoiV29WblEyR2pPQ00ifQ==;\\\"><span style=\\\"font-size: 24px;\\\">📝<span style=\\\"color: rgb(56, 56, 56);\\\"> 总结</span></span></h2><p><span style=\\\"color: rgb(76, 76, 76);\\\">WAF 提供的很多功能都需要高级付费用户才能使用（business 及以上），免费计划里的功能对于一般网站也够用了，可见 Cloudflare  WAF 主要服务于企业级用户赚钱。不同计划能用的功能我总结成下面的表格供大家参考</span></p><table style=\\\"--en-fitwindow:false;border-left:1px solid #d9d9d9;border-top:1px solid #d9d9d9;border-collapse:collapse;width:950px;\\\" width=\\\"950px\\\"><colgroup><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col><col style=\\\"width: 190px;\\\"></col></colgroup><tbody><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><div><br/></div><div><br/></div></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Free($0/月)</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Pro ($20/月)</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Business ($200/月)</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Enterprise (Custom)</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Custom Rules</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">最多设置 5 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">最多设置 20 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">最多设置 100 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">最多设置 1000 条</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Rate limiting rules</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">只能设置 1 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">2 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">5 条</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">5 条以上</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Managed Rules</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">Free Managed Ruleset</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Security Event</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Security Analytics</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr><tr style=\\\"height:38px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>WAF Attack Scores</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">只有Attack Score Class</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr><tr style=\\\"height:38px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Bot Score</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr><tr style=\\\"height:33px;\\\"><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p>Uploaded content scanning</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">❌</p></td><td style=\\\"--en-typeInfo:{&quot;type&quot;:&quot;text&quot;,&quot;data&quot;:{}};border-right:1px solid #d9d9d9;border-bottom:1px solid #d9d9d9;padding:10px;\\\"><p style=\\\"text-align:center;\\\">✅</p></td></tr></tbody></table><p><br/></p><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiMnlDbFJTQ0lNQ2MifQ==;\\\">Cloudflare从入门到精通 7. Cache网站加速神器</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483851&amp;idx=1&amp;sn=635175d0bf6f913e2ab873826bb35974&amp;chksm=c2e91733d3f90b44949f32faed88e686475c805474fd4f732e11f069925d432cbaae6e6e2a6e&amp;mpshare=1&amp;scene=1&amp;srcid=0526Et2XDgIjY0jXdb3WlFKO&amp;sharer_shareinfo=8498880e24bf2b364fb6b929e8ee4150&amp;sharer_shareinfo_first=8498880e24bf2b364fb6b929e8ee4150#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483851&amp;idx=1&amp;sn=635175d0bf6f913e2ab873826bb35974&amp;chksm=c2e91733d3f90b44949f32faed88e686475c805474fd4f732e11f069925d432cbaae6e6e2a6e&amp;mpshare=1&amp;scene=1&amp;srcid=0526Et2XDgIjY0jXdb3WlFKO&amp;sharer_shareinfo=8498880e24bf2b364fb6b929e8ee4150&amp;sharer_shareinfo_first=8498880e24bf2b364fb6b929e8ee4150#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483851&amp;idx=1&amp;sn=635175d0bf6f913e2ab873826bb35974&amp;chksm=c2e91733d3f90b44949f32faed88e686475c805474fd4f732e11f069925d432cbaae6e6e2a6e&amp;mpshare=1&amp;scene=1&amp;srcid=0526Et2XDgIjY0jXdb3WlFKO&amp;sharer_shareinfo=8498880e24bf2b364fb6b929e8ee4150&amp;sharer_shareinfo_first=8498880e24bf2b364fb6b929e8ee4150#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><img src=\\\":/98d126e6293448ff8742e3980ecdfc6c\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" height=\\\"auto\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiMmlneFFxNWN0X0sifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">前面的文章提到当我们把网站托管到 Cloudflare 且打开小橙云后，Cloudflare 就帮我们自动开启 CDN 加速，但是如果没有进行正确的设置会感觉加速不明显，甚至起到了“反向加速的作用”。除了境内网络线路问题，很大因素是没有正确地配置缓存，导致Cloudflare频繁回源影响网站使用体验。本文给大家详细介绍 Cloudflare Cache 的配置尤其是 Cache Rules 的配置，提升网站访问速度。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoicW1oQVJ5Uml6Nm0ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">⚙️ 基础设置</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cache的设置位于 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching</span></code> 在这里你可以设置你网站所有跟CDN缓存相关的内容。</p><img src=\\\":/e3cc6f70d256456b8b944dccff04cf08\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiZFhvSFJHWXRNbXgifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Purge Cache</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这个设置用于立即清除CDN缓存，位于 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Configuration --&gt; Purge Cache</span></code></p><img src=\\\":/efa63d2a52ef4c5caad70da1ec494039\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">主要有两个功能: </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Custom Purge</span></code>和<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Purge Everything</span></code></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiaV9UalJxY1hVSVgifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Custom Purge</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Custom Purge中文意为「定制化清除」，免费计划的用户只能根据URL来定制，且不支持通配符，最多可以设置30个URL。当用户访问指定URL资源的时候资源就会被清除，这个设置对于清除特定文件很有用。</span></p><img src=\\\":/96dfe211a13b44538607e337885ccb6f\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoidWNiMlJ1YVZrNjAifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Purge Everything</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Purge Everhthing 中文意为「立即清除」，当你点击该按钮后，Cloudflare会立即清除其边缘CDN节点里的缓存，这么操作可能会暂时降低用户访问你网站的速度，但是可以提高访问内容的准确性</span></p><img src=\\\":/7e5ea4d800e74621b5e3df8c40e8e184\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiSlRHTlNHVVhVanMifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Caching Level</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">因为用户在获取资源时会在URL添加参数，缓存级别决定CDN应缓存什么类型的静态资源，位于 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Configuration --&gt; Cache Level</span></code></p><img src=\\\":/821e42f1c7fb4fa98c6fba69e5d096ab\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h4 style=\\\"other-props:eyJibG9ja0lkIjoiQVRMNlFpclJ1cnkifQ==;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><span style=\\\"font-weight: bold;\\\">No query string</span></span></h4><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">仅在没有查询字符串时从缓存中提供资源，例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">debill.cc/pic.jpg</span></code>，带请求参数的都不返回资源</p><h4 style=\\\"other-props:eyJibG9ja0lkIjoiMXBuTVNTczk2OXcifQ==;\\\"><span style=\\\"font-weight: bold;\\\">Ignore query string</span></h4><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">无论用户的请求URL是否携带请求参数，都提供一样的资源，例如当用户访问</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">debill.cc/pic.jpg</span></code></p><h4 style=\\\"other-props:eyJibG9ja0lkIjoiMjkwZlNDeF9rVUgifQ==;\\\"><span style=\\\"font-weight: bold;\\\">Standard</span></h4><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">没有特殊需求选择标准就行</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiaFNLS1JhZl9VS1kifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Browser Cache TTL</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">客户浏览器缓存你网站静态资源的时间，默认是4小时，最高可以设置一年，如果你的网站静态资源变更比较少可以将这个值设高一点。位于</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Configuration --&gt; Browser Cache TTL</span></code></p><img src=\\\":/cd6b9899dc4a49b9af341a58a045722d\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiaV9oYVNHaVJVM20ifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Crawler Hints</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">爬虫提示。位于</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Configuration --&gt; Crawler Hints</span></code>开启该功能后Cloudflare会提供高质量的网站信息给爬虫（例如搜索引擎爬虫），<span style=\\\"color: rgb(0, 0, 0);\\\"><b>建议打开</b></span></p><img src=\\\":/81a1f465c17646129a619347a14af82c\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiLXk4VFJDSko0Qy0ifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Always Online™</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">永远在线。位于</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Configuration --&gt; Always Online™</span></code>当你的源站挂掉的时候，Cloudflare 提供互联网档案 Wayback Machine 上的网页副本。<span style=\\\"color: rgb(0, 0, 0);\\\"><b>建议打开</b></span></p><img src=\\\":/0ddb897145774da4b28fd35efcc2cea9\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiRUdnVlF1NndtQzcifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Tiered Cache</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这是影响你网站访问速度的</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b>关键设置</b></span>，但是Cloudflare是<span style=\\\"color: rgb(0, 0, 0);\\\"><b>默认关闭</b></span>的，一定要打开这个配置。位于<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Tiered Cache</span></code>原理是Cloudflare将缓存资源进行了分层，当请求到达Cloudflare 任意CDN节点时，会以最快的方式从内部网络获取缓存资源，如果不打开该开关，可能某次请求CDN节点没有命中缓存的话，那么该节点就会去回源，用户体验就差了一大截</p><img src=\\\":/921edd817121440cac8061b4ee2844e8\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"other-props:eyJibG9ja0lkIjoiblpFblFDVkFfTzEifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Cache Reserve</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这是一个按量付费的功能。Cache Reserve 是一个建立在 R2 之上的持久的数据存储服务，将网站的可缓存内容写入 Cache Reserve，作为缓存层级中的最高层，确保内容更长时间从缓存中提供，减少源服务器的负担和不必要的流量费用，架构图如下</span></p><img src=\\\":/74573ebdb85e4d03827ec1d1d859f571\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">在</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Cache Reserve</span></code>就能一键打开，博主因为没用过所以这里不再多说，感兴趣的朋友试一下</p><img src=\\\":/ba4dba1c13404807883512ffc7a1d037\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoicVBDc1RlSXAzZ1QifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🧑‍🏫 Cache Rules详解</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">除了打开上面介绍的各种配置的开关，还要进行相应的Cache Rules设置才能更好地缓存你的网站内容。免费计划里每个域名只能设置</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">10条规则</span></code>，而且是所有子域名也共用这10条规则。</p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiMEM4VFFTSE05QUsifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">默认缓存行为</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">当你把域名迁移到Cloudflare上，打开小黄云代理就可以使用Cloudflare CDN了，那么默认缓存了哪些资源呢？</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cloudflare会根据你源站Http Header的值决定是否缓存该资源，满足以下条件该资源</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b>不会被缓存</b></span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Cache-Control设置了 private, no-store, no-cache, or max-age=0.</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">存在 Set-Cookie 字段</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">非HTTP Get请求</span></div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">满足以下条件，资源</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b>会被缓存</b></span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Cache-Control 设置成了public 且max-age 大于0</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">设置了 Expires 字段且日期是未来的时间</span></div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cloudflare 仅根据文件扩展名进行缓存，而不根据 MIME 类型进行缓存。默认情况下，Cloudflare CDN </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b>不缓存 HTML 或 JSON</b></span>，但会缓存网站的 <span style=\\\"color: rgb(0, 0, 0);\\\"><b>robots.txt</b></span>。默认支持以下的拓展类型</p><div style=\\\"--en-codeblock:true;--en-blockId:w0pjRysg2ig;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span style=\\\"color: rgb(51, 51, 51);\\\">7Z CSV GIF MIDI PNG TIF ZIP\\\n\\\nAVI DOC GZ MKV PPT TIFF ZST\\\n\\\nAVIF DOCX ICO MP3 PPTX TTF \\\n\\\nAPK DMG ISO MP4 PS WEBM \\\n\\\nBIN EJS JAR OGG RAR WEBP \\\n\\\nBMP EOT JPG OTF SVG WOFF \\\n\\\nBZ2 EPS JPEG PDF SVGZ WOFF2 \\\n\\\nCLASS EXE JS PICT SWF XLS \\\n\\\nCSS FLAC MID PLS TAR XLSX \\\n\\\n</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">可以说基本支持绝大多数格式的文件，如果你有特别格式的文件要缓存，就要靠下面的Cache Rules设置</span></p><h3 style=\\\"other-props:eyJibG9ja0lkIjoiam9wU1JtQmhZYTIifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">规则设置</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这是关键的配置，位于</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Websites --&gt; Zone --&gt; Caching --&gt; Cache Rules</span></code></p><img src=\\\":/eb6669c4bc7b41d89aead89615313282\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">一般我们的网站由</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">静态资源 + 动态的api数据</span></code>组成，设置Cache Rules的目标是让静态资源都能命中，动态资源则让CDN放行，这里抛砖引玉给大家介绍两条规则，具体要根据自己网站的情况调整。</p><h4 style=\\\"other-props:eyJibG9ja0lkIjoiUnYwUVF5M3h2T0UifQ==;\\\"><span style=\\\"font-weight: bold;\\\">缓存html页面</span></h4><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cloudflare默认是不缓存html页面的，我们可以通过设置进行缓存。点击</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Create Rule</span></code>按钮后进入到设置页面。</p><img src=\\\":/6c8d320168954a9f9ea4248435609c08\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这里特别说明一下两个参数，</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Edge TTL</span></code>和<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Brower TTL</span></code>。TTL(Time To Live)指缓存留存时间，<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Edge TTL</span></code>指CDN节点缓存资源的时长，<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Brower TTL</span></code>指浏览器缓存资源的时长，具体设置看你网站更新频率，一般<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Brower TTL</span></code>设得比<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Edge TTL</span></code>小</p><h4 style=\\\"other-props:eyJibG9ja0lkIjoibFUtU1JxeVg4VVAifQ==;\\\"><span style=\\\"font-weight: bold;\\\">放行后端接口请求</span></h4><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">接着我们再设置一条规则直接放行访问后端api接口的请求</span></p><img src=\\\":/d5d39f15181d408c9960671557f834b0\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiNGtRSVRTbmI0ckUifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">☑︎ 验证缓存是否生效</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">打开了各种配置的开关和设置了Cache Rule，接下来就要验证缓存是否生效。</span></p><img src=\\\":/f2a99721c75648b6990a853a26455792\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">访问你的网站，例如：yourdomain.com，如果你的网站用了Cloudflare CDN，Cloudflare会在响应的报文头里添加一个</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">cf-cache-status</span></code>字段用于标识该资源是否命中了缓存，这个字段一共有以下状态：</p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>HIT</b></span>：命中缓存</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>MISS</b></span>: 没有命中缓存，该资源从源服务器获取</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>NONE/UNKNOWN</b></span>: Cloudflare 生成的响应表明该资源不符合缓存条件。这可能是以下的几种情况导致的</div></li><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>Worker 直接生成响应，未发送任何子请求。</b></span>在这种情况下，响应并非来自缓存，因此缓存状态将为NONE/UNKNOWN。</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>Worker 请求发起了子请求 (fetch)。</b></span>在这种情况下，子请求将记录其缓存状态，而主请求将记录为NONE/UNKNOWN（主请求未命中缓存，因为 Worker 位于缓存之前）。</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>触发了 WAF 自定义规则来阻止请求。</b></span>在到达缓存之前，由于没有缓存状态，Cloudflare 将记录为NONE/UNKNOWN。</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">重定向规则或始终使用 HTTPS 导致全球网络返回重定向到另一个资源/URL 的响应。</span></div></li></ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>EXPIRED</b></span>：在CDN中发现缓存，但是过期了，该资源从源服务器获取</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>STALE</b></span>：在CDN中发现缓存，但是过期了且该资源无法从源服务器获取</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>BYPASS</b></span>：Cache Rule里面设置的BYPASS规则</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>REVALIDATED</b></span>：该资源由 Cloudflare 的缓存提供，但已过期。该资源已通过 If-Modified-Since 标头或 If-None-Match 标头重新验证。</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>UPDATING</b></span>:该资源由 Cloudflare 的缓存提供，已过期，但源 Web 服务器正在更新该资源。通常只有访问量特别大的缓存资源同时缓存失效时才会触发该状态。</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b>DYNAMIC</b></span>：Cloudflare 认为该资产不适合缓存，并且你为设置Cache Rule指示 Cloudflare 缓存该资产。该资产是从源 Web 服务器请求的。</div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">只要你设置得当，你在Cloudflare的后台管理面板里就能看到网站的Percent Cached在不断提高，用户访问网站的体验也会更好</span></p><img src=\\\":/1a8b5668b97f4ec5939f1dbdd38f0329\\\" type=\\\"image/png\\\" data-filename=\\\"640.png\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"other-props:eyJibG9ja0lkIjoiZGc2WVF1c29mazcifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">许多境内朋友反馈用了Cloudflare的CDN后“反向加速”，除了境内网络线路问题，更大的可能是Cache没设置好，关键以下两点设置：</span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">打开Tiered cache，</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b>默认是关闭</b></span>的。该配置可以减少回源</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">设置Cache Rule ，定制你自己的缓存规则</span></div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这样可以让绝大多数静态资源都缓存到Cloudflare CDN中，同时访问后端接口时不访问CDN而是直接回源。</span></p><h2 style=\\\"other-props:eyJibG9ja0lkIjoid0pHYVI2V3llYVMifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">💭 后记</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">本文只介绍了Cloudflare Cache最基本的用法，如果结合Worker使用会变得更复杂，后续有使用场景再做具体介绍</span></p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiZ2tQU1NPWWVIV1QifQ==;\\\">Cloudflare从入门到精通 8. 使用Access实现网页访问控制</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483895&amp;idx=1&amp;sn=29c8ab2a148634065ec198f6a9d37396&amp;chksm=c2006da19eec99db60178298358a1bae8fc5c2ba0fd7192b5ae188efa057e93054eadb821ff8&amp;mpshare=1&amp;scene=1&amp;srcid=0526uvl0tZPNVKvuu5dpxBBw&amp;sharer_shareinfo=512f6d8fc0fe2277ea1716ecb1a160ba&amp;sharer_shareinfo_first=512f6d8fc0fe2277ea1716ecb1a160ba#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483895&amp;idx=1&amp;sn=29c8ab2a148634065ec198f6a9d37396&amp;chksm=c2006da19eec99db60178298358a1bae8fc5c2ba0fd7192b5ae188efa057e93054eadb821ff8&amp;mpshare=1&amp;scene=1&amp;srcid=0526uvl0tZPNVKvuu5dpxBBw&amp;sharer_shareinfo=512f6d8fc0fe2277ea1716ecb1a160ba&amp;sharer_shareinfo_first=512f6d8fc0fe2277ea1716ecb1a160ba#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483895&amp;idx=1&amp;sn=29c8ab2a148634065ec198f6a9d37396&amp;chksm=c2006da19eec99db60178298358a1bae8fc5c2ba0fd7192b5ae188efa057e93054eadb821ff8&amp;mpshare=1&amp;scene=1&amp;srcid=0526uvl0tZPNVKvuu5dpxBBw&amp;sharer_shareinfo=512f6d8fc0fe2277ea1716ecb1a160ba&amp;sharer_shareinfo_first=512f6d8fc0fe2277ea1716ecb1a160ba#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiSlFJRVFTeFpGWHMifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">当我们把网站放到公网后，如果某些页面不想让用户访问怎么办呢？例如使用</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Wordpress</span></code>开发的网站都会带一个后台管理界面，可以通过<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">https://yourdomain.com/wp-admin</span></code> 登录，有没有办法只有特定的人才能访问这个URL，其他人都不允许访问？Cloudflare Access了解一下 。</p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Access可以通过定制化的规则 + 灵活的鉴权方式，实现不同用户对不同网页的访问控制</span></p><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoieTE2MlJpcHFpTTcifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🧾 教程</span></span></span></h2><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiSXNmWlFhQW83TXUifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">步骤一：找到Acces入口</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入到 Cloudflare 的后台，选择最左侧的</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Zero Trust</span></code></p><img src=\\\":/affa5209cf4e44cc939c2a8235695abb\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">zero-trust-entrance</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入到</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">zero trust</span></code> 的管理界面后, 选择<span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Access --&gt; Applications</span></b></span></p><img src=\\\":/cec63b614d404f388939385a05d33a44\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">access-entrance</span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoibU04MFFtMXB1THkifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">步骤二：设置访问权限</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入到 Applications页面后，我们点击左上角</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Add an application</span></code> 我们进入到下面的页面，我们选择 Self-hosted , 其他选项我没使用过，感兴趣的朋友可以试试</p><img src=\\\":/dffdb56aa4cd4c4ebb8c7732e705bf3b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">add-an-application</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">选择后我们会进入到应用配置界面，下面我以我的自部署</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">wallos</span></code>应用为例，给大家做演示如何配置。必填项我都框出来了，其他选择默认选项即可。</p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Application name (应用名)：wallos</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Session Duration: 表示规则生效持续时长，最高支持1个月</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Application domain: 需要保护的应用域名，必须是托管在Cloudflare上的域名（可以看到是拉下菜单选项）</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Path: 你想要具体生效的URL，这里我只想让部分用户访问我的注册和登录页</span></div></li></ul><img src=\\\":/00cc550c2772488c96b9fb135c01d5de\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">configure-application</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">点击 Next 后我们进入规则设置界面，必填项我也框选出来了</span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Policy name: 规则名称</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Action: 要执行的操作。有</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Allow</span></code><span style=\\\"color: rgb(58, 58, 58);\\\">,</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Block</span></code><span style=\\\"color: rgb(58, 58, 58);\\\">,</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Bypass</span></code><span style=\\\"color: rgb(58, 58, 58);\\\">,</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Service Auth</span></code><span style=\\\"color: rgb(58, 58, 58);\\\"> 四个选项</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Session Duration: 表示规则生效持续时长，最高支持1个月</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Configure rules: 跟其他 Rules 的设置很类似</span></div></li><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Selector: 匹配的属性。可选项非常多，目前支持：ip范围，邮箱，邮箱结尾，国家等</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Value: 属性具体的值</span></div></li></ul></ul><div><span style=\\\"color: rgb(58,58,58);\\\">这里我设置一条规则：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Email --&gt; xxx@outlook.com</span></code></div><div> (图片上没展示不影响理解)</div><img src=\\\":/3c9c3e1a2c5e4d199aa5232316dd48b7\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">设置完后直接点 Next，Setup部分可以不管直接点 Apply。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">翻译一下刚刚操作的意思：</span></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">只有 xxx@outlook.com 用户才能访问我的 wallos-test.debill.cc/registration.php 和 wallos-test.debill.cc/login.php 页面</span></p></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiVHBSX1RLSy1NdkYifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">步骤三：验证设置是否生效</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">我们访问刚刚设置的URL，就会出现下面的页面，你要输入邮箱获取登录链接才能访问页面，因为我设置了只有我的邮箱才能接受到Cloudflare的邮件，所以即便你输入了其他邮箱，</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">你既收不到邮件也不会报错</span></b></span> （啥问题你猜去吧)。</p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这样我们的设置就生效了，当</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">相同的客户端</span></b></span>（你用手机访问需要再鉴权）再次访问该页面就直接跳转，无需再次通过邮件鉴权，下次鉴权是一个月后（因为我们设置了一个月）</p><img src=\\\":/bf3b83d4528d4722991d992fd87bdd21\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">email-auth</span></div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiYXJMTFFtOHEyVG0ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🪪 Service Auth</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">在配置规则的地方有一个</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Service Auth</span></code>的选项，这里展开讲讲，配置这个选项允许你携带token访问Access保护的应用。</p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">考虑一个常见的场景：</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">某个应用的URL被Access保护了（例如：</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">wallos.debill.cc/login.php</span></code>），同时我又有一个监控应用定期往这个URL发送请求来监控这个应用是否在线。如果直接往这个URL发送请求获取到的都是Access返回的响应，无法知道wallos是否在线，携带Service Auth配置的token信息就可以很好解决这个问题</p><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiYUp2ZlFlbmVDT0kifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">配置</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Zero Trust -&gt; Access -&gt; Service auth</span></code> 界面，点击<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Create Service Token</span></code></p><img src=\\\":/2bbf3a7631da41f682c81e24cafee66b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">service-auth</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">设置一下token名称和过期时长，最低一年最长可以用不过期</span></p><img src=\\\":/0c8a1f5794304047b6b282edd3ab235c\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">add-service-token</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">点击</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Generate token</span></code> 之后，Cloudflare 会生成 client ID 和 client secret，client secret要记住后面有用, 点击 Save 就生效了</p><img src=\\\":/9d4d27d015ed4c228087f6bc4f44471e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">service-token-detail</span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoic0lJbVMyajZpeUcifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">设置规则</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">我们回到Application的设置界面，刚刚设置了一条规则，我们再加一条规则</span></p><img src=\\\":/6de359be35d14f12aef14616fa489650\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">cf8-access-edit.png</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">让携带 service token的请求都通过。</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Selector</span></code>选择<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Service Token</span></code> value选择刚刚给token的命名，这样就设置完成了。</p><img src=\\\":/573ee664e15641e7afcfa45d03ff8cf9\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">service-token-setting</span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiVElaOFRXTzI2RjUifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">验证是否生效</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">我们用API测试工具测试一下，请求Header中不携带client ID 和 client secret 返回的是Cloudflare的鉴权页面</span></p><img src=\\\":/b197ceb114de48bc907db7c2feb59eb6\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">api-test-1</span></div><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">携带client ID 和 client secret后便能返回我们的网页</span></p><img src=\\\":/4e1221b4a7bf4328bc92fd519550bf33\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(221, 165, 45);\\\"><span style=\\\"color: rgb(221, 165, 45);\\\">api-test-2</span></div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoibkxCc1EtVm1KeGQifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🕳️ 避坑指南</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">当你网站使用前端路由（如 React Router 或 Vue Router）进行跳转时，浏览器不会向服务器发送新的请求，因此 Cloudflare Access 无法在这一过程中进行身份验证。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">例如你希望用户可以访问</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">yourdomain.site</span></code>但是不能访问<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">yourdomain.site/console</span></code>，你在Access设置了访问<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">yourdomain.site/console</span></code>要进行身份验证，但因为你的应用使用了前端路由，页面直接通过前端进行跳转的，没有给Cloudflare的边缘节点发送请求，所以该设置不会生效</p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">如果你要使用 Cloudflare Access，注意你的网站是不是SPA（Single page application）</span></p><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoidlgwMFNlNTlIWnUifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">对带后台访问地址的网站，通过 Access 既提高了网站的安全性，不担心爬虫或者黑客去爆破你的后台，又可以享受公网访问后台的便利性。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">需要注意⚠️ 你的网站如果是SPA（Single page application）用前端路由切换页面时，因为你访问页面URL时不经过Cloudflare进行代理，Access会失效。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">网站想要Access进行访问控制必须满足以下几点：</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">1️⃣ 域名托管在 Cloudflare上</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">2️⃣ 配置Access访问规则</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">3️⃣ 不是前端路由</span></p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiZ2xwS1NlRnJJLWcifQ==;\\\">Cloudflare从入门到精通 9. Web Analytics</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483912&amp;idx=1&amp;sn=03eefdf33e1dd554977f2b1f8cc383d6&amp;chksm=c287e5f1f13799bd676384f06cb294b05a85e3549d045e5bb2f83fd39a6f99b8223c716c4d7c&amp;mpshare=1&amp;scene=1&amp;srcid=0526HjkQE46cmwnZrXIuToSD&amp;sharer_shareinfo=437943f4716615d0c4e747ced2ad5293&amp;sharer_shareinfo_first=437943f4716615d0c4e747ced2ad5293#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483912&amp;idx=1&amp;sn=03eefdf33e1dd554977f2b1f8cc383d6&amp;chksm=c287e5f1f13799bd676384f06cb294b05a85e3549d045e5bb2f83fd39a6f99b8223c716c4d7c&amp;mpshare=1&amp;scene=1&amp;srcid=0526HjkQE46cmwnZrXIuToSD&amp;sharer_shareinfo=437943f4716615d0c4e747ced2ad5293&amp;sharer_shareinfo_first=437943f4716615d0c4e747ced2ad5293#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483912&amp;idx=1&amp;sn=03eefdf33e1dd554977f2b1f8cc383d6&amp;chksm=c287e5f1f13799bd676384f06cb294b05a85e3549d045e5bb2f83fd39a6f99b8223c716c4d7c&amp;mpshare=1&amp;scene=1&amp;srcid=0526HjkQE46cmwnZrXIuToSD&amp;sharer_shareinfo=437943f4716615d0c4e747ced2ad5293&amp;sharer_shareinfo_first=437943f4716615d0c4e747ced2ad5293#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiZ2gtaVRtaU9aYnIifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">我们上线一个网站后往往需要添加追踪统计的功能，方便我们了解当前网站的流量，Cloudflare Web Analytics 工具可以以简单的方式集成到我们的网站，帮助我们实现网站流量分析</span></p><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiRWFER1JtUF9uR08ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🧾 教程</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">下面的教程分三种情况介绍如何将 Cloudflare Web Analytics 接入你的网站</span></p><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiNm0xQVRDZFFCUEkifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">通过 Cloudflare 代理的网站</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">如果你的域名是托管在 Cloudflare 上的且开启了小黄云，那集成 Web Analytics 十分简单，进入后代后选择</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Analytics &amp; Logs --&gt; Web Analytics --&gt; Add a site</span></code></p><img src=\\\":/76ac0857bae146bca9d5e1065e23f7a3\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入菜单后，在下来菜单中选择你托管在 Cloudflare 中的域名，然后点击 Done 即可</span></p><img src=\\\":/ab4f60cdaa5c41fb8ae8c6950125b1ef\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiZ1diYlN1Z3UwTUcifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">不通过 Cloudflare 代理的网站</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">如果你的网站不是由 Cloudflare 代理的，其他步骤都相同，只是在 Set up hostname 步骤里输入域名后再点击完成</span></p><img src=\\\":/d9222536d9e74b7fb9ece47963a59bde\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">此时你需要将下面的 JS 代码粘贴到你的网站的任意 HTML 的 header 里</span></p><img src=\\\":/9e24f74a6ce14512b2c8eb7b9430c36f\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiR252TlRtal9JTDgifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Pages 项目</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Pages 项目集成十分简单，进入后台后，选择</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Workers &amp; Pages -&gt; 选择你的项目</span></code></p><img src=\\\":/517256b899b643219728b9d516370213\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">点击上方 Tab，然后拉到最下方 enable 就集成好了</span></p><img src=\\\":/0a2bb247f18e431aac1d62267e665231\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiaE1nZVNlajloLTUifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📊 指标讲解</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">进入后代后选择</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Analytics &amp; Logs --&gt; Web Analytics</span></code> 再进入刚刚设置追踪的网站，Cloudflare 会默认展示过去 24 小时里网站的数据，可以看到很多统计指标，先看最左上角</p><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiSUV4R1F1TDNGcHkifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Visits - 网站访问量</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">你可以添加不同的 filter 查看具体的数据，也可以选择查看的流量的日期区间（最高支持半年），拉到页面最下面能看到所有信息，包括总访问数、流量都从哪些国家来的、从哪些链接过来的，访问的页面路径是哪些、访问的设备等信息</span></p><img src=\\\":/e307deaaf03d4a84b0ccb5733327b756\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiQUg2Q1JxRjNRRzYifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Page views - 页面访问量</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Page views 页面和 Visits 页面差不多</span></p><img src=\\\":/70fb5dd069ed418095695bbf96912192\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoieHpGQVNxYnhidnMifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Page load time - 页面加载时间</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这个指标是体现户访问你网站是快还是慢最直观的指标，加载页面的总耗时。页面加载时间由很多部分组成，包括但不限于 DNS 解析时间 、TCP 建链时间、请求时间、响应时间、浏览器渲染页面时间等，所以不能将下面每部分时间汇总。还有一些耗时非显示，例如 pre-DNS lookup 的时间</span></p><img src=\\\":/7dbacfe77331416db6d899d451bdffc6\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiOXZ4R1EydTh3VTcifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">Core Web Vitals</span></span></h3><img src=\\\":/c7685a407c714676937cb3396bc75684\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">最后一项是由谷歌创造的 CWV （Core Web Vital）指标，用于衡量网站的用户体验如何。分别由以下 4 个指标组成：</span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Largest Contentful Paint (LCP) ↗: 测量用户感知的页面加载速度。它返回页面主要内容的加载时间。尽可能让</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">75%的网页访问的 LCP 不超过 2.5 秒</span></b></span>，小于 2.5 秒则为 good</div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Interaction to Next Paint (INP) ↗: 衡量用户界面响应能力——网站对点击或按键等用户交互的响应速度。良好的响应代表网页对用户交互能做出快速响应，</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">INP 低于或等于 200 毫秒表示网页响应速度良好</span></b></span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">First Input Delay (FID) ↗: 衡量网站对第一个用户输入的响应速度</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Cumulative Layout Shift (CLS) ↗: 测量视觉稳定性，即在将各种元素加载到视图中时页面布局是否发生变化。尽可能让</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">75% 的网页访问的 CLS 不高于 0.1</span></b></span>，小于 0.1 则为 good</div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">根据 Google 设计的行业标准方法和测试，每个指标都会自动被评为“良好”、“需要改进”或“较差”。往下拉会有一个</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Debug View</span></code>页面告诉你哪些元素影响 LCP，需要改善</p><img src=\\\":/ad68e15808274d4c8d67b12ee809f96e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiSEVLcVNtZ2puNE0ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🍙 对比 Umami</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">对比 Umami，Visits 和 Page Views 的指标都是有的，但是有以下差别</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Cloudflare Web Analytics 优于 Umami 的地方：</span></b></span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">持续的 Core Web Vitals 指标记录</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Page Load Time 指标</span></div></li></ul><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Umami 优于 Cloudflare Web Analytics 的地方：</span></b></span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Session 功能，记录每一个用户的访问次数，访问了多少个页面，从哪个国家用的什么浏览器和设备等信息</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Raealtime 功能记录当前有哪些用户正在访问网站</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Compare 功能可以对比不同时间段的流量情况</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">如果是自部署的 Umami 可以查看网站整个生命周期的流量，Cloudflare Web Analytics 最多只支持半年</span></div></li></ul><img src=\\\":/95990fa7a01448759ceea205b2d6822f\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiUjRvdFMydW9vejYifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🚫 限制</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Web Analytics 有一些使用限制</span></p><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">免费计划不能设置 Rule 让部分页面不追踪</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Cloudflare 允许最多 10 个非 Cloudflare 代理的网站使用 Web Analytics</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">最多可以查看过去六个月的流量情况</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">不支持 UTM 参数查询。UTM 参数是特殊的查询字符串参数，可以帮助追踪流量的来源。目前，Cloudflare Web Analytics 不会记录查询字符串，以避免收集潜在的敏感数据。</span></div></li></ul><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiNlJGZ1Rta1M1RHYifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🕳️ 避坑指南</span></span></span></h2><ul><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">如果你将 Cache-Control 标头设置为 public，no-transform，Cloudflare 将无法修改网站的原始 payload。因此，Beacon 脚本不会自动注入网站，Web Analytics 将不起作用</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">Cloudflare Web Analytics 可以通过覆盖 History API 的 pushState 函数并监听 onpopstate 事件来自动跟踪单页应用程序 (SPA) 上的用户交互。注意，不支持基于哈希的路由器。</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">有朋友反馈，Web Analytics 可能会把 DOMContentLoaded 时间变长很多导致访问性能差</span></div></li><li><div style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58, 58, 58);\\\">当你的主域名开启了 Web Analytics，所有</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">子域名也会默认使用 Web Analytics</span></b></span></div></li></ul><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiazY2Q1RLUXlHd0gifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">如果你的域名托管在 Cloudflare，图省事又对网站统计没有特殊的需求，只想看看 UV 和 PV 等指标，那么直接一键集成 Web Analytics 最方便。如果还需要其他的一些功能，例如：Session 查看、网站点击热力图查看、网站目前谁在线等，建议使用</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Umami</span></code>、<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(155, 110, 35);\\\">Posthog</span></code>等专业做网站流量统计的服务。</p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiY3BfU1JDUXEwNDAifQ==;\\\">Cloudflare从入门到精通 10. Tunnel 内网穿透神器</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483942&amp;idx=1&amp;sn=8ad24888d26e29f84ffd96451154d031&amp;chksm=c241f438e0328a9c91aae2c17e5fca0f442d739a1f57c21304718c87d87384fb26c9d618b71c&amp;mpshare=1&amp;scene=1&amp;srcid=0526JXpTcbHd7p8vDRHXlw94&amp;sharer_shareinfo=478a9a06e2ac8930c5953fb9c035f468&amp;sharer_shareinfo_first=478a9a06e2ac8930c5953fb9c035f468#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483942&amp;idx=1&amp;sn=8ad24888d26e29f84ffd96451154d031&amp;chksm=c241f438e0328a9c91aae2c17e5fca0f442d739a1f57c21304718c87d87384fb26c9d618b71c&amp;mpshare=1&amp;scene=1&amp;srcid=0526JXpTcbHd7p8vDRHXlw94&amp;sharer_shareinfo=478a9a06e2ac8930c5953fb9c035f468&amp;sharer_shareinfo_first=478a9a06e2ac8930c5953fb9c035f468#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483942&amp;idx=1&amp;sn=8ad24888d26e29f84ffd96451154d031&amp;chksm=c241f438e0328a9c91aae2c17e5fca0f442d739a1f57c21304718c87d87384fb26c9d618b71c&amp;mpshare=1&amp;scene=1&amp;srcid=0526JXpTcbHd7p8vDRHXlw94&amp;sharer_shareinfo=478a9a06e2ac8930c5953fb9c035f468&amp;sharer_shareinfo_first=478a9a06e2ac8930c5953fb9c035f468#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiamNqX1RleFBHTEEifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">如果你有网站或者应用部署在自己的家用电脑上，又想通过公网的访问的你的网站，要怎么办呢？</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">方式一：将应用搬到有公网 ip 的服务器上</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这种方式需要你购买一台服务器，同时要会一些基础的项目部署技巧，但是如果你想在服务器跑一些用到 GPU 的应用，那么你需要租用非常昂贵的服务器，同时所有操作都必须使用命令行，有些朋友也未必熟悉 Linux，而家用电脑的独立显卡除了可以玩游戏还可以跑模型，部署现在大火的大模型比租用服务器便宜多了，租用云服务器并不是一个好选择</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">方式二：跟运营商申请公网 ip</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">找运营商获取公网 ip 很麻烦，会问你要公网 ip 做什么，还要备案等一系列手续，而且 ip4 的公网 ip 还不一定有等等问题。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">此时你可以考虑使用 Cloudflare Tunnel 无需公网 ip 实现</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">内网穿透</span></b></span>。本文会教你快速上手 Cloudflare Tunnel、如何查看 Tunnel 日志、同时对其优缺点进行讲解。</p><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoieEpUZlR1MVNBbjgifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🧾 教程</span></span></span></h2><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiVExsNFJ1bFI0QW0ifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">创建 Tunnel</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">登录 Zero Trust ↗  选择  </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Networks</span></b></span> &gt; <span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Tunnels</span></b></span>. 点击 <span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Create a tunnel</span></b></span> 创建一个通道</p><img src=\\\":/bab3e0879b7e486db1207af2b44e95de\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">我们选择 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Select Cloudflared</span></b></span>, 不要选择 WARP</p><img src=\\\":/97bc9e76133a49fab1570b3924df42e5\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">给你的 tunnel 命个名，然后点击</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Save tunnel</span></b></span></p><img src=\\\":/3cd57372037d4eb68c117cc4fc552a86\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">接下来进入安装页面，</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">cloudflared</span></b></span> 支持多平台安装，甚至包括 Docker 的安装方式，我的 Macbook 已经安装过 cloudflared 了，所以选择右侧的安装命令。</p><img src=\\\":/2cd91779a4d44f15b62d44914b31e747\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">本地安装成功后，在 tunnel 的后台可以看到 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Connectors</span></b></span> 下面已经联通的 tunnel，再点击右下角的 Next</p><img src=\\\":/0a6836e667764f0797180aa4cb0f0170\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这个页面是用于配置公网访问的域名和你本地服务的映射关系，注意！这个域名必须托管在 Cloudflare 上。这里我让所有访问 https://tunnel.debill.cc 的流量都转到本地的 4000 端口</span></p><img src=\\\":/b1eac25f602f4680ae821e6900ff280b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiRW9IUVNDb0o4WmYifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">启动本地服务</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">这里我以我的博客举例，在本地机器上启动服务。</span></p><img src=\\\":/6defd452bd7846eab8e90862db5db476\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">在 Cloudflare tunnel 的后台可以看到 tunnel 的状态是 healthy，说明我们可以直接通过刚刚设置的域名访问本地服务。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">PS：如果刚启动完本地服务访问不通可以再等等再试试，偶尔会遇到这样的情况</span></p><img src=\\\":/77911e1ca669442cb914e12e52108371\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">通过刚刚设置的域名可以正常访问本地应用</span></p><img src=\\\":/9951f33ff936418aabde43b76f483ef1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">当我将本地应用停了，再次访问 https://tunnel.debill.cc/ 就变成 Error code 502</span></p><img src=\\\":/74c5186b479f479d9f6d58fc6545d953\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiWHZyZlMyNnhaMW8ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📝 日志查看</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">有两种方式可以查看 tunnel 的访问日志，一种是在 Cloudflare 的控制面板查看，另一种方式是启动的时候指定日志参数</span></p><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiRlBnVFFXWk1RN0wifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">在控制台查看日志</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">回到 Cloudflare tunnel 的后台，点击 Connector ID</span></p><img src=\\\":/97d948fe12994f9299026171d2c0305f\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">再点击 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Begin log stream</span></b></span> 就可以获取当前访问服务的实时日志，还能将日志下载成 csv 格式的文件，当然这种方式只适合偶尔查看日志。</p><img src=\\\":/d5dcd5a331d04b21bbe72948d58751be\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiR1IwNVFhQzdSbzEifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">使用命令行输出日志</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">前面我们启动 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">cloudflared</span></b></span> 的时候没有设置日志输出，其实可以在启动的时候执行以下命令，就能将后台日志打印到我们本地文件</p><div style=\\\"--en-codeblock:true;--en-blockId:9_HARaz5MpL;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\"><span style=\\\"color: rgb(51, 51, 51);\\\">cloudflared tunnel --logfile mytunnel.log run &lt;UUID&gt;\\\n\\\n</span></div><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiMVA2TVEycERFOUsifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">🌟 优点&amp;缺点</span></span></span></h2><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiRk9ndVM2cnlKeE0ifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">优点</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">核心组件开源</span></b></span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">tunnel 依赖的核心组件 cloudflared是用 go 语言编写的开源项目，相比其他内网穿透软件安全性有极大的保障，任何问题也可以通过社区去寻找答案。我了解不少号称免费的内网穿透软件都被爆出有安全问题。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">跨平台支持</span></b></span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cloudflare tunnel 可以做到全平台支持（Windows / MacOS / Linux）, 其他的内网穿透软件只支持个别平台</span></p><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoicGJRVFNlTUxBSkIifQ==;\\\"><span style=\\\"color: rgb(34, 34, 34);\\\"><span style=\\\"font-weight: bold;\\\">缺点</span></span></h3><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">访问不稳定</span></b></span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">有不少朋友反馈，在境内使用 tunnel 会不稳定，有时候访问速度很慢，甚至有无法访问应用的情况</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">学习成本</span></b></span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">Cloudflare 官方提供的安装方式很多都需要命令行，这对不懂代码的朋友有一定学习的成本，不像其他内网穿透的软件，一键安装就可以使用</span></p><h2 style=\\\"background-color:transparent;other-props:eyJibG9ja0lkIjoiTzJYc1FXSDhSUm0ifQ==;\\\"><span style=\\\"font-size: 22px;\\\"><span style=\\\"color: rgb(81, 81, 81);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">使用 Cloudflare tunnel 实现内网穿透，前置条件是域名必须托管在 Cloudflare 上，如果你有一些自用的服务部署在了家用服务器，又难以获取公网 ip，可以尝试用 tunnel 内网穿透，唯一的缺点可能是境内访问不稳定，如果是对外提供的服务还是建议使用正常的部署方式，不要使用内网穿透。</span></p><p style=\\\"color:rgb(58, 58, 58);\\\"><span style=\\\"color: rgb(58,58,58);\\\">本文只介绍了 http 协议的内网穿透方式，实际 cloudflared 还能支持 SSH/ gRPC 等协议，想深入了解的朋友可以自己多尝试尝试</span></p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiVXJQc1ItSEM5SFIifQ==;\\\">Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483967&amp;idx=1&amp;sn=db61253a32da54cc89032722440d0556&amp;chksm=c2ae4f7d14347520e01b4680091ae946ac2302aaceab8b7d7f25366bbca0c9a5bb2b1019cbca&amp;mpshare=1&amp;scene=1&amp;srcid=0526alVpsr3kLVBodddYIAC2&amp;sharer_shareinfo=c2d3b8dadad51474438095ad2b19a56b&amp;sharer_shareinfo_first=c2d3b8dadad51474438095ad2b19a56b#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483967&amp;idx=1&amp;sn=db61253a32da54cc89032722440d0556&amp;chksm=c2ae4f7d14347520e01b4680091ae946ac2302aaceab8b7d7f25366bbca0c9a5bb2b1019cbca&amp;mpshare=1&amp;scene=1&amp;srcid=0526alVpsr3kLVBodddYIAC2&amp;sharer_shareinfo=c2d3b8dadad51474438095ad2b19a56b&amp;sharer_shareinfo_first=c2d3b8dadad51474438095ad2b19a56b#rd</a></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483967&amp;idx=1&amp;sn=db61253a32da54cc89032722440d0556&amp;chksm=c2ae4f7d14347520e01b4680091ae946ac2302aaceab8b7d7f25366bbca0c9a5bb2b1019cbca&amp;mpshare=1&amp;scene=1&amp;srcid=0526alVpsr3kLVBodddYIAC2&amp;sharer_shareinfo=c2d3b8dadad51474438095ad2b19a56b&amp;sharer_shareinfo_first=c2d3b8dadad51474438095ad2b19a56b#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483...</a></div></div><p><br/></p><div>原创DeBill DeBill独立开发 </div><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiYVB3WFR1THF2bFcifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">运营一个网站有时候需要注入一些第三方工具和脚本到网页页头或者页脚，例如：</span></p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">添加流量分析工具</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">添加广告脚本</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">验证网站所有权</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">客服机器人</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">营销自动化工具</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">……</span></div></li></ul><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">管理这些三方工具和脚本对于有无开发经验的朋友都不是什么方便事。例如， 注入一段第三方脚本的流程大致是这样：</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">打开编辑器 → 找到要添加/删除脚本的位置 → 部署上线</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">如果频繁变动脚本的场景，就要不断重复上面的步骤。</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">如果网站不是自己开发的，对于不懂代码的普通站长甚至不知道在哪里添加或者删除脚本， 不仅管理麻烦，还有以下问题：</span></p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">三方脚本添加多了用户加载网站会很慢</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">客户浏览器直接与第三方工具交互，无法保证这些工具都收集了什么客户信息</span></div></li></ul><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">Cloudflare Zaraz 可以很好地解决上面提到的问题，Zaraz 提供了一个简易的后台管理界面，方便用户对第三方工具进行增删改查，再凭借 Cloudflare 的全球网络，保证用户加载这些网络的脚本的速度和安全性</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">本文以给网站添加 Umami 脚本为例，手把手教你使用 Cloudflare Zaraz 管理第三方脚本</span></p><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiUkdCeVFDYWNCSWMifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">🧾 教程</span></span></span></h2><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiT2FHZVFpQmdnaUQifQ==;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">Umami 简介</span></span></h3><img src=\\\":/1bce39330ce04346bec99dbae54875b7\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">umami-saas</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">Umami 是一款注重隐私保护的开源(地址：https://umami.is )网站流量统计分析工具，可作为 Google Analytics 的轻量化替代方案。其核心特点在于</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">简单易用</span></b></span>和<span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">隐私合规</span></b></span>, 你可以自部署该软件避免数据依赖第三方平台，也可以使用 Umami 官方提供的 SaaS 服务。特别适合个人博客或中小型网站进行合规、低成本的流量监控。</p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">为了方便展示，我就使用 Umami 官方提供的 SaaS 服务的免费版作为 demo，自部署的版本操作流程也是一致的。</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">网页登录后台后，我们先添加自己的网站域名，在设置</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Tracking code</span></code>里有一串脚本用于用站数据统计追踪，这里先保存下来，后面会用</p><img src=\\\":/14b8aa236bba433aa96126b080ffab75\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">umami</span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiV2lPUFFDY2MwMV8ifQ==;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">Zaraz 设置</span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">使用 Zaraz 前提：域名托管在 Cloudflare 且打开了 proxy 的小黄云开关，当然这也是 Cloudflare 很多产品的使用前提，熟悉本系列的读者应该都清楚。</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">入口在后端管理界面的左侧 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Tag Management</span></code>里，一进入就能看到当前账户下你的哪些域名使用了 Zaraz</p><img src=\\\":/9255d13f5c5446149354de31b73a1cd3\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-entrance</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">我们选择希望配置 Zaraz 的域名，进入后可以看到最上方有 4 个标签页，默认入口是在</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Thrid-party tools</span></code></p><img src=\\\":/9d1a093411fd4905a8895e1bdd73178d\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-tagsetup</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">我简单说下这 4 个 tab 的作用</span></p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">Thrid-party tools：默认输入，主要的工具配置页面</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">Triggers：满足哪些条件触发 Thrid-party tools 中设置的工具</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">Variables：设置 api 用到的一些变量</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">Settings: 各种设置的入口</span></div></li></ul><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">其他 tab 我们暂时不管，主要关注</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Thrid-party tools</span></code>，点击右上方的<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Add new tool</span></code> 添加第三方的工具或者脚本，这里我已经添加了 Umami 的脚本但不影响我们的配置。进入添加工具的界面我们看到 Cloudflare 已经为我们内置了很多工具，广告相关的有<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Google Ads</span></code>, <code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Facebook Pixel</span></code>等，流量统计有常见的<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Google Analytics</span></code></p><img src=\\\":/b66fb2c561cb48fc8b16e816d0d7381e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">add-tools</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">如果没有我们需要的工具怎么办？点击左侧的</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Custom</span></code>选择<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Custom HTML</span></code></p><img src=\\\":/f1a51ced39d941f692d0e011b318a611\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">custom-html</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">进入这个选项后会让你填写该工具的名称，和具体操作</span></p><img src=\\\":/4a48b6a2cdf441529b02424a0a774015\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">custom-html-name</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">这里要说明一下，</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Firing Triggers</span></code>就是触发器的意思，代表什么情况下触发使用该工具，系统会提供一个默认的<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Pageview</span></code>触发器，下面配置的意思是：<span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">当有用户访问网页的时候就会触发该脚本</span></b></span> ，再点击 save 保存，这样就设置好了。</p><img src=\\\":/5cb08ecd385c47bea450fbc442a07f26\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">custom-html-settings</span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiN0hoaVIyMnlXdWkifQ==;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">验证设置是否生效</span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">添加完工具我们要查看工具是否生效，首先可以在 Zaraz 的入口处查看，可以看到过去该工具过去 24 小时内的简单调用折线图</span></p><img src=\\\":/d84c0ed9153a467b9dae4cb835dd81ba\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-check</span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">还有一种方式也能检查工具配置是否生效。访问添加该配置的网站，可以在网页的</span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">&lt;head&gt;</span></code>标签中找到<code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">&lt;script&gt;</span></code>的标签，可以看到网页已经加载zaraz和相关的工具</p><img src=\\\":/291b6f48f46842c8995d1667807ea592\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\" width=\\\"auto\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">check by web</span></div><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiN0FoaFRLWTNDQ2QifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">🕳️ 避坑指南</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">之前的这篇文章（</span><a href=\\\"https://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247483851&amp;idx=1&amp;sn=635175d0bf6f913e2ab873826bb35974&amp;scene=21#wechat_redirect\\\" rev=\\\"en_rl_none\\\" target=\\\"_blank\\\"><span style=\\\"color: rgb(20,20,20);\\\">Cloudflare从入门到精通 | 7. Cache网站加速神器</span></a><span style=\\\"color: rgb(20,20,20);\\\">）提到，你可以设置 Cache Rule 缓存某些页面的 html 文件，如果你设置了这样的规则，使用 Zaraz 后记得点击「Purge Cache」让缓存暂时失效，否则用户获取到页面还是老的页面</span></p><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoia2pBelNtbFJ4RGEifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">Zaraz 对很多工具做了官方集成，例如 Google Analytics，方便用户网站一键添加这些工具，如果官方没有集成的功能，我们也可以使用 </span><code style=\\\"-en-code: true\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Cutom Html</span></code> 自行设置。设置完后记得查看是否有设置 html 页面缓存相关的 cache rule，有的话记得让缓存失效才能让 Zaraz 设置立马生效。</p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">有了 Zaraz，依靠 Cloudflare 全球化网络，既能提升网站加载三方工具和脚本和保证三方脚本的安全性，又能方便地管理脚本无需频繁修改网站源代码</span></p><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiWFpQTFR5eVV0czYifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">🗒️ 后记</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">使用 Zaraz 管理第三方脚本只是功能的一部分，该工具还有很多强大的功能，例如：</span></p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">创建并管理用户同意窗口</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">给网站嵌入 Ins 和 X 博文</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">通过 Managed Components 实现服务端渲染嵌入</span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">用户行为埋点分析</span></div></li></ul><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"color: rgb(20,20,20);\\\">鉴于篇幅问题我会在后面的文章中继续介绍</span></p><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">修改于</span></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoiSjdlbFRtcjhBVlAifQ==;\\\">Cloudflare从入门到精通 12. 1分钟给网站嵌入推文</h1><div><b>Source URL:</b> <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247484088&amp;idx=1&amp;sn=f4e72e8588823def789df3ef307f1f86&amp;chksm=c2f92f4e0ef9bfcd135a9531ac62ff660ee0b2984d55635efc699fa475c4a3ce0133922fdf45&amp;mpshare=1&amp;scene=1&amp;srcid=0526PHOzcWs9xcc7lCn19MSv&amp;sharer_shareinfo=7e2ab1955d1823daeb4cc89cc16ff664&amp;sharer_shareinfo_first=7e2ab1955d1823daeb4cc89cc16ff664#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247484088&amp;idx=1&amp;sn=f4e72e8588823def789df3ef307f1f86&amp;chksm=c2f92f4e0ef9bfcd135a9531ac62ff660ee0b2984d55635efc699fa475c4a3ce0133922fdf45&amp;mpshare=1&amp;scene=1&amp;srcid=0526PHOzcWs9xcc7lCn19MSv&amp;sharer_shareinfo=7e2ab1955d1823daeb4cc89cc16ff664&amp;sharer_shareinfo_first=7e2ab1955d1823daeb4cc89cc16ff664#rd</a></div><div><br/></div><p><br/></p><div style=\\\"--en-blockquote:true;box-sizing: border-box; padding-left: 19px; padding-top: 6px; padding-bottom: 6px; border-left: 3px solid #b4c0cc; background-position: initial initial; background-repeat: initial initial; margin-top: 6px\\\"><div>原文链接: <a href=\\\"http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247484088&amp;idx=1&amp;sn=f4e72e8588823def789df3ef307f1f86&amp;chksm=c2f92f4e0ef9bfcd135a9531ac62ff660ee0b2984d55635efc699fa475c4a3ce0133922fdf45&amp;mpshare=1&amp;scene=1&amp;srcid=0526PHOzcWs9xcc7lCn19MSv&amp;sharer_shareinfo=7e2ab1955d1823daeb4cc89cc16ff664&amp;sharer_shareinfo_first=7e2ab1955d1823daeb4cc89cc16ff664#rd\\\" rev=\\\"en_rl_none\\\">http://mp.weixin.qq.com/s?__biz=Mzk0NTcxMzU3NQ==&amp;mid=2247484...</a></div></div><p><br/></p><div><br/></div><h1 style=\\\"other-props:eyJibG9ja0lkIjoicmJZcFRtUE1ISGUifQ==;\\\"> Cloudflare从入门到精通 12. 1分钟给网站嵌入推文 </h1><div>原创DeBill DeBill独立开发 </div><div><br/></div><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiQy01VFRtSUFXLWYifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">📜 前言</span></span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">如果你想给你的网站嵌入推特的推文（例如添加 Testimonials 的情况），使用 Zaraz embed 1 分钟给任何类型网站嵌入推文，直接看效果图</span></span></p><img src=\\\":/1ba52efb6b5746f7b9f2ea89265591b1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-embed-hexo</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">上面的效果</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">无需开发任何组件</span></b></span>，且用<span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">任何开发框架都可以集成</span></b></span>，下面我用 <span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Hexo</span></b></span> 框架演示给大家如何集成 Zaraz embed。</span></p><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Hexo</span></b></span> 是一个基于 Node.js 的<span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">静态博客框架</span></b></span>，主要用于快速搭建个人博客或技术文档网站。它的核心作用是将 Markdown（或其他格式）的源文件，生成静态 HTML 文件，最终部署到服务器或静态托管平台</span></p><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoia3JOLVNtUTlSVTEifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">🧾 教程</span></span></span></h2><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiQ21sZVM2U1FKNTYifQ==;\\\"><span style=\\\"font-size: 18px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">创建 Hexo 基础项目</span></span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">首先安装 </span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">hexo-cli</span></span></code></span> 命令工具（要先提前安装 nodejs 环境）</p><div style=\\\"background-color:rgb(40, 44, 52);\\\"><br/></div><div style=\\\"--en-codeblock:true;--en-blockId:Sgv6Su5iGaX;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\">npm install -g hexo-cli\\\n\\\n</div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">安装完后我们创建 hexo 基础项目</span></span></p><div style=\\\"background-color:rgb(40, 44, 52);\\\"><br/></div><div style=\\\"--en-codeblock:true;--en-blockId:KuIJSehZSZp;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\">hexo init hexo-demo\\\n\\\n</div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">创建成功后我们用 vscode 打开文件夹，可以看到以下的目录结构，打开</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">hello-hexo.md</span></span></code></span>文件</p><img src=\\\":/447d06e437084099aed0526cdf6bb7be\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">hexo-demo</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">然后将下面的内容全部复制到</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">hello-hexo.md</span></span></code></span>里，这里的关键是文件中要包含 <span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">&lt;twitter-post tweet-id=&quot;&quot;&gt;&lt;/twitter-post&gt;</span></span></code></span> 这对标签，tweet-id 可以选择任何你喜欢的推特，tweet-id 是可以从网页中获取</p><img src=\\\":/05651d7e0ca6490abf0a0df5bfa95554\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">twitter-id</span></span></span></div><div style=\\\"background-color:rgb(40, 44, 52);\\\"><br/></div><div style=\\\"--en-codeblock:true;--en-blockId:1k1vQ27GYHW;--en-meta:{&quot;title&quot;:&quot;&quot;,&quot;lang&quot;:&quot;Plain Text&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;showLine&quot;:true,&quot;lineWrap&quot;:true};box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial; margin-top: 6px;\\\">---\\\n\\\ntitle: hexo integrates zaraz embed\\\n\\\ndate: 2025-03-24 16:35:44\\\n\\\n\\\n\\\n---\\\n\\\n\\\n\\\nThis is a demonstration site for Hexo, showcasing how to embed tweets from X using Zaraz.\\\n\\\n\\\n\\\n<span style=\\\"color: #e06c75;\\\">## Tweets</span>\\\n\\\n\\\n\\\n<span style=\\\"color: #e06c75;\\\">### Text</span>\\\n\\\n\\\n\\\n&lt;<span style=\\\"color: #e06c75;\\\">twitter-post</span> <span style=\\\"color: #d19a66;\\\">tweet-id</span>=<span style=\\\"color: #98c379;\\\">&quot;1822202930919039208&quot;</span>&gt;&lt;/<span style=\\\"color: #e06c75;\\\">twitter-post</span>&gt;\\\n\\\n\\\n\\\n&lt;<span style=\\\"color: #e06c75;\\\">twitter-post</span> <span style=\\\"color: #d19a66;\\\">tweet-id</span>=<span style=\\\"color: #98c379;\\\">&quot;1904391137307099409&quot;</span>&gt;&lt;/<span style=\\\"color: #e06c75;\\\">twitter-post</span>&gt;\\\n\\\n\\\n\\\n<span style=\\\"color: #e06c75;\\\">### Video&amp;Pic</span>\\\n\\\n\\\n\\\n&lt;<span style=\\\"color: #e06c75;\\\">twitter-post</span> <span style=\\\"color: #d19a66;\\\">tweet-id</span>=<span style=\\\"color: #98c379;\\\">&quot;1907091215243428044&quot;</span>&gt;&lt;/<span style=\\\"color: #e06c75;\\\">twitter-post</span>&gt;\\\n\\\n\\\n\\\n<span style=\\\"color: #e06c75;\\\">### NSFW</span>\\\n\\\n\\\n\\\n&lt;<span style=\\\"color: #e06c75;\\\">twitter-post</span> <span style=\\\"color: #d19a66;\\\">tweet-id</span>=<span style=\\\"color: #98c379;\\\">&quot;1899769294633967961&quot;</span>&gt;&lt;/<span style=\\\"color: #e06c75;\\\">twitter-post</span>&gt;\\\n\\\n</div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoienFBTVRlR2RwTVYifQ==;\\\"><span style=\\\"font-size: 18px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">部署项目</span></span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">执行</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">npm run build</span></span></code></span> 生成网站待部署的静态文件到<span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">public</span></span></code></span>目录下</p><img src=\\\":/92bfc762e39146aa963a70eeddc12416\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">hexo-build</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">我们选择 </span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">Cloudflare Pages</span></b></span> 来一键部署，登录 Cloudflare 后台</span></p><img src=\\\":/8331171161f84757bd73609e0ef613be\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">pages-entrance</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">选择最上方的</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Pages</span></span></code></span> 选项，选择最下面的直接上传文件部署</p><img src=\\\":/3e24750a3f84485bbe6b09f9d1d0515b\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">pages-upload</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">设置一个项目名称然后将刚刚打包好的</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">public</span></span></code></span>文件夹上传后点击部署等待几分钟就可</p><img src=\\\":/e86ddcdeb6ed425aa3e5d796052dea79\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">pages-deploy</span></span></span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiUk56bVFpbS1yREMifQ==;\\\"><span style=\\\"font-size: 18px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">设置并开启 Zaraz</span></span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">使用Cloudflare提供的默认域名是无法开启 Zaraz 的，需要我们绑定自己托管在Cloudflare 上的域名，进入到部署好的 Pages 项目，选择</span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Custom domains</span></span></code></span></p><img src=\\\":/afa10b9c841a47e68a65688ea2cb1fe1\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">custom-domain-settings</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">给这个项目分配一个子域名，等待 DNS 生效，</span><span style=\\\"color: rgb(0, 0, 0);\\\"><b><span style=\\\"font-weight: bold;\\\">注意！</span></b></span> 不要在DNS里手动设置，一定要在项目的 Custom domain中设置</span></p><img src=\\\":/59fab147008942aba1163738c2d02bea\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">subdomain</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">接下来我们设置 Zaraz Embed，对Zaraz 完全不了解的小伙伴可以参考 [[Cloudflare从入门到精通 11. Zaraz 第三方脚本管理助手]] 。进入到设置页面后，选择 </span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Embeds</span></span></code></span>中的 <span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">Twitter Pixel</span></span></code></span>, 一直点 next 就行，注意不要设置错域名</p><img src=\\\":/774bce3e44de48fab79c09547d3d4503\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-twitter</span></span></span></div><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">回到zaraz设置入口处，看到这个工具打开以后，说明就大功告成了</span></span></p><img src=\\\":/c14b6ebed8334f1f9fbdf7c2444f6ef0\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">embed-ok</span></span></span></div><h3 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoieDVualRtcnN2MWwifQ==;\\\"><span style=\\\"font-size: 18px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">查看效果</span></span></span></h3><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">访问网站，效果拔群，very good！</span></span></p><img src=\\\":/4d22dffb43a84b5fa1064d9cb21f5849\\\" type=\\\"image/jpeg\\\" data-filename=\\\"640.jpg\\\" style=\\\"--en-marks:%7B%22align%22%3A%22center%22%7D;--en-uploadstate:uploaded;\\\"/><div style=\\\"text-align:center;color:rgb(136, 136, 136);\\\"><span style=\\\"font-size: 14px;\\\"><span style=\\\"font-family: Optima, PingFangSC-light, serif;\\\"><span style=\\\"color: rgb(136, 136, 136);\\\">zaraz-embed-hexo</span></span></span></div><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoiYTNqSlJPX28yZkQifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">❗ 注意事项</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">Zaraz embed 对展示的推文内容是有限制，可以访问(https://hexo-test.debill.cc 查看)</span></span></p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">只能展示文字类型推文</span></span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">无法展示图片和视频内容</span></span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">对色情和暴力的内容不予以展示</span></span></div></li></ul><h2 style=\\\"background-color:unset;other-props:eyJibG9ja0lkIjoieEZnX1EtNkhMd1UifQ==;\\\"><span style=\\\"font-size: 20px;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\"><span style=\\\"font-weight: bold;\\\">📝 总结</span></span></span></h2><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">使用 Zaraz embed 非常简单，只需要网站的 html 中包含 </span></span><span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">&lt;twitter-post tweet-id=&quot;twitter id&quot;&gt;</span></span></code></span> 标签然后在后台在 Cloudflare 后台进行简单的设置就可以实现，无论使用 React、Vue 等任何框架开发网站，只要让最后生成的html 包含<span style=\\\"font-size: 14px;\\\"><code style=\\\"-en-code: true\\\"><span style=\\\"font-family: 'Operator Mono', Consolas, Monaco, Menlo, monospace;\\\"><span style=\\\"color: rgb(244, 138, 0);\\\">&lt;twitter-post tweet-id=&quot;twitter id&quot;&gt;</span></span></code></span>就可以很快集成该组件，不用自己重复造轮子，配合代码逻辑甚至可以实现：</p><ul><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">动态展示/关闭推文展示</span></span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">推特轮播图</span></span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">定制化组件</span></span></div></li><li><div style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20, 20, 20);\\\">....</span></span></div></li></ul><p style=\\\"color:rgb(20, 20, 20);\\\"><span style=\\\"font-size: 16px;\\\"><span style=\\\"color: rgb(20,20,20);\\\">感兴趣的朋友可以自己尝试一下</span></span></p><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div style=\\\"color:rgba(0, 0, 0, 0.3);\\\"><span style=\\\"color: rgba(0,0,0,.3);\\\">个人观点，仅供参考</span></div></span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":200811}]"
metadata_diff: {"new":{"id":"dbe4c5b05b2d4ec9b1d859c0576b5735","parent_id":"f67288c3a0be4374b5d532b5dcc3aabc","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764348817728,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T21:03:22.025Z
created_time: 2025-11-28T21:03:22.025Z
type_: 13