时间戳

首页 > 技术文章 > 在 CloudFlare 部署 HTTP Security Header

在 CloudFlare 部署 HTTP Security Header

sysin 2021-12-22 14:39 原文

请访问原文链接：https://sysin.org/blog/deploy-security-header-on-cloudflare/，查看最新版。原创作品，转载请保留出处。

作者：gc(at)sysin.org，主页：www.sysin.org

1. Cloudflare Works 介绍

以下引自官网，更多内容请参看官方文档。

“
Cloudflare Workers provides a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.

使用 Cloudflare Workers® 进行无服务器计算

网络就是计算机®

在覆盖 100 个国家/地区超过 200 个城市的 Cloudflare 全球云网络上构建无服务器应用程序。 Cloudflare Workers 提供了一个轻量级的 JavaScript 执行环境，允许开发人员在不配置或不维护基础设施的情况下，扩充现有应用程序或创建全新应用程序。

在边缘运行 JavaScript

请在全球数以百计的 Cloudflare 数据中心中运行 JavaScript Service Workers。修改站点的 HTTP 请求和响应，发出并行请求或从边缘生成响应。
”

注意：Workers 免费版请求数限制为 10万/每天。

2. 创建一个 Works

登录 Cloudflare，选择你的“域名” > Works，或者直接点击右侧面板“Works”，点击“创建 Worker”，覆盖粘贴以下 js 脚本，点击“保存并部署”。可以将创建的 Work 修改一个友好名称，如“set-header”。

备注：首次启用该功能有个选择“子域”的向导，根据提示点击下一步即可。

const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=31536000; includeSubDomains; preload", //可选，“SSL/TLS > 边缘证书 > HTTP 严格传输安全 (HSTS)“ 中可以直接修改
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "SAMEORIGIN",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin",
        "Feature-Policy": "camera=(), microphonee=()",//旧版已废弃："Feature-Policy": "camera 'none'; microphone 'none'",
        "X-Author": "gc(at)sysin.org"
    },
    sanitiseHeaders = {
        Server: "sysin.org"
    },
    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)));

备注：具体 Header 内容请根据实际情况修改。

3. 添加路由

即将上述 worker 关联到需要执行的 URL。

示例：关联到该域名下的所有 URL，需要创建两条路由，分别关联到上述创建的 Worker（set-header）。

*.sysin.org/*
sysin.org/*

4. 验证

curl

curl -I https://sysin.org

或者在线检测

https://securityheaders.com/

推荐阅读