在 CloudFlare 部署 HTTP Security Header

原创

sysin 2024-01-05 11:42:36 博主文章分类：HTTP ©著作权

文章标签 http 网络协议网络 cloudflare header 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者sysin的原创作品，请联系作者获取转载授权，否则将追究法律责任

作者：gc，主页：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(@)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)));