Featured image of post 为 Hugo 博客设计现代内容安全策略Featured image of post 为 Hugo 博客设计现代内容安全策略
Security

为 Hugo 博客设计现代内容安全策略

构建合规、安全的 HTTP 标头，平衡分析、广告标签和资产安全。

  1. 首页
  2. Webs
  3. 为 Hugo 博客设计现代内容安全策略

为什么 CSP 对于静态站点很重要

使用 Hugo 构建的静态站点本质上比动态应用程序更安全，但它们仍然执行用于分析、广告和嵌入的第三方脚本。 内容安全策略 (CSP) 通过控制可以加载的资源来保护您的访问者免受 XSS、数据注入和恶意脚本执行的侵害。

通过 Cloudflare Pages 设置 CSP

Cloudflare Pages 支持自定义 _headers 文件来控制 HTTP 响应标头：

# static/_headers
/*
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'

对于 Hugo，将 _headers 文件放在 static/ 目录中，以便将其复制到输出：

static/
├── _headers
├── css/
└── js/

为 Hugo 构建现实的 CSP

使用 Google AdSense、Google Analytics 和嵌入式 YouTube 视频的博客需要更宽松的政策。这是一个生产就绪的 CSP：

# static/_headers
/*
  Content-Security-Policy:
    default-src 'self';
    script-src 'self'
      'strict-dynamic'
      'sha256-...'   (inline script hash)
      https://www.googletagmanager.com
      https://pagead2.googlesyndication.com
      https://www.youtube.com;
    style-src 'self'
      'sha256-...'   (inline style hash)
      https://fonts.googleapis.com;
    img-src 'self'
      https://*.googleapis.com
      https://*.googlesyndication.com
      https://www.google.com
      https://*.doubleclick.net
      https://*.youtube.com
      data:;
    font-src 'self'
      https://fonts.gstatic.com;
    frame-src 'self'
      https://www.youtube.com
      https://www.google.com;
    connect-src 'self'
      https://*.google-analytics.com;
    report-uri /csp-report;

使用随机数与哈希值

对于内联脚本（在 Hugo 主题中常见），您有两种选择：

随机数（每个请求唯一）：

<script nonce="ABC123">console.log("safe")</script>

客户服务提供商：script-src 'nonce-ABC123'

随机数最适合动态站点，但需要服务器端生成，这对于完全静态的 Hugo 站点来说很困难。

哈希（基于内容）：

<script>console.log("safe")</script>

客户服务提供商：script-src 'sha256-...'

哈希对于静态站点来说是理想的选择，因为它们在部署过程中保持不变。计算内联脚本的哈希值并将其添加到策略中：

echo -n 'console.log("safe")' | openssl dgst -sha256 -binary | base64

理解严格动态

'strict-dynamic' 指令是一项强大的 CSP 功能。它告诉浏览器信任由已信任脚本加载的脚本，从而减少枚举所有 CDN URL 的需要：

script-src 'self' 'strict-dynamic' 'sha256-ABC...';

使用 strict-dynamic ，如果您的主包（通过哈希受信任）加载 CDN 脚本，则该 CDN 脚本会自动受信任。这显着简化了具有许多第三方脚本的站点的 CSP 管理。

Google AdSense 的 CSP

AdSense 需要特定的 CSP 津贴。主要指令：

指令所需来源
脚本-srchttps://pagead2.googlesyndication.com、'unsafe-inline'（或散列）
img-srchttps://*.googlesyndication.com、https://*.doubleclick.net
框架-src占位符_0

考虑仅将 'unsafe-inline' 作为最后的手段 - 哈希值更好。

云服务提供商报告

配置 report-uri 或 report-to 指令以接收违规报告：

Content-Security-Policy: ...; report-uri /csp-report;

您可以使用 report-uri.com 或 Cloudflare CSP Analytics 等服务来收集和可视化报告。这有助于识别被阻止的资源而不破坏功能。

测试您的 CSP

在部署之前，使用 Content-Security-Policy-Report-Only 进行限制性策略测试：

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report;

该标头除了发送违规报告外什么也不强制执行，让您安全地识别问题。

结论

配置良好的 CSP 可保护 Hugo 博客访问者免受 XSS 和脚本注入的侵害，同时允许合法的第三方服务运行。通过仅报告模式结合 strict-dynamic、脚本哈希和增量部署，您可以构建强大的安全态势，平衡保护与功能。

©2022 - 2026 Commentary of Takao