使用 Cloudflare Workers 在由 Cloudflare 提供支持的网站上实施安全 HTTP 标头的分步指南。
有许多方法可以实现 HTTP 响应标头以保护站点免受常见漏洞的侵害,例如 XSS、点击劫持、MIMI 嗅探、跨站点注入等等。 它被广泛采用并被推荐 OWASP.
之前,我写过关于在 Apache、Nginx 和 IIS 等 Web 服务器中实现标头的文章。 但是,如果您使用 Cloudflare 来保护和增强您的网站,您可以利用 Cloudflare 工人 操作 HTTP 响应标头。
Cloudflare Workers 是一个无服务器平台,您可以在其中运行 JavaScript、C、C++、Rust 代码。 它部署在全球 200 多个 Cloudflare 数据中心。
实现非常简单和灵活。 它使您可以灵活地在整个站点上应用标头,包括子域或带有 匹配模式n 使用正则表达式。
对于这个演示,我将使用 代码 斯科特·赫尔姆。
让我们开始吧……👨💻
- 登录 Cloudflare 并单击 Workers (直接链接)
- 复制 worker.js 代码 GitHub 并粘贴到脚本编辑器
const securityHeaders = { "Content-Security-Policy": "upgrade-insecure-requests", "Strict-Transport-Security": "max-age=1000", "X-Xss-Protection": "1; mode=block", "X-Frame-Options": "DENY", "X-Content-Type-Options": "nosniff", "Referrer-Policy": "strict-origin-when-cross-origin" }, sanitiseHeaders = { Server: "" }, removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version" ]; async function addHeaders(req) { const response = await fetch(req), newHeaders = new Headers(response.headers), setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders); if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) { return new Response(response.body, { status: response.status, statusText: response.statusText, headers: newHeaders }); } Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name])); removeHeaders.forEach(name => newHeaders.delete(name)); return new Response(response.body, { status: response.status, statusText: response.statusText, headers: newHeaders }); } addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));
还不保存; 您可能需要调整以下标头以满足要求。
Content-Security-Policy – 如果您需要应用您的应用程序策略,您可以在这里进行。
例如——如果您需要通过 iFrame 在多个 URL 上获取内容,那么您可以如下利用 frame-ancestors。
"Content-Security-Policy" : "frame-ancestors 'self' gf.dev techblik.com.com",
以上将允许从 gf.dev、techblik.com.com 和 self 站点加载内容。
X-Frame-Options – 如果您打算使用 iframe 在同一网站的某些页面上显示您网站的内容,您可以更改为 SAMEORIGIN。
"X-Frame-Options": "SAMEORIGIN",
服务器——您可以在此处清理服务器标头。 随便放什么。
"Server" : "techblik.com Server",
RemoveHeaders – 您是否需要删除一些标头以隐藏版本以缓解信息泄漏漏洞?
你可以在这里做。
let removeHeaders = [ "Public-Key-Pins", "X-Powered-By", "X-AspNet-Version", ]
添加新的标头——如果您需要将一些自定义标头传递给您的应用程序,您可以在 securityHeaders 部分下添加它们,如下所示。
let securityHeaders = { "Content-Security-Policy" : "frame-ancestors 'self' gf.dev techblik.com.com", "Strict-Transport-Security" : "max-age=1000", "X-Xss-Protection" : "1; mode=block", "X-Frame-Options" : "SAMEORIGIN", "X-Content-Type-Options" : "nosniff", "Referrer-Policy" : "strict-origin-when-cross-origin", "Custom-Header" : "Success", }
调整完所需的所有标头后,为工作人员命名,然后单击“保存并部署”。
伟大的! 工作人员已准备就绪,接下来,我们需要将其添加到您要应用标头的站点。 我会将其应用到我的实验室站点。
- 转到 Cloudflare 主页/仪表板并选择站点。
- 导航到“工作人员”选项卡 >> 添加路线。
- 在路由中输入网址; 您可以在此处应用正则表达式。
- 选择新创建的工人并保存
就这样; 一秒钟之内,您会注意到所有标头都已实现到该站点。
这是 Chrome Dev Tools 的样子。 您还可以通过 HTTP 标头工具测试标头。
我不知道为什么服务器标头没有反映出来。 我想 Cloudflare 正在覆盖它。
你看,整个实施大约需要 15 分钟,并且不需要像 Apache 或 Nginx 那样停机或重启。 如果你打算把这个应用到生产站点,我建议先在较低的环境下测试,或者借助路由,你可以在测试页面上应用来验证结果。 一旦满意,推到你想要的任何地方。
这太棒了!
谢谢 斯科特 对于代码。