如何使用 Cloudflare Worker 实施安全标头?

使用 Cloudflare Workers 在由 Cloudflare 提供支持的网站上实施安全 HTTP 标头的分步指南。

有许多方法可以实现 HTTP 响应标头以保护站点免受常见漏洞的侵害,例如 XSS、点击劫持、MIMI 嗅探、跨站点注入等等。 它被广泛采用并被推荐 OWASP.

之前,我写过关于在 Apache、Nginx 和 IIS 等 Web 服务器中实现标头的文章。 但是,如果您使用 Cloudflare 来保护和增强您的网站,您可以利用 Cloudflare 工人 操作 HTTP 响应标头。

Cloudflare Workers 是一个无服务器平台,您可以在其中运行 JavaScript、C、C++、Rust 代码。 它部署在全球 200 多个 Cloudflare 数据中心。

实现非常简单和灵活。 它使您可以灵活地在整个站点上应用标头,包括子域或带有 匹配模式n 使用正则表达式。

对于这个演示,我将使用 代码 斯科特·赫尔姆。

让我们开始吧……👨‍💻

  • 复制 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)));

还不保存; 您可能需要调整以下标头以满足要求。

  2022 年您可以购买的 13 个个人机器人

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 那样停机或重启。 如果你打算把这个应用到生产站点,我建议先在较低的环境下测试,或者借助路由,你可以在测试页面上应用来验证结果。 一旦满意,推到你想要的任何地方。

  网络安全中 10 多种常见的黑客和黑客类型

这太棒了!

谢谢 斯科特 对于代码。