更新于 2026年6月14日7 分钟阅读
Cloudflare Pages 与 React 站点的安全响应头
如何通过安全响应头、规范化元数据和响应验证，降低静态 React 部署中的常见浏览器端风险。
要点
- 安全响应头应被视为部署配置，而不只是代码注释。
- Cloudflare Pages 支持可在发布前测试的静态 header 规则。
- 除非有明确的跨源使用场景，通配 CORS 对公共静态响应通常过于宽泛。
基线响应头集合
加固后的 React 站点应明确设置浏览器行为。具体策略取决于应用，但基线通常包括内容类型保护、点击劫持防护、referrer 控制、permissions policy，以及谨慎选择的 content security policy。
静态托管很容易让人忽略这一点，因为即使没有这些响应头，应用仍然会渲染。安全工作必须在 HTTP 响应层进行验证。
Cloudflare Pages 注意事项
- 尽可能将 header 规则放在仓库附近，使变更可以随代码一起审查。
- 避免只有 dashboard 中存在、没有文档的更改，因为未来维护者更难审计。
- 如果同时服务 www 和 apex 域名，需要验证两者。
- 检查重定向不会从最终响应中移除重要响应头。
CORS 应该有明确意图
Access-Control-Allow-Origin: * 经常被无理由复制到站点中。对于普通网页，宽泛 CORS 通常不会帮助访客；如果未来在同一策略下增加端点，还可能让意外数据暴露更容易发生。
应该自动化什么
- 拒绝静态 header 配置中 wildcard CORS 的测试。
- 发布 sitemap 和 robots 文件的 build 步骤。
- 确认关键页面可渲染且 metadata 存在的 preview 检查。
- 部署后面向生产域名的 live-response 检查。