カスタム HTTP ヘッダーを追加する

より高度な HTTP ヘッダーのカスタマイズは、Cloudflare Workers の サーバーレス関数 ↗ で行えます。

Workers をまだデプロイしたことがない場合は、チュートリアル から始めてください。このチュートリアルでは、手順 1（Workers アカウントの登録）から手順 4（新しいプロジェクトの生成）まで完了してから、このページに戻ってください。

続ける前に、Cloudflare Pages プロジェクトが カスタムドメイン に接続されていることを確認してください。

Workers 関数は JavaScript ↗ で書きます。Worker が Cloudflare Pages アプリケーションへリクエストすると、レスポンスを受け取ります。Worker が受け取るレスポンスは不変（immutable）で、変更できません。ヘッダーの追加、削除、変更をするには、レスポンスをクローンし、新しい Response インスタンス上のヘッダーを変更します。変更後のヘッダーを付けた新しいレスポンスをブラウザーへ返します。次に例を示します。

export default {
	async fetch(request) {
		// This proxies your Pages application under the condition that your Worker script is deployed on the same custom domain as your Pages project
		const response = await fetch(request);

		// Clone the response so that it is no longer immutable
		const newResponse = new Response(response.body, response);

		// Add a custom header with a value
		newResponse.headers.append(
			"x-workers-hello",
			"Hello from Cloudflare Workers",
		);

		// Delete headers
		newResponse.headers.delete("x-header-to-delete");
		newResponse.headers.delete("x-header2-to-delete");

		// Adjust the value for an existing header
		newResponse.headers.set("x-header-to-change", "NewValue");

		return newResponse;
	},
};

Workers 関数のデプロイを始めるいちばん簡単な方法は、ブラウザーで workers.new ↗ を開くことです。アカウントにログインすると、Workers & Pages ダッシュボードへ自動で移動します。Workers & Pages ダッシュボードで関数を書くか、Workers ドキュメントの例 を使います。

スクリプトの準備ができたら Save and Deploy を選び、ドメインのゾーン設定で ルート を設定します。

たとえば、この Workers スクリプト を Workers ダッシュボードへコピーして使うと、リクエストが Pages の URL に届くたびに、よく使うセキュリティヘッダー（X-XSS-Protection、X-Frame-Options、X-Content-Type-Options、Strict-Transport-Security、Content-Security-Policy (CSP) など）を設定できます。

このファイルを自分で書きたくない場合は、custom-headers-example テンプレート ↗ を使い、Workers CLI の wrangler で新しい Workers 関数を生成できます。

git clone https://github.com/cloudflare/custom-headers-example
cd custom-headers-example
npm install

Workers 関数を Pages アプリケーションと一緒に動かすには、Pages アプリケーションと同じカスタムドメインへデプロイします。そのため、プロジェクトの Wrangler ファイルにアカウントとゾーンの情報を追記します。

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "custom-headers-example",
	"account_id": "FILL-IN-YOUR-ACCOUNT-ID",
	"workers_dev": false,
	"route": "FILL-IN-YOUR-WEBSITE.com/*",
	"zone_id": "FILL-IN-YOUR-ZONE-ID"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "custom-headers-example"
account_id = "FILL-IN-YOUR-ACCOUNT-ID"
workers_dev = false
route = "FILL-IN-YOUR-WEBSITE.com/*"
zone_id = "FILL-IN-YOUR-ZONE-ID"

Account ID と Zone ID の確認方法がわからない場合は、ガイド を参照してください。

Wrangler 設定ファイル を設定したら、ターミナルで npx wrangler deploy を実行して Worker をデプロイします。

npx wrangler deploy

Worker をデプロイすると、目的の HTTP ヘッダー変更が有効になります。Worker のデプロイ中も、Pages アプリケーションのコンテンツは通常どおり表示されます。