home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> ระบบเครือข่าย >> อินเทอร์เน็ต

Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ

ในบทความนี้ ผมจะพาคุณเข้าใจว่า World Wide Web ทำงานอย่างไรในระดับพื้นฐาน

เทคโนโลยีแก่นคือ HTTP - Hypertext Transfer Protocol โปรโตคอลการสื่อสารที่คุณใช้เวลาเล่นเว็บ

ในระดับพื้นฐาน ตอนคุณเข้าเว็บไซต์ เบราว์เซอร์สร้าง HTTP Request ไปเซิร์ฟเวอร์ เซิร์ฟเวอร์ตอบกลับด้วยทรัพยากร (รูปภาพ วิดีโอ หรือ HTML ของหน้าเว็บ) — ซึ่งเบราว์เซอร์แสดงให้คุณเห็น

นี่คือ Message-based Model ของ HTTP ทุกการโต้ตอบ HTTP ประกอบด้วย Request และ Response

โดยธรรมชาติ HTTP เป็น Stateless (ไม่มีสถานะ)

Stateless หมายถึงทุก Request แยกจากกัน หมายความว่าแต่ละ Request จากเบราว์เซอร์ต้องมีข้อมูลเพียงพอเองสำหรับเซิร์ฟเวอร์ดำเนินการ และแต่ละ Transaction ของ Message-based Model ของ HTTP ถูกประมวลผลแยกจากกัน

URLs

URL (Uniform Resource Locator) น่าจะเป็นแนวคิดที่รู้จักมากที่สุดของเว็บ และเป็นหนึ่งในสำคัญและมีประโยชน์ที่สุด URL คือที่อยู่เว็บใช้ระบุทรัพยากรบนเว็บ

แนวคิดของเว็บโครงสร้างรอบทรัพยากร (Resources) ตั้งแต่เริ่มต้น เว็บเป็นแพลตฟอร์มแชร์ไฟล์ข้อความ/HTML เอกสาร รูปภาพ ฯลฯ จึงถือได้ว่าเป็นคอลเลกชันของทรัพยากร

Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ
ตัวอย่าง URL

Protocol — มักเป็น HTTP (หรือ HTTPS สำหรับเวอร์ชันปลอดภัยของ HTTP)

โปรโตคอลอื่นที่โดดเด่น:

  • File Transfer Protocol (FTP) — โปรโตคอลมาตรฐานถ่ายโอนไฟล์ระหว่าง Client และ Server ผ่านเครือข่าย
  • Simple Mail Transfer Protocol (SMTP) เป็นมาตรฐานสำหรับการส่งอีเมล

Domain — ชื่อใช้ระบุ IP Address หนึ่งหรือหลายตัว ที่ทรัพยากรตั้งอยู่

Path — ระบุตำแหน่งทรัพยากรบนเซิร์ฟเวอร์ ใช้ตรรกะเดียวกับตำแหน่งทรัพยากรบนอุปกรณ์ที่คุณอ่านอยู่ (เช่น /search/cars/VWBeetle.pdf หรือ C:/my cars/VWBeetle.pdf)

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

หมายเหตุ: ตอนค้นหาบทความและข้อมูลเพิ่มเติมเกี่ยว HTTP อาจเจอคำว่า URI (Uniform Resource Identifier) ใช้แทน URL บางครั้ง แต่ส่วนใหญ่ใน spec อย่างเป็นทางการ และคนที่อยากโชว์ :)

HTTP Requests

ใน HTTP ทุก Request ต้องมี URL Address เพิ่มเติม Request ต้องมี Method (เมธอด) 4 เมธอดหลักของ HTTP:

  • GET
  • PUT
  • POST
  • DELETE

ผมจะอธิบายเมธอดเหล่านี้และอื่นๆ ในส่วน HTTP Methods

เมธอดเหล่านี้ตรงกับ Actions โดยตรง:

  • read
  • update
  • create
  • delete

ทุก HTTP Message มี Header หนึ่งหรือมากกว่า ตามด้วย Message Body ทางเลือก Body มีข้อมูลที่จะส่งกับ Request หรือข้อมูลที่รับกับ Response

ส่วนแรกของทุก HTTP Request มี 3 ส่วน:

ตัวอย่าง:

  • GET /adds/search-result?item=vw+beetle HTTP/1.1

เมื่อ URL มีเครื่องหมาย "?" หมายถึงมี Query ส่งพารามิเตอร์ของทรัพยากรที่ร้องขอ

  1. ส่วนแรกคือ Method บอกว่าใช้ HTTP Method ไหน ใช้ GET มากที่สุด GET ดึงทรัพยากรจากเว็บเซิร์ฟเวอร์ และเพราะ GET ไม่มี Message Body ไม่ต้องมีอะไรหลัง Header
  2. ส่วนที่สองคือ Requested URL
  3. ส่วนที่สามคือ HTTP Version ที่ใช้ Version 1.1 เป็นที่นิยมมากที่สุดสำหรับเบราว์เซอร์ส่วนใหญ่ แต่ Version 2.0 กำลังครองชิง

มีสิ่งน่าสนใจอื่นใน HTTP Request:

Referer Header — บอก URL ที่ Request มาจากที่ไหน

User-Agent Header — ข้อมูลเพิ่มเติมเกี่ยวกับเบราว์เซอร์ที่สร้าง Request

Host Header — ระบุ Host Name อย่างเดียว จำเป็นเมื่อหลายเว็บโฮสต์บนเซิร์ฟเวอร์เดียวกัน

Cookie Header — ส่งพารามิเตอร์เพิ่มเติมไป Client

HTTP Responses

เหมือน HTTP Requests, HTTP Responses ก็ประกอบด้วย 3 ส่วน:

ตัวอย่าง:

HTTP/1.1 200 OK

  1. ส่วนแรกคือ HTTP Version ที่ใช้
  2. ส่วนที่สองคือรหัสตัวเลขของผลลัพธ์สำหรับ Request
  3. ส่วนที่สามคือคำอธิบายข้อความของส่วนที่สอง

สิ่งน่าสนใจอื่นใน HTTP Response:

Server Header — ข้อมูลเกี่ยวกับ Web Server Software ที่ใช้

Set-Cookie Header — ออก Cookie ให้เบราว์เซอร์

Message Body — มักมี Message Body ใน HTTP Response

Content-Length Header — บอกขนาด Message Body ในหน่วยไบต์

HTTP Methods

เมธอดทั่วไปคือ GET และ POST แต่มีอื่นๆ อีก

GET — ใช้ขอข้อมูลจากทรัพยากรที่ระบุ โดยไม่แก้ไขข้อมูล GET Request ไม่เปลี่ยนสถานะทรัพยากร

POST — ใช้ส่งข้อมูลไปเซิร์ฟเวอร์เพื่อสร้างทรัพยากร

PUT — ใช้อัปเดททรัพยากรที่มีอยู่บนเซิร์ฟเวอร์ด้วยเนื้อหาใน Body ของ Request คิดว่าเป็นการ "แก้ไข"

HEAD — ใช้เหมือน GET แต่ต่างที่ Return ของ HEAD ไม่ควรมี Body ใน Response แต่จะมี Header เหมือนใช้ GET ใช้ HEAD เช็คว่าทรัพยากรมีอยู่ก่อนทำ GET Request

TRACE — ใช้เพื่อวินิจฉัย (Diagnostic) Response จะมีใน Body เนื้อหาที่แน่นอนของ Request Message

OPTIONS — ใช้อธิบายตัวเลือกการสื่อสาร (HTTP Methods) ที่ใช้ได้สำหรับ Target Resource

PATCH — ใช้นำ Partial Modifications ไปประยุกต์กับทรัพยากร

DELETE —ใช้ลบทรัพยากรที่ระบุ

REST

Representational State Transfer (REST) คือสถาปัตยกรรมสไตล์ ที่ Request และ Response มี Representation ของสถานะปัจจุบันของทรัพยากรของระบบ

"ปกติ" แบบ:

  • https://carapp.com/search?make=wv&model=beetle

REST-style:

  • https://carapp.com/search/vw/beetle

เรียนรู้เพิ่มเติม REST ได้ที่นี่ถ้าสนใจ

HTTP Headers

มี 3 ส่วนหลักประกอบ Request/Response Structure:

  • First Line
  • Headers
  • Body/Content

พูดถึง First Line ใน HTTP Requests/Responses และ Body ไปแล้ว ตอนนี้พูด HTTP Headers

HTTP Headers เพิ่มหลัง First Line ถูกกำหนดเป็น Name:Value pairs คั่นด้วย Colon ใช้ส่งพารามิเตอร์เพิ่มเติมพร้อม Request หรือ Response

Body ของ Message มีข้อมูลส่งกับ Request หรือรับกับ Response

มีประเภท Headers ต่างๆ จัดกลุ่มตามการใช้งาน 4 หมวดใหญ่:

  • General Header — Headers ใช้ได้ทั้ง Request และ Response และอิสระจากข้อมูลที่แลกเปลี่ยน
  • Request Header — Headers นี้กำหนดพารามิเตอร์สำหรับข้อมูลที่ร้องขอ หรือพารามิเตอร์ที่ให้ข้อมูลสำคัญเกี่ยวกับ Client ที่ทำ Request
  • Response Header — Headers มีข้อมูลเกี่ยวกับ Response ที่จะมา
  • Entity Header — Entity Headers อธิบายเนื้อหาที่ประกอบ Body ของ Message
Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ
ประเภทของ Headers

HTTP Status Codes

เล่นเว็บอาจเจอหน้า "404 error: not found" หรือ "500 errors: server is not responding"

นี่คือ HTTP Status Codes

ทุก HTTP Response Message ต้องมี HTTP Status Code ในบรรทัดแรก บอกผลลัพธ์ของ Request

Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ

มี 5 กลุ่ม Status Codes จัดกลุ่มด้วยหลักแรก:

  • 1xx — Informational (ข้อมูล)
  • 2xx — Request สำเร็จ
  • 3xx — Client ถูก Redirect ไปทรัพยากรอื่น
  • 4xx — Request มี Error บางอย่าง
  • 5xx — Server เจอ Error ตอนดำเนินการ Request

นี่คือรายการเต็ม HTTP Status Response Codes และคำอธิบาย

HTTPS (Hypertext Transfer Protocol Secure)

เวอร์ชันปลอดภัยของ HTTP คือ HyperText Transfer Protocol Secure (HTTPS) HTTPS ให้การสื่อสารเข้ารหัสระหว่างเบราว์เซอร์ (Client) และเว็บไซต์ (Server)

ใน HTTPS โปรโตคอลการสื่อสารเข้ารหัสด้วย Transport Layer Security (TLS) หรือ Secure Sockets Layer (SSL)

โปรโตคอลจึงมักเรียกว่า HTTP over TLS หรือ HTTP over SSL

TLS และ SSL ใช้ระบบเข้ารหัสแบบ Asymmetric (อสมาตร) ใช้ Public Key (Encryption Key) และ Private Key (Decryption Key) เข้ารหัสข้อความ

ใครก็ใช้ Public Key เข้ารหัสข้อความได้ แต่ Private Key เป็นความลับ หมายถึงเฉพาะผู้รับที่ตั้งใจ เท่านั้นที่ถอดรหัสได้

Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ
ตัวอย่างระบบเข้ารหัสแบบ Asymmetric

SSL/TLS Handshake

ตอนคุณขอ HTTPS connection ไปเว็บไซต์ เว็บส่ง SSL Certificate ไปเบราว์เซอร์ กระบวนการที่เบราว์เซอร์และเว็บเริ่มสื่อสาร เรียกว่า "SSL/TLS Handshake"

SSL/TLS Handshake มีขั้นตอนหลายขั้น เบราว์เซอร์และเว็บ Validate กัน และเริ่มสื่อสารผ่าน SSL/TLS Tunnel

คุณน่าจะสังเกต ตอนมี Secure Tunnel ที่เชื่อถือได้ใน HTTPS Connection ไอคอนล็อกสีเขียวจะแสดงใน Address Bar ของเบราว์เซอร์

Master HTTP: คู่มือจำเป็นสำหรับการสื่อสารบนเว็บ
ตัวอย่างหน้าปลอดภัยของผม

ประโยชน์ของ HTTPS

ประโยชน์หลักของ HTTPS:

  • ข้อมูลลูกค้า เช่น หมายเลขบัตรเครดิต และข้อมูลละเอียดอ่อน ถูกเข้ารหัส ไม่ถูกดักฟังได้
  • ผู้เยี่ยมชมตรวจสอบได้ว่าคุณเป็นธุรกิจจดทะเบียน และคุณเป็นเจ้าของโดเมน
  • ลูกค้ารู้ว่าไม่ควรเข้าไซต์ที่ไม่มี HTTPS จึงไว้วางใจและซื้อจากไซต์ที่ใช้ HTTPS มากขึ้น

ขอบคุณที่อ่าน! ดูบทความแบบนี้เพิ่มเติมที่โปรไฟล์ freeCodeCamp ของผม และดูโปรเจกต์สนุกอื่นๆ ที่ GitHub ของผม