การเข้ารหัสเปอร์เซ็นต์ใน URL: %20, + และ %2F หมายถึงอะไร

การเข้ารหัสเปอร์เซ็นต์ (percent-encoding) คือการแทนอักขระที่ URL ไม่สามารถใช้ได้อย่างปลอดภัยด้วยเครื่องหมายเปอร์เซ็นต์ตามด้วยค่าไบต์ของอักขระนั้นในเลขฐานสิบหก ช่องว่างจะกลายเป็น %20 เครื่องหมาย & จะกลายเป็น %26 และเครื่องหมายทับ (/) จะกลายเป็น %2F การเข้ารหัสแบบนี้ช่วยปกป้องโครงสร้างของลิงก์ เพราะอักขระอย่าง & และ = ใช้แบ่งส่วนต่างๆ ของ query string

เข้ารหัสและถอดรหัส URLURL มีรหัส %20 เต็มไปหมดใช้ฟรี

อักขระใดบ้างที่คงรูปเดิมได้

มาตรฐาน URI (RFC 3986) ซึ่ง URL สร้างขึ้นจากมาตรฐานนี้ ระบุว่ามีอักขระบางตัวที่ไม่ต้องเปลี่ยน ได้แก่ตัวอักษร A ถึง Z และ a ถึง z ตัวเลข และเครื่องหมาย - _ . ~ อักขระเหล่านี้ไม่จำเป็นต้องเข้ารหัสเลย ส่วนอักขระอื่นมีหน้าที่เฉพาะใน URL เครื่องหมายโคลอน (:) แยกส่วนโปรโตคอลออกจากส่วนที่เหลือ เครื่องหมายทับแบ่งส่วนของพาธ เครื่องหมายคำถามเริ่มต้น query string เครื่องหมายแฮช (#) เริ่มส่วน fragment และ & กับ = แบ่ง query ออกเป็นชื่อและค่า อักขระที่มีหน้าที่เหล่านี้ต้องถูกเข้ารหัสเมื่อเราต้องการใช้เป็นข้อมูล ไม่ใช่เป็นโครงสร้าง

นี่เป็นเหตุผลที่อักขระตัวเดียวกันอาจต้องเข้ารหัสในตำแหน่งหนึ่งแต่ไม่ต้องในอีกตำแหน่งหนึ่ง ในค่าของ query เครื่องหมาย & ต้องเขียนเป็น %26 ไม่เช่นนั้นลิงก์จะถูกแบ่งผิดที่ แต่ในพาธของลิงก์ มันเป็นเพียงอักขระธรรมดาตัวหนึ่ง

ตัวอักษรที่ไม่ใช่ภาษาอังกฤษ

ตัวอักษรนอกเหนือจากภาษาอังกฤษพื้นฐานจะถูกเข้ารหัสเป็นไบต์ของ UTF-8 และแต่ละไบต์จะเขียนเป็นรหัสเปอร์เซ็นต์ เช่น é ในคำว่า café ประกอบด้วยสองไบต์ คือ C3 และ A9 จึงกลายเป็น %C3%A9 และคำทั้งคำกลายเป็น caf%C3%A9

ตัวอย่างง่ายๆ ช่วยให้เห็นกฎชัดขึ้น ข้อความ a b&c=d/é เมื่อเข้ารหัสแบบ component จะกลายเป็น a%20b%26c%3Dd%2F%C3%A9 ทุกอักขระที่ไม่ใช่ตัวอักษร ตัวเลข หรือเครื่องหมายที่ปลอดภัย จะถูกเข้ารหัส ได้แก่ ช่องว่าง & เครื่องหมายเท่ากับ เครื่องหมายทับ และตัวอักษรที่มีเครื่องหมายกำกับ

แบบ component หรือทั้ง URL

การเข้ารหัสมีสองแบบด้วยเหตุผล การเข้ารหัสแบบ component ถือว่าอักขระสงวนทุกตัวเป็นข้อมูล ใช้กับค่าเดียว เช่น คำค้นหาหรือชื่อไฟล์ที่อยู่ในลิงก์ เมื่อเข้ารหัส "rock & roll" เป็นคำค้นหา จะได้ rock%20%26%20roll ทำให้เครื่องหมาย & อยู่ภายในค่านั้น

ส่วนการเข้ารหัสทั้ง URL จะรักษาโครงสร้างไว้ เมื่อเข้ารหัส https://example.com/a b จะได้ https://example.com/a%20b โดยเครื่องหมายทับและโคลอนยังคงเดิม ใช้กับที่อยู่เว็บทั้งที่ต้องการให้ถูกต้องตามรูปแบบ ไม่ใช่กับค่าที่จะนำไปวางไว้ในลิงก์

เครื่องมือ URL มีการตั้งค่า Component และ Full URL ด้วยเหตุผลนี้ การถอดรหัสแบบ Full URL ยังคงอักขระโครงสร้างที่ถูกเข้ารหัสไว้ เช่น %26 และ %3D ลิงก์จึงยังใช้งานได้หลังถอดรหัส

เครื่องหมายบวกและข้อมูลจากฟอร์ม

ฟอร์มเว็บใช้กฎที่ต่างออกไป เมื่อฟอร์มส่งข้อมูลแบบ form data ช่องว่างจะเขียนเป็น + แทนที่จะเป็น %20 และเครื่องหมายบวกจริงจะเขียนเป็น %2B ดังนั้นวลี C++ tips จะกลายเป็น C%2B%2B+tips ใน form data และเป็น C%2B%2B%20tips ในการเข้ารหัสแบบ component ธรรมดา

การถอดรหัสก็มีความต่างแบบเดียวกัน ใน query string + มักหมายถึงช่องว่าง ส่วนในพาธของลิงก์ + คือเครื่องหมายบวก เครื่องมือจะอ่าน + เป็นช่องว่างเฉพาะเมื่อเลือก Use + for spaces (form data) ดังนั้นให้ปิดตัวเลือกนี้สำหรับพาธ และสำหรับค่าที่เครื่องหมายบวกคือเครื่องหมายบวกจริงๆ

อ่าน query string ที่ยาว

ลิงก์มักบรรจุการตั้งค่าไว้หลังเครื่องหมายคำถาม ดูตัวอย่างนี้

https://shop.example/search?q=red%20shirt&size=M&tag=summer%2Bsale

เมื่อถอดรหัสแล้ว จะได้ความหมายว่าค้นหา red shirt ขนาดคือ M และแท็กคือ summer+sale %2B ยังคงเป็นเครื่องหมายบวกเพราะถูกเข้ารหัสมาแต่แรก วางลิงก์ลงในเครื่องมือ URL แล้วเครื่องมือจะแสดงแต่ละชื่อและค่าหลังถอดรหัส ทำให้ลิงก์ยาวอ่านง่ายขึ้น และหากต้องการที่อยู่ที่สั้นลงโดยไม่มีการตั้งค่าการติดตาม ให้ลบ tracking ออกจากลิงก์ ก่อน

เข้ารหัสซ้ำสองชั้น

ความผิดพลาดที่พบบ่อยที่สุดคือการเข้ารหัสค่าเดิมซ้ำสองครั้ง เมื่อเข้ารหัสข้อความ %20 อีกครั้ง จะได้ %2520 เพราะเครื่องหมายเปอร์เซ็นต์เองก็ถูกเข้ารหัสเป็น %25 หน้าเว็บจะไปค้นหาคำว่า %20 ตามตัวอักษรในค่า ทำให้การค้นหาหรือหน้าเว็บไม่ตรงกัน ให้ถอดรหัสลิงก์หนึ่งครั้ง ตรวจผลลัพธ์ และเข้ารหัสค่าเฉพาะเมื่อจำเป็นเท่านั้น

รหัสที่เสียหาย

เครื่องหมายเปอร์เซ็นต์ต้องตามด้วยเลขฐานสิบหกสองหลัก และตัวเลขเหล่านั้นต้องประกอบเป็น UTF-8 ที่ถูกต้องสำหรับตัวอักษรที่มีเครื่องหมายกำกับ ลิงก์ที่ถูกตัดกลางคัน หรือเครื่องหมายเปอร์เซ็นต์ที่พิมพ์เกินมาในข้อความ อาจทำให้เกิดรหัสที่เสียหาย เช่น %E0%A4%A เครื่องมือจะถอดรหัสส่วนที่ทำได้ คงไบต์ที่เสียหายไว้ตามที่เขียนมา และแจ้งจำนวนส่วนที่ถอดรหัสไม่ได้ โดยไม่หยุดทำงานที่ข้อผิดพลาดแรก

กรณีพิเศษ

• ช่องว่างในลิงก์ที่พิมพ์เอง แถบที่อยู่ของเบราว์เซอร์จะเข้ารหัสช่องว่างให้โดยอัตโนมัติ แต่ลิงก์ที่คัดลอกมาวางในเอกสารอาจยังมีช่องว่างดิบอยู่ ให้เข้ารหัสก่อนส่งต่อ
• ชื่อโดเมนที่ไม่ใช่ภาษาอังกฤษ ใช้ระบบแยกต่างหากคือ punycode และการเข้ารหัสพาธหรือ query จะไม่เปลี่ยนชื่อโฮสต์
• อิโมจิที่ขาดครึ่งหนึ่ง สำเนาที่เสียหายอาจเหลือเพียงครึ่งหนึ่งของ surrogate ซึ่งเข้ารหัสไม่ได้ เครื่องมือจะแทนที่ด้วยสัญลักษณ์แทนอักขระ และแจ้งให้ทราบ
• Base64 ในลิงก์ ค่า Base64 ในลิงก์มีกฎของตัวเอง โดยใช้ - และ _ แทน + และ / อ่านเพิ่มเติมที่ Base64 อธิบายอย่างไร

วิธีใช้งานกับ fixmint

1. วางข้อความหรือลิงก์ลงในช่อง Text or URL
2. เลือก Encode หรือ Decode จากนั้นเลือก Component สำหรับค่าเดียว หรือ Full URL สำหรับที่อยู่ทั้งหมด
3. ติ๊ก Use + for spaces (form data) สำหรับลิงก์ที่คัดลอกมาจากฟอร์มเว็บ
4. สำหรับลิงก์ ให้ดูที่ Query parameters, decoded เพื่อเห็นชื่อและค่าของแต่ละรายการ
5. คัดลอกผลลัพธ์

คำตอบสั้นๆ

%20 หมายถึงอะไร?

ช่องว่าง โดยค่าไบต์ของมันคือ 20 ในเลขฐานสิบหก

ทำไมในลิงก์ของฉันมี + แทนที่จะเป็น %20?

ลิงก์นั้นน่าจะมาจากฟอร์ม ซึ่ง + หมายถึงช่องว่าง ตัวเลือก "Use + for spaces (form data)" จะถอดรหัสให้ถูกต้อง

ทำไมในลิงก์ของฉันมี %2520?

ค่านั้นถูกเข้ารหัสซ้ำสองครั้ง เครื่องหมายเปอร์เซ็นต์ของ %20 ถูกเข้ารหัสอีกครั้งเป็น %25 ให้ถอดรหัสหนึ่งครั้งเพื่อกลับไปเป็น %20 และถอดอีกครั้งเพื่อให้ได้ช่องว่าง