ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Cloudflare Snippets 实战模式指南:用边缘 JavaScript 实现安全头、地理路由与 A/B 测试

Cloudflare Snippets 实战模式指南:用边缘 JavaScript 实现安全头、地理路由与 A/B 测试 Cloudflare Snippets 实战模式指南用边缘 JavaScript 实现安全头、地理路由与 A/B 测试【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skillsCloudflare Snippets 是运行在 Cloudflare 边缘网络、随 Ruleset Engine 触发的轻量级 JavaScript 片段适合在请求/响应路径上执行秒级修改且对 Pro/Business/Enterprise 付费套餐不额外收费。本文以仓库中的 Snippets 模式参考 为主体完整讲解安全响应头、地理路由、A/B 测试、机器人检测、API 鉴权注入、CORS 与维护模式七类可落地模式并结合 API 参考、配置指南 与 踩坑清单 补充实现细节。读完本文你将能针对具体场景选择正确模式、写出可在 5ms CPU 预算内运行的 Snippet 代码并理解其与 Workers 的边界。Snippets 模式的基础结构与执行模型所有 Snippet 都遵循统一的模块导出结构详见 API 参考export default { async fetch(request) { // 你的逻辑在这里 const response await fetch(request); return response; // 或返回修改后的 response } }Snippets 不支持import、不支持addEventListener必须使用上述export default模式。执行模型如下请求到达 Cloudflare 边缘节点Ruleset Engine 评估 Snippet 规则过滤表达式判断是否命中命中则执行 Snippet 代码整个过程受5ms CPU 时间上限约束修改后的请求/响应继续沿管线流转响应返回给客户端。由于 Snippets 是同步运行在请求路径上的性能是硬指标。从仓库的 Snippets 参考 README 可以确认以下关键限制资源限制单次执行 CPU 时间5ms单个 Snippet 大小32KB子请求数fetch 调用Pro 2 次 / Business、Enterprise 5 次运行时V8 isolateWorkers API 子集费用包含在 Pro/Business/Enterprise 套餐内判断准则Snippets 用于修改Workers 用于应用。简单请求/响应修改用 Snippets复杂业务逻辑、状态存储KV/D1/R2、WebSocket、HTMLRewriter、npm 依赖则必须上 Workers。模式一Security Headers安全响应头这是适用面最广的模式文档标注 Rule 为true即命中所有请求用于为全站统一补充安全响应头并移除可能泄露技术栈的响应头export default { async fetch(request) { const response await fetch(request); const newResponse new Response(response.body, response); newResponse.headers.set(X-Frame-Options, DENY); newResponse.headers.set(X-Content-Type-Options, nosniff); newResponse.headers.delete(X-Powered-By); return newResponse; } }要点拆解new Response(response.body, response)这是透传的标准写法——把原响应体作为流直接交给新 Response同时把原响应的status、statusText、headers等属性整体继承第二参数传入原 response 对象避免重复设置状态码X-Frame-Options: DENY禁止页面被任何站点以 iframe 嵌入防点击劫持X-Content-Type-Options: nosniff禁止浏览器 MIME 嗅探降低类型混淆攻击面headers.delete(X-Powered-By)移除后端框架指纹如Express等减少被针对性扫描的概率。从 API 参考 看响应头操作还支持append如追加Set-Cookie、set与delete并且头部读/写操作开销极低Header set 约 0.1ms见 踩坑清单完全在 5ms 预算之内。配合规则表达式也可只对特定路径生效例如starts_with(http.request.uri.path, /login) or starts_with(http.request.uri.path, /checkout)模式二Geo-Based Routing基于地理位置的请求路由利用request.cf.country读取请求来源国家将特定国家/地区的流量重定向到地区域名export default { async fetch(request) { const country request.cf.country; if ([GB, DE, FR].includes(country)) { const url new URL(request.url); url.hostname url.hostname.replace(.com, .eu); return Response.redirect(url.toString(), 302); } return fetch(request); } }要点拆解request.cf.countryCloudflare 注入的请求元数据取值为 ISO 3166-1 国家代码如US、DE。除country外API 参考 还列出city、continent、region、postalCode、latitude、longitude、timezone、colo数据中心机场代码、asn、asOrganization等属性可用于更精细的调度决策new URL(request.url)URL 操作支持hostname、pathname、search、searchParams.get/set/delete等见 URL Operations。这里通过替换 hostname 实现.com→.eu的域名切换Response.redirect(url, 302)临时重定向。也可改用 301 表示永久迁移见 Response Constructors。一个典型的实战变体是欧盟流量走本地合规节点、其余流量走主站。由于该逻辑完全依赖request.cf元数据不发起任何子请求执行时间可忽略不计。模式三A/B TestingA/B 实验分流通过 Cookie 保持实验分组一致性让同一用户始终看到同一变体首次访问时随机分配并回写 Cookieexport default { async fetch(request) { const cookies request.headers.get(Cookie) || ; let variant cookies.match(/ab_test([AB])/)?.[1] || (Math.random() 0.5 ? A : B); const req new Request(request); req.headers.set(X-Variant, variant); const response await fetch(req); if (!cookies.includes(ab_test)) { const newResponse new Response(response.body, response); newResponse.headers.append(Set-Cookie, ab_test${variant}; Path/; Secure); return newResponse; } return response; } }要点拆解分组读取request.headers.get(Cookie)拿到原始 Cookie 串用正则ab_test([AB])提取已有变体未命中则用Math.random() 0.5五五开分配 A/B注入变体标识由于请求头在 Snippets 中不可直接修改不可变对象必须new Request(request)克隆后headers.set(X-Variant, variant)把分组信息透传给源站源站据此渲染不同页面Cookie 回写仅当用户还没有ab_testCookie 时用newResponse.headers.append(Set-Cookie, ...)追加 Set-Cookie注意用append而非set避免覆盖源站已有的 Set-Cookie 头。Secure标志保证 Cookie 仅经 HTTPS 传输如需跨站点子域共享可加上Domain.example.com幂等性第二次访问起 Cookie 已存在直接原样返回响应不再重复写 Cookie。这一模式展示了 Snippets 中克隆-修改-透传的标准三段式也是验证 错误处理 中Cannot set property on immutable object教训的最佳反例对照——任何对原始request/response头部的直接修改都会抛错。模式四Bot Detection机器人流量拦截基于 Cloudflare Bot Management 提供的评分直接拒绝低质量机器人请求export default { async fetch(request) { const botScore request.cf.botManagement?.score; if (botScore botScore 30) return new Response(Denied, { status: 403 }); return fetch(request); } }前置要求必须开通 Bot Management 套餐原文档明确标注。相关元数据说明见 API 参考request.cf.botManagement.score199 的整数评分1 代表机器人、99 代表人类request.cf.botManagement.verified_bot是否为经 Cloudflare 验证的合法机器人如搜索引擎爬虫request.cf.botManagement.static_resource是否为静态资源请求。实现要点用可选链?.避免在未开启 Bot Management 时访问 undefined 报错阈值 30是可调参数可按业务容忍度放宽如 10或收紧命中时直接返回403 Denied不发起子请求零额外开销。在规则表达式层面Bot Management 评分同样可作为触发条件见 配置指南cf.bot_management.score lt 30如果你没有 Bot Management 套餐可以从 bot-management 参考 了解该产品的开通方式或改用 WAF 托管规则集、Turnstile 等替代方案。模式五API Auth Header InjectionAPI 鉴权头注入对/api/前缀的内部请求注入服务端信任的鉴权头同时剥离外部传入的Authorization避免凭据被上游转发泄露export default { async fetch(request) { if (new URL(request.url).pathname.startsWith(/api/)) { const req new Request(request); req.headers.set(X-Internal-Auth, secret_token); req.headers.delete(Authorization); return fetch(req); } return fetch(request); } }要点拆解路径判断new URL(request.url).pathname.startsWith(/api/)精确圈定内部 API 命名空间避免影响前端静态资源头注入与剥离克隆请求后set(X-Internal-Auth, ...)注入内部信任令牌同时delete(Authorization)防止客户端伪造的Authorization头直达源站造成鉴权绕过实践建议示例中的secret_token为占位符生产环境应通过 Cloudflare 的 Secrets Store 或环境变量管理密钥切勿硬编码进代码库同时建议配合not http.headers[user-agent] contains bot之类的规则表达式缩小注入范围。该模式与 配置指南 中starts_with(http.request.uri.path, /api/)的路径表达式互为表里——你既可以在代码里判断路径也可以让规则表达式只把 Snippet 挂到/api/*上二选一即可避免重复判定。模式六CORS Headers跨域响应头先处理浏览器预检OPTIONS再为所有实际响应附加跨域许可头export default { async fetch(request) { if (request.method OPTIONS) { return new Response(null, { status: 204, headers: { Access-Control-Allow-Origin: *, Access-Control-Allow-Methods: GET, POST, PUT, DELETE, Access-Control-Allow-Headers: Content-Type, Authorization } }); } const response await fetch(request); const newResponse new Response(response.body, response); newResponse.headers.set(Access-Control-Allow-Origin, *); return newResponse; } }要点拆解预检短路request.method OPTIONS时直接返回204 No Content并携带允许的源、方法与请求头无需回源降低预检延迟实际响应非 OPTIONS 请求仍走克隆-透传-补头流程在响应上追加Access-Control-Allow-Origin安全提示*表示允许任意来源适合公开 API如果涉及 Cookie 或需要限制调用方应改为显式白名单源如https://app.example.com并配合Access-Control-Allow-Credentials: true。规则层面也可仅在 API 路径启用见 配置指南 中http.host eq example.com and starts_with(http.request.uri.path, /api/)的组合表达式写法。模式七Maintenance Mode维护模式开关在部署窗口用 503 响应暂时替换全站同时保留带内部令牌请求的放行通道export default { async fetch(request) { if (request.headers.get(X-Bypass-Token) admin) return fetch(request); return new Response(h1Maintenance/h1, { status: 503, headers: { Content-Type: text/html, Retry-After: 3600 } }); } }要点拆解旁路通道携带X-Bypass-Token: admin的请求如运维自检、监控探活直接回源保证维护期间内部可用性。生产环境应改用强随机令牌并仅在内部网络/跳板机使用503 Retry-AfterRetry-After: 3600告知客户端含搜索引擎爬虫1 小时后再来避免重试风暴与 SEO 误判部署编排价值该模式对应 SKILL.md 中部署流程的灰度思想——先开启维护模式完成部署后关闭规则即可原子切换无需改动代码。模式选择指南与落地建议原文档提供的选择矩阵完整收录如下Pattern复杂度适用场景Security Headers低所有站点Geo-Routing低地区化内容A/B Testing中实验分流Bot Detection中需要 Bot Management 套餐API Auth低后端保护CORS低API 端点Maintenance低部署窗口选型建议开箱即用型低复杂度Security Headers、Geo-Routing、API Auth、CORS、Maintenance 均可直接套用模板逻辑简单、不发起额外子请求处于 5ms 预算内非常安全实验型中复杂度A/B Testing 涉及 Cookie 解析、请求克隆与响应头追加务必对照 踩坑清单 的不可变对象与仅调用一次fetch(request)规则检查依赖外部能力Bot Detection 依赖付费套餐若未开通应改为规则表达式中的cf.bot_management.score或选用 WAF / Turnstile 方案。部署层面Snippets 支持 DashboardRules → Snippets、REST APIPUT /zones/{zone_id}/snippets/{snippet_name}、Terraform 与 Pulumi 四种方式规则表达式如http.host eq example.com、starts_with(http.request.uri.path, /api/)、ip.geoip.country eq US可精确控制触发范围完整示例见 配置指南。常见错误与性能红线在生产启用上述模式前请对照 踩坑清单 检查以下高频问题错误含义应对1000 Snippet execution failed运行时/语法错误用 try/catch 包裹并返回 500 错误详情1100 Exceeded execution limit超过 5ms CPU简化逻辑或迁移到 Workers1201 Multiple origin fetches对同一请求多次回源确保fetch(request)只调用一次复用响应对象1202 Subrequest limit exceeded子请求超限Pro 2 / Biz 5减少 fetch 调用次数Cannot set property on immutable object直接改原始对象先new Request(request)/new Response(response.body, response)克隆caches is not defined/Module not found用了不支持的 APICache API 与import均不可用改用 Workers性能上仓库给出常见操作耗时参考Header set 0.1ms、URL 解析 0.2ms、fetch() 1-3ms、SHA-256 0.5-1ms说明纯头部/URL 类模式一、二、五、六、七在 5ms 预算内游刃有余而含 fetch 的模式三、四也应保持子请求数在套餐限额内。迁移到 Workers 的信号需要超过 5ms 执行时间、超过 5 个子请求、需要 KV/D1/R2 存储、需要 npm 依赖、代码超过 32KB。此时可参考仓库中 Workers 参考 与 SKILL.md 中的产品决策树完成升级。结语本文以 patterns.md 为核心完整呈现了 Cloudflare Snippets 的七类实战模式并补充了 API 元数据、规则表达式、部署方式与限制红线。实践中建议按先低复杂度模式打底安全头 CORS、再按业务需求叠加路由与实验的顺序渐进落地同时牢记 5ms CPU 与子请求数两道红线——这就是 Snippets 与 Workers 分工的黄金边界。【免费下载链接】skillsSkills Catalog for Codex项目地址: https://gitcode.com/GitHub_Trending/skills4/skills创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表