使用Hugo生成静态站部署Cloudflare Pages的安全配置咨询

针对你提到的Mozilla Observatory检测未通过的三项安全配置，结合Cloudflare Pages的特性，以下是具体的修复和防护方案：

1. 补全X-Frame-Options与X-XSS-Protection标头 #

这两个标头配置简单，可通过两种方式实现：

方式一：Cloudflare控制台配置 #

• 登录Cloudflare后台，进入你的站点管理页面
• 导航到「规则」>「HTTP标头」，点击「创建标头」选择「添加自定义响应标头」
  • X-Frame-Options：
    • 标头名称：X-Frame-Options
    • 标头值：DENY（完全禁止页面被嵌入iframe；若需允许同域名嵌入，可设为SAMEORIGIN）
    • 应用范围：所有请求
  • X-XSS-Protection：
    • 标头名称：X-XSS-Protection
    • 标头值：1; mode=block（启用XSS防护并拦截攻击页面）
    • 应用范围：所有请求

方式二：Hugo静态文件配置（推荐版本控制） #

在Hugo项目的static目录下创建_headers文件，内容如下：

/*
  X-Frame-Options: DENY
  X-XSS-Protection: 1; mode=block

部署到Cloudflare Pages时，该文件会自动被识别并应用标头规则。

2. 配置Content Security Policy (CSP) #

CSP是核心难点，需根据你的Hugo站点资源情况定制规则，避免误拦截合法内容：

步骤1：先从宽松规则测试 #

先使用兼容Hugo默认生成内容的宽松规则，确保站点正常运行：

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self';

'unsafe-inline'是为了兼容Hugo主题中常见的内嵌脚本/样式，后续可逐步收紧。

步骤2：逐步收紧规则 #

• 移除'unsafe-inline'，改用Nonce或哈希值授权合法内嵌内容：
  • Nonce方式：在Hugo模板中生成随机nonce值，例如在<script>标签添加nonce="{{ .Site.Data.nonce }}"，同时CSP的script-src改为'self' 'nonce-{{ .Site.Data.nonce }}'
  • 哈希方式：用浏览器DevTools计算内嵌脚本/样式的SHA-256哈希，将哈希值加入CSP，例如script-src 'self' 'sha256-xxxxxxxxx'
• 若使用Cloudflare的附加服务（如Analytics、Turnstile），需将对应的域名加入CSP规则，例如script-src 'self' https://static.cloudflareinsights.com

步骤3：应用CSP规则 #

同样支持两种配置方式：

• Cloudflare控制台：添加自定义响应标头Content-Security-Policy，填入最终规则
• Hugo_headers文件：在/*规则下添加CSP条目

3. 额外Cloudflare安全增强 #

利用Cloudflare的边缘能力，进一步提升站点安全性：

• 开启「安全」>「WAF」的默认规则集，拦截SQL注入、XSS等常见攻击
• 配置「安全」>「SSL/TLS」：启用「始终使用HTTPS」，并添加Strict-Transport-Security标头（值为max-age=31536000; includeSubDomains）强制HTTPS访问
• 开启「安全」>「Bot Management」基础防护，拦截恶意爬虫与自动化攻击

内容的提问来源于stack exchange，提问作者Tom