HTTP Headers 📨

HTTP Headers ช่วยให้ไคลเอนต์และเซิร์ฟเวอร์สามารถส่งข้อมูลเพิ่มเติมไปพร้อมกับคำขอและการตอบกลับได้ 📡 ใน HTTP/1.x หัวข้อเฮดเดอร์จะเป็นชื่อที่ไม่คำนึงถึงตัวพิมพ์ใหญ่-เล็ก ตามด้วยเครื่องหมาย ":" และค่าของเฮดเดอร์ ส่วนใน HTTP/2 และสูงกว่า เฮดเดอร์จะแสดงเป็นตัวพิมพ์เล็กและบางเฮดเดอร์จะถูกนำหน้าด้วย ":" เพื่อใช้สำหรับ pseudo-headers (เช่น :status: 200).

🔥 ประเภทของ HTTP Headers

1️⃣ Request Headers 📨

เฮดเดอร์ที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับทรัพยากรที่ต้องการดึง หรือข้อมูลเกี่ยวกับไคลเอนต์

2️⃣ Response Headers 🎯

ให้ข้อมูลเพิ่มเติมเกี่ยวกับการตอบกลับ เช่น ตำแหน่งของทรัพยากร หรือรายละเอียดเกี่ยวกับเซิร์ฟเวอร์

3️⃣ Representation Headers 📦

ให้ข้อมูลเกี่ยวกับเนื้อหาของทรัพยากร เช่น MIME Type หรือการเข้ารหัสที่ใช้

4️⃣ Payload Headers 📏

ให้ข้อมูลเกี่ยวกับข้อมูลที่ถูกส่ง เช่น ขนาดของเนื้อหา หรือการเข้ารหัสที่ใช้ในการส่งข้อมูล

🛡️ Authentication Headers

• WWW-Authenticate: กำหนดวิธีการยืนยันตัวตน
• Authorization: ส่งข้อมูลรับรองตัวตนของไคลเอนต์ไปยังเซิร์ฟเวอร์
• Proxy-Authenticate: กำหนดวิธีการยืนยันตัวตนเมื่อมีพร็อกซี่เซิร์ฟเวอร์
• Proxy-Authorization: ส่งข้อมูลรับรองตัวตนไปยังพร็อกซี่

ที่มา MDN Web Docs

🚀 Caching Headers

• Cache-Control: กำหนดนโยบายการแคช
• Expires: กำหนดเวลาหมดอายุของข้อมูลในแคช
• Age: ระยะเวลาที่ข้อมูลอยู่ในแคช
• Clear-Site-Data: ล้างข้อมูลที่จัดเก็บไว้ (คุกกี้, แคช, การตั้งค่า)

📌 ตัวอย่าง:

Cache-Control: max-age=3600, must-revalidate
Expires: Wed, 21 Oct 2025 07:28:00 GMT

🔄 Conditional Headers

• Last-Modified: วันที่มีการเปลี่ยนแปลงล่าสุด
• ETag: รหัสเฉพาะของเวอร์ชันทรัพยากร
• If-Modified-Since: เช็คว่าทรัพยากรมีการเปลี่ยนแปลงตั้งแต่วันที่กำหนดหรือไม่
• If-None-Match: ใช้เช็คว่า ETag ตรงกับที่เซิร์ฟเวอร์มีหรือไม่

🔗 CORS Headers

• Access-Control-Allow-Origin: กำหนดว่าทรัพยากรสามารถใช้ได้จากโดเมนใดบ้าง
• Access-Control-Allow-Methods: กำหนดว่าเมธอดใดสามารถใช้ได้
• Access-Control-Allow-Headers: กำหนดว่าหัวข้อเฮดเดอร์ใดที่สามารถส่งมาได้

📌 ตัวอย่าง:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS

🔄 Content Headers

• Content-Type: ระบุประเภทของข้อมูล (เช่น application/json)
• Content-Length: ขนาดของข้อมูล (เป็นไบต์)
• Content-Encoding: กำหนดการบีบอัด (gzip, br)
• Content-Language: ระบุภาษาของข้อมูลที่ส่งไป

📌 ตัวอย่าง:

Content-Type: application/json
Content-Encoding: gzip

🔄 Security Headers

• Strict-Transport-Security (HSTS): บังคับให้ใช้ HTTPS
• X-Frame-Options: ป้องกันการฝัง iframe ที่เป็นอันตราย
• X-Content-Type-Options: ป้องกันการเปลี่ยนแปลง MIME Type
• Content-Security-Policy (CSP): กำหนดนโยบายด้านความปลอดภัยของเนื้อหา

📌 ตัวอย่าง:

Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Frame-Options: DENY

🔍 Redirect Headers

• Location: ใช้สำหรับเปลี่ยนเส้นทางไปยัง URL อื่น
• Refresh: สั่งให้เบราว์เซอร์โหลดหน้าใหม่

📌 ตัวอย่าง:

Location: https://example.com/new-page

📡 WebSockets Headers

• Sec-WebSocket-Key: คีย์สำหรับยืนยัน WebSocket handshake
• Sec-WebSocket-Accept: ค่าที่ใช้ตรวจสอบ WebSocket handshake

📌 Headers ที่เลิกใช้แล้ว (Deprecated)

• Pragma: ใช้สำหรับแคช (แทนที่ด้วย Cache-Control)
• DNT: Do Not Track (เลิกใช้แล้ว)

📚 สรุป

HTTP Headers เป็นส่วนสำคัญของการสื่อสารในเว็บ แอปพลิเคชันที่ปลอดภัยและมีประสิทธิภาพควรใช้เฮดเดอร์เหล่านี้อย่างถูกต้อง ✅