📘 תיעוד 224

הוספת כותרות HTTP מותאמות אישית

הערה

Cloudflare מספקת התאמה אישית של כותרות HTTP לפרויקטי Pages על ידי הוספת קובץ _headers לפרויקט. עיינו בתיעוד למידע נוסף.

התאמה מתקדמת יותר של כותרות HTTP זמינה באמצעות פונקציות serverless של Cloudflare Workers.

אם עדיין לא פרסתם Worker, התחילו עם המדריך שלנו. לצורך המדריך הזה, השלימו את שלב אחד (Sign up for a Workers account) עד שלב ארבע (Generate a new project) לפני החזרה לדף זה.

לפני שממשיכים, ודאו שפרויקט Cloudflare Pages מחובר לדומיין מותאם אישית.

#כתיבת פונקציית Workers

פונקציות Workers נכתבות בJavaScript. כאשר Worker שולח בקשה ליישום Cloudflare Pages, הוא מקבל תגובה. התגובה ש-Worker מקבל היא immutable, כלומר אי אפשר לשנות אותה. כדי להוסיף, למחוק או לשנות כותרות, שכפלו את התגובה ושנו את הכותרות במופע Response חדש. החזירו את התגובה החדשה לדפדפן עם שינויי הכותרות הרצויים. דוגמה לכך מוצגת למטה:

הגדרת כותרות מותאמות אישית עם פונקציית Workers

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 היא להקליד workers.new בדפדפן. התחברו לחשבון כדי להיות מופנים אוטומטית ללוח הבקרה Workers & Pages. מלוח הבקרה Workers & Pages, כתבו את הפונקציה או השתמשו באחת מהדוגמאות בתיעוד של Workers.

בחרו Save and Deploy כאשר הסקריפט מוכן, והגדירו route בהגדרות ה-zone של הדומיין.

לדוגמה, הנה סקריפט Workers שאפשר להעתיק ולהדביק בלוח הבקרה של Workers, שמגדיר כותרות אבטחה נפוצות בכל פעם שבקשה מגיעה לכתובת ה-URL של Pages, כגון X-XSS-Protection, X-Frame-Options, X-Content-Type-Options, Strict-Transport-Security, Content-Security-Policy (CSP), ועוד.

#פריסת פונקציית Workers באמצעות ה-CLI

אם תרצו לדלג על כתיבת הקובץ בעצמכם, אפשר להשתמש בתבנית custom-headers-example כדי ליצור פונקציית Workers חדשה עם wrangler, כלי ה-CLI של Workers.

יצירת פונקציית serverless עם wrangler

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

כדי להפעיל את פונקציית Workers לצד יישום Pages, פרסו אותה לאותו דומיין מותאם אישית כמו יישום Pages. כדי לעשות זאת, עדכנו את קובץ Wrangler בפרויקט עם פרטי החשבון וה-zone:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "custom-headers-example",
	"account_id": "FILL-IN-YOUR-ACCOUNT-ID",
	"workers_dev": false,
	"route": {
		"pattern": "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]
pattern = "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 אמור להמשיך להופיע כרגיל.