使用Cloudflare Workers修复内容安全策略

本文详细介绍了如何利用Cloudflare Workers为网站添加和优化内容安全策略（CSP），包括初始测试、Worker构建、策略细化及Cloudflare SSL/TLS配置，提升网站安全评分并防范常见Web漏洞。

使用Cloudflare Workers修复内容安全策略

背景

四年前，我曾写过一篇关于通过更新Web服务器配置来修复缺失内容安全策略（Content-Security-Policy）的博客文章。内容安全策略用于指示用户的Web浏览器在特定安全考虑上应如何行为。

时代已经改变。在Black Hills Information Security（BHIS），我们迁移了Web服务器、托管公司和安全平台等。内容安全策略的“最佳实践”在过去四年中也发生了变化。在新的托管平台上，我们需要再次设置适当的内容安全头。由于我们现在使用Cloudflare作为CDN和WAF提供商，我们有了在Web服务器之外前置内容安全策略的新机会。

初始测试

在更新内容安全策略之前，最好清楚了解服务器当前如何处理/发送内容安全策略。测试此配置的一个好方法是使用第三方工具。我们可以使用SecurityHeaders.io扫描网站的内容安全策略配置。

链接：https://www.securityheaders.io

以下示例中，我们让SecurityHeaders.io扫描了WildWestHackinFest.com网站。

结果看起来不好，对吗？嗯，也许。重要的是要注意，内容安全策略用于指示浏览器如何处理浏览器内的安全问题。这在有用户交互和敏感信息披露的网站上至关重要。例如，银行网站、健康记录门户或其他用户交互服务必须具有适当的内容安全策略头。在没有用户交互或没有敏感信息披露的情况下，配置非常安全的内容安全策略就不那么紧迫了。

这是一个“不太好”的配置场景的好例子：美国社会保障管理局有一个门户网站，用户可以在其中登录并访问其帐户的敏感信息。门户登录登录页面是https://secure.ssa.gov：

好吧，这是一个不该做什么的例子。

如果你想纠正其中一些问题，你有几种方法。第一种是阅读四年前的博客文章，演示如何通过配置Web服务器与适当的内容安全头来修复问题。但还有另一种方法。

Cloudflare Workers

链接：https://workers.cloudflare.com/

Cloudflare Workers是服务器端JavaScript的无服务器部分，可以执行操作或修改与Cloudflare CDN/WAF保护站点相关的Web流量。在我们之前的示例中，https://wildwesthackinfest.com是一个由Cloudflare网络服务的网站。这使我们能够使用Cloudflare Workers服务来操纵Web流量，而无需更新与网站相关的后端（“源”）Web服务器。BHIS运营多个网站，使用Cloudflare Workers还将使我们能够将响应头操纵集中到一个编程位置，而不是管理多个后端服务器配置。

先决条件

要允许Cloudflare Worker操纵Web服务器的流量，必须确保Web服务在Cloudflare上具有“橙色云”配置。

还必须启用Workers服务。登录Cloudflare并选择你的域名后，点击“Workers”选项卡以启动服务。

构建Worker

启用Cloudflare Workers后，在Workers选项卡上，点击“Manage Workers”，然后“Create Service”。给你的新Worker一个名称，并选择“HTTP Handler”作为起始模板。然后，找到“Quick Edit”按钮以访问Cloudflare Worker编辑器/IDE。

接下来，用以下Worker代码替换现有模板代码。

链接：https://github.com/Relkci/cf-worker-header-injector/blob/main/worker.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {

  let originalResponse = await fetch(request)

  // 传入原始响应以便我们可以修改其中的一些部分。
  let response = new Response(originalResponse.body,originalResponse);

  response.headers.set('X-Frame-Options', 'SAMEORIGIN');
  response.headers.set('Referrer-Policy','same-origin');
  response.headers.set('Content-Security-Policy', 'default-src \'self\' \'unsafe-inline\'');
  response.headers.set('Feature-Policy','camera \'none\'; geolocation \'none\'');
  response.headers.set('X-Content-Type-Options','nosniff');
  response.headers.set('X-XSS-Protection','1; mode=block');
  response.headers.set('Permissions-Policy', 'camera=(), geolocation=(), microphone=()');
  return response
}

以上是内容安全策略的起始模板。你应该根据你的网站配置每个策略。你在此处添加的任何头都将随后添加到你的Web服务器的HTTP响应中。按下“Save and Deploy”。别担心，还没有任何内容生效。

在下一步中，我们将新的Cloudflare Worker与你的网站关联。完成后，你的Worker将开始拦截来自后端（源）Web服务器的HTTP响应，并注入Worker代码中指定的头。

应用Worker

保存Worker后，返回到与你的域名关联的Cloudflare Workers选项卡，并按下“Add Route”。Add Route功能将你的新Worker与Web服务器关联。完成后，后端（源）Web服务器的HTTP响应将被Worker拦截，Worker将根据其代码注入头。

Worker与你的网站路由后，你会发现Workers选项卡现在列出了活动路由。

内容安全策略细化

关联Worker后，请记住，如果你使用JavaScript、CSS或外部资源，限制性内容安全策略设置可能会破坏网站的渲染或功能。内容安全策略指示浏览器哪些资源可以安全加载。限制性策略可能会阻止必要资源的加载。在更新网站的内容安全策略时，你可能会看到与新内容安全策略相关的错误或渲染问题。识别内容安全策略违规的最简单方法是使用浏览器的开发者模式（通常按F12）。网络或控制台选项卡通常会提醒你需要注意的违规行为，这些需要在内容安全策略中加以考虑。

这是一个控制台错误的例子：

此错误让我们知道，在CSP的script-src设置中，stats.wp.com没有被明确信任。我们可以通过多种方式添加对此源的信任；一种方法是将https://stats.wp.com添加到script-src设置中。更新并重新部署Worker后，刷新，你应该看到资源被允许加载，因此没有在开发者控制台中显示错误。

Worker定价

关于添加Workers服务和创建Worker的最后一点说明——Cloudflare确实提供了Worker的免费层，以及两种不同的价格方案：Bundled和Unbound。

如果你担心这可能会花费多少，我们也是。我们使用了Unbound价格方案，因为它是默认的。我们可能可以安全地将模型更新为Bundled，因为我们的Worker执行时间少于50毫秒。Workers仪表板将显示执行时间，以便你可以做出自己的决定。

无论如何，使用Unbound价格模型，我们并没有太大风险。以下是我们一个较繁忙网站上一个月Bundled Worker活动的图片：

最终，5.38美元对我们来说对于超过100万次网站点击并不是一个坏成本。

值得注意的是，你可以（也许应该）将Worker路由限制为通常仅影响网站资源，这些资源将指示Web浏览器创建额外的子查询以获取资源。这些通常是HTML、PHP、ASP等。图像和视频通常不需要CSP，因为它们通常不指示浏览器创建额外的HTTP请求。例如，你可以省略仅包含图像的Web服务器目录。Worker路由可以堆叠。将路由设置为“None”的服务将阻止Worker的执行。

OWASP安全头项目

链接：https://owasp.org/www-project-secure-headers/

关于安全头类型及其适当使用的良好资源，请查看OWASP关于响应头的文档。

内容安全策略参考

链接：https://content-security-policy.com/

另一个良好的资源，可能更技术性一些，是内容安全策略资源。这是按浏览器分类的当前CSP机制和支持矩阵的最新编译。

Cloudflare HSTS设置

设置Worker并根据网站需求配置CSP后，Cloudflare中还有少量其他设置需要配置，以完全使你的网站与安全实践对齐（并在SecurityHeaders.io上获得更好的分数）。

但请注意，如果你的网站或子域名也未根据这些更改进行对齐，你可能会在设置一切时遇到麻烦。值得注意的是，一旦启用HTTP严格传输安全（HSTS），就没有简单的方法退出配置。在继续之前，请确保你的域的子域名和TLD网站已适当配置HTTPS。

在你的Cloudflare仪表板上，跳转到你的域名，然后进入SSL/TLS部分，再进入Edge Certificate的选项卡。你将找到两个应该配置的部分。

始终使用HTTPS

“始终使用HTTPS”将自动从Cloudflare的边缘将端口80重定向到HTTPS（443），无论你的源服务器是否支持端口80或从端口80提供其他内容。

HTTP严格传输安全（HSTS）

启用HSTS并根据你的需求配置设置。最佳实践是将max-age头设置为至少6个月，但此设置带有一些风险。一旦启用，你必须始终支持网站上的HTTPS，否则用户可能无法访问你的网站。

最小TLS版本

除非你的用户可能使用不受支持或过时的Web浏览器或客户端，否则通常可以安全地启用最小TLS版本1.2。

版本1.1、1.0以及SSL版本2和版本3被大多数安全分析师认为是不安全的，尽管威胁概率较低。

启用TLS 1.3

这是今年的新潮流。启用此选项以在Cloudflare边缘为你的Web服务器支持TLS 1.3。

更改后测试

部署Cloudflare Worker并更新Cloudflare Edge SSL/TLS选项后，是时候检查你是否对“安全头”分数产生了任何影响。让我们再次使用SecurityHeaders.io查看是否有改进。

更多工作——CSP细化

我们被限制在“A”，因为我们托管的网站在内容安全策略中包含了“unsafe-inline”选项。最终，你想要摆脱这些，但它可以用作权宜之计，使你的网站在继续构建更限制性CSP时正常运行。重要的是要注意，最终，网站上使用的每个资源源都应明确列在CSP中。“不安全”源包含是……“不安全”的。

辅助配置——CSP即服务

有一些新产品可以帮助你根据现有网站使用的资源确定基线内容安全策略。有一个新的CSP方法“report-uri”，它指示Web浏览器将CSP违规报告给Web服务，然后通知Web管理员问题。这类似于DMARC报告的工作方式，允许域所有者接收可能欺诈性电子邮件的报告，但在这种情况下，警报是关于CSP违规的。

存在一些内容安全策略报告服务即服务产品。它们被配置为用户浏览器CSP违规报告的接收者。它们聚合报告，然后为你提供适当的更新基线内容安全策略。

坦率地说，这是你可以自己完成的事情，无需使用产品。加载你的网页并检查开发者工具控制台以获取CSP违规。无论如何，第三方服务可以在自动化一些单调任务方面大有帮助，特别是对于非常大或复杂的网站，手动确认整个网站的渲染和功能正常是不可能的。

内容安全策略即服务提供商：

非赞助商。里程和成本可能有所不同。

https://csper.io/ https://go.talasecurity.io/content-security-policy https://github.com/kravietz/cspbuilder

资源：

Cloudflare Workers：https://workers.cloudflare.com/ 模板Worker：https://github.com/Relkci/cf-worker-header-injector/blob/main/worker.js SecurityHeaders.io：https://www.securityheaders.io 内容安全策略参考：https://content-security-policy.com/ OWASP安全头项目：https://owasp.org/www-project-secure-headers/ 修复Web服务器上缺失的安全头：https://www.blackhillsinfosec.com/fix-missing-content-security-policy-website/

comments powered by Disqus
© 2020 - 2025 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次