เข้ารหัส URL

URL Encoding: ทำไมเบราว์เซอร์เปลี่ยนช่องว่างเป็น %20

เคยสังเกตตัว %20 กับ %3D แปลกๆ ใน URL ไหม? นั่นคือ URL encoding (หรือ percent encoding) URL รับอักขระได้แค่ชุดจำกัด -- ตัวอักษร ตัวเลข กับสัญลักษณ์ไม่กี่ตัว นอกนั้น -- ช่องว่าง ตัวอักษรภาษาไทย อักขระพิเศษ -- ต้องแปลงเป็น %XX ถึงจะเดินทางข้ามเว็บได้อย่างปลอดภัย

ความแตกต่างระหว่าง encodeURIComponent กับ encodeURI

JavaScript มีฟังก์ชันคล้ายกัน 2 ตัว encodeURIComponent() ใช้สำหรับ encode ค่าพารามิเตอร์ จะแปลง slash และ ? ด้วย ส่วน encodeURI() ใช้กับ URL ทั้งหมด จะเก็บอักขระโครงสร้าง URL ไว้ ใช้ผิดอาจทำให้เกิด double encoding หรือโครงสร้าง URL พัง

ทำไม URL ถึงใช้อักขระอะไรก็ได้ไม่ได้

URL เป็นไปตามสเปคชื่อ RFC 3986 ซึ่งเข้มงวดมากเรื่องอักขระที่อนุญาต: ตัวอักษร ตัวเลข กับสัญลักษณ์บางตัวอย่างขีดกลางกับจุด แค่นั้น อักขระอย่าง & กับ = มีหน้าที่ใน URL อยู่แล้ว -- ใช้แยกพารามิเตอร์ ดังนั้นถ้าข้อมูลจริงมี & หรือ = ต้องเข้ารหัสไม่งั้นเซิร์ฟเวอร์จะสับสนว่าพารามิเตอร์หนึ่งจบตรงไหนและอันต่อไปเริ่มตรงไหน เช่นเดียวกับช่องว่าง อักขระภาษาไทย และอะไรก็ตามที่ไม่ใช่ ASCII ธรรมดา

อักขระที่ถูก Encode บ่อยที่สุด

ช่องว่างกลายเป็น %20 (หรือ + ในบางบริบท) เครื่องหมาย & กลายเป็น %26, = กลายเป็น %3D, ? กลายเป็น %3F ภาษาไทยและอักขระ non-ASCII จะถูกเข้ารหัสเป็น UTF-8 ก่อน แล้วแต่ละไบต์จะกลายเป็น %XX ของตัวเอง ดังนั้นอักขระตัวเดียวอาจกลายเป็น %XX สามตัวขึ้นไป เครื่องหมายทับ (/) เป็นตัวคั่น path ดังนั้นเข้ารหัสแค่ตอนมันอยู่ในค่าพารามิเตอร์ ไม่ใช่ใน path ของ URL เอง

เคล็ดลับ URL Encoding สำหรับนักพัฒนา

กฎทอง: เข้ารหัสค่าพารามิเตอร์ ไม่ใช่ URL ทั้งหมด ใน JavaScript encodeURIComponent() จัดการค่าได้สมบูรณ์แบบ ส่วน encodeURI() ใช้กับ URL เต็มและจะปล่อยอักขระโครงสร้างไว้ Python ใช้ urllib.parse.quote() ระวังเรื่อง double encoding -- เกิดขึ้นเมื่อคุณ encode สตริงที่ถูก encode ไปแล้วโดยไม่ตั้งใจ ทำให้ %20 กลายเป็น %2520 และเข้ารหัสค่าพารามิเตอร์ใน API call เสมอ เพราะ input ของ user อาจมีอะไรก็ได้