Cloudflare Workersを使用して安全なヘッダーを実装するにはどうすればよいですか?

Cloudflare Workersを使用して、Cloudflareを利用したWebサイトに安全なHTTPヘッダーを実装するためのステップバイステップのガイド。

XSS、クリックジャッキング、MIMI スニッフィング、クロスサイト インジェクションなどの一般的な脆弱性からサイトを保護するために HTTP 応答ヘッダーを実装する方法は数多くあります。これは広く採用されており、 OWASP によって推奨されています。

以前、Apache、Nginx、IIS などの Web サーバーでのヘッダーの実装について書きました。ただし、サイトの保護と強化に Cloudflare を使用している場合は、 Cloudflare ワーカー を利用して HTTP 応答ヘッダーを操作できます。

Cloudflare Workers は、JavaScript、C、C++、Rust コードを実行できるサーバーレス プラットフォームです。世界中に 200 を超えるすべての Cloudflare データセンターに導入されます。

実装は非常に簡単で柔軟です。これにより、正規表現を使用して 一致するパターンを 持つサブドメインまたは特定の URI を含むヘッダーをサイト全体に柔軟に適用できます。

このデモでは、Scott Helme による コード を使用します。

始めましょう…👨‍💻

• Cloudflareにログインし、「Workers」( 直接リンク )をクリックします。

• 「ワーカーの作成」をクリックします

• GitHub から worker.js コードをコピーし、スクリプト エディターに貼り付けます。

 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 – アプリケーション ポリシーを適用する必要がある場合は、ここで実行できます。

例 – 複数の URL で iFrame を通じてコン​​テンツを取得する必要がある場合は、以下のようにフレーム祖先を利用できます。

 "Content-Security-Policy" : "frame-ancestors 'self' gf.dev .com",

上記により、 gf.dev 、 .com 、およびセルフ サイトからコンテンツをロードできるようになります。

X-Frame-Options – iframe を使用して同じサイト内の一部のページにサイトのコンテンツを表示する場合は、SAMEORIGIN に変更できます。

 "X-Frame-Options": "SAMEORIGIN",

サーバー – ここでサーバーヘッダーをサニタイズできます。好きなものを入れてください。

 "Server" : " Server",

RemoveHeaders – 情報漏洩の脆弱性を軽減するために、バージョンを非表示にするために一部のヘッダーを削除する必要がありますか?

ここでできます。

 let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

新しいヘッダーの追加 – アプリケーションにカスタム ヘッダーを渡す必要がある場合は、以下のように securityHeaders セクションに追加できます。

 let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev .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のホーム/ダッシュボードに移動し、サイトを選択します。
• [Workers] タブ >> [ルートの追加] に移動します。
• [ルート] に URL を入力します。ここで正規表現を適用できます。
• 新しく作成したワーカーを選択して保存します

それだけです; 1 秒以内に、すべてのヘッダーがサイトに実装されていることがわかります。

Chrome デベロッパー ツールからは次のようになります。 HTTP ヘッダー ツールを使用してヘッダーをテストすることもできます。

Serverヘッダーが反映されない理由はわかりません。 Cloudflare がこれをオーバーライドしていると思います。

ご存知のとおり、実装全体には約 15 分かかり、Apache や Nginx のようにダウンタイムや再起動は必要ありません。これを実稼働サイトに適用することを計画している場合は、最初に下位環境でテストするか、ルートの助けを借りてテスト ページに適用して結果を検証することをお勧めします。満足したら、必要な場所に押します。

これはすごいですね！

コードを提供してくれた Scott に感謝します。