URL Encoder / Decoder

URL Encoding หรือที่มาตรฐาน RFC 3986 เรียกว่า Percent-encoding คือการแปลงอักขระที่ไม่ปลอดภัยสำหรับ URL ให้อยู่ในรูปเครื่องหมาย % ตามด้วยเลขฐานสิบหกสองหลัก เหตุผลคือ URL ตามมาตรฐานอนุญาตให้ใช้ได้เฉพาะตัวอักษรภาษาอังกฤษ ตัวเลข และสัญลักษณ์บางตัวเท่านั้น อักขระอื่นทั้งหมดไม่ว่าจะเป็นช่องว่าง เครื่องหมายวรรคตอน หรือภาษาไทย ต้องถูกแปลงก่อนส่งผ่านเครือข่าย มิฉะนั้นเซิร์ฟเวอร์อาจตีความผิดหรือลิงก์ขาดกลางคัน

เมื่อพิมพ์คำว่า สวัสดี ลงในช่องค้นหาแล้วกด Enter จะเห็นบนแถบที่อยู่กลายเป็น %E0%B8%AA%E0%B8%A7%E0%B8%B1%E0%B8%AA%E0%B8%94%E0%B8%B5 สาเหตุคือภาษาไทยถูกเก็บในรูปแบบ UTF-8 ซึ่งอักษรไทยหนึ่งตัวใช้พื้นที่ 3 ไบต์ เมื่อนำแต่ละไบต์มาเขียนเป็นเลขฐานสิบหกนำหน้าด้วย % จึงได้รหัสยาว 9 ตัวอักษรต่อพยัญชนะไทยหนึ่งตัว นั่นคือเหตุผลที่ URL ภาษาไทยดูยาวผิดปกติ แต่ข้อมูลไม่ได้สูญหาย เพียงถูกเขียนในรูปแบบที่เครือข่ายเข้าใจได้เท่านั้น เมื่อถอดรหัสกลับก็จะได้ข้อความเดิมทุกตัวอักษร ทั้งสระ วรรณยุกต์ และตัวการันต์

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

จุดที่นักพัฒนาพลาดบ่อยที่สุดคือการเลือกฟังก์ชันผิดตัว ทั้งสองทำงานคล้ายกันแต่ปฏิบัติกับอักขระโครงสร้างของ URL ต่างกันโดยสิ้นเชิง

• encodeURIComponent เข้ารหัสทุกอย่างที่ไม่ใช่อักขระปลอดภัย รวมถึง ? & = / # ด้วย ใช้กับชิ้นส่วนของ URL เช่น ค่าของพารามิเตอร์ ชื่อไฟล์ หรือคำค้นหา
• encodeURI จะเว้นอักขระโครงสร้างไว้ไม่แตะต้อง เพราะถือว่าสิ่งที่ส่งเข้ามาเป็น URL เต็มรูปแบบอยู่แล้ว เหมาะกับกรณีที่ต้องการเพียงแก้ช่องว่างและตัวอักษรไทยในลิงก์ทั้งเส้น

ตัวอย่างที่เห็นภาพชัด สมมติต้องการส่งค่า a&b=c เป็นคำค้นหา หากใช้ encodeURI จะได้ a&b=c เหมือนเดิม ทำให้เซิร์ฟเวอร์เข้าใจว่ามีสองพารามิเตอร์คือ a และ b ซึ่งผิดจากเจตนา แต่ถ้าใช้ encodeURIComponent จะได้ a%26b%3Dc เซิร์ฟเวอร์จึงอ่านเป็นค่าเดียวได้ถูกต้อง กฎง่าย ๆ ที่จำได้ไม่ยากคือ ถ้ากำลังประกอบค่า ให้ใช้ encodeURIComponent ถ้ากำลังจัดการลิงก์ทั้งเส้น ให้ใช้ encodeURI

ตัวอย่างการใช้งานจริง

สมมติร้านค้าออนไลน์ต้องการสร้างลิงก์ค้นหาสินค้าคำว่า เสื้อยืดผู้ชาย ค่าที่ได้จากการเข้ารหัสแบบ component เมื่อนำไปต่อท้าย https://shop.example/search?q= จะได้ลิงก์ที่คัดลอกไปวางในแชท LINE หรืออีเมลได้โดยไม่ขาดตรงช่องว่าง ซึ่งเป็นปัญหาที่พบบ่อยเมื่อวางลิงก์ภาษาไทยดิบ ๆ แล้วผู้รับกดแล้วเข้าไม่ถึงหน้าเป้าหมาย อีกกรณีที่เจอบ่อยคือการทำระบบติดตามแคมเปญ ที่ต้องแนบชื่อแคมเปญภาษาไทยไปกับพารามิเตอร์ utm หากไม่เข้ารหัสก่อน ระบบวิเคราะห์ปลายทางมักบันทึกค่าเพี้ยนหรือตัดข้อความทิ้งตั้งแต่ช่องว่างแรก

ข้อควรระวังที่มักทำให้เกิดบั๊ก

• อย่าเข้ารหัสซ้ำสองชั้น การนำข้อความที่เข้ารหัสแล้วมาเข้ารหัสอีกรอบจะทำให้ % กลายเป็น %25 และเมื่อถอดรหัสครั้งเดียวจะได้ข้อความที่ยังผิดอยู่ หากพบ %25 ในลิงก์ ให้สงสัยไว้ก่อนว่าเข้ารหัสเกินไปหนึ่งชั้น
• เครื่องหมายบวกไม่เท่ากับช่องว่างเสมอไป ในส่วน Query String ที่ส่งจากฟอร์ม HTML เครื่องหมาย + หมายถึงช่องว่าง แต่ในส่วน Path ของ URL มันคือเครื่องหมายบวกจริง เครื่องมือแยก Query String ในหน้านี้จึงแปลง + เป็นช่องว่างเฉพาะในส่วนพารามิเตอร์เท่านั้น
• สตริงที่เสียหายจะถอดรหัสไม่ได้ หากพบ % ที่ไม่ตามด้วยเลขฐานสิบหกสองหลักที่ถูกต้อง เช่น %zz หรือไบต์ UTF-8 ที่ขาดหาย การถอดรหัสจะล้มเหลว เครื่องมือจะแจ้งเตือนแทนที่จะคืนข้อความที่เพี้ยน
• URL Encoding ไม่ใช่การเข้ารหัสลับ ใครก็ตามที่เห็นลิงก์สามารถถอดกลับได้ทันที จึงไม่ควรใส่รหัสผ่านหรือข้อมูลส่วนบุคคลลงใน URL

เครื่องมือนี้ประมวลผลทั้งหมดในเบราว์เซอร์ของคุณด้วย JavaScript มาตรฐาน ข้อความหรือลิงก์ที่วางลงไปจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ใด ๆ จึงใช้กับ URL ที่มีโทเคนหรือข้อมูลภายในองค์กรได้อย่างสบายใจ ผลลัพธ์ที่ได้เทียบเท่ากับการเรียก encodeURIComponent() และ decodeURIComponent() ในโค้ดของคุณเองทุกประการ หากผลลัพธ์จากเครื่องมือกับจากโค้ดไม่ตรงกัน ให้ตรวจสอบก่อนว่าเลือกโหมดเดียวกันหรือไม่ เพราะนั่นคือสาเหตุที่พบมากที่สุด

1. เลือกโหมด encodeURIComponent เมื่อต้องการเข้ารหัสค่าที่จะใส่ใน Query String หรือเลือก encodeURI เมื่อต้องการเข้ารหัสลิงก์ทั้งเส้นโดยคงโครงสร้างไว้
2. วางข้อความหรือ URL ในช่องซ้าย แล้วกดปุ่มเข้ารหัส URL เพื่อดูผลลัพธ์ในช่องขวา
3. หากมีสตริง %E0%B8 อยู่แล้ว ให้วางในช่องขวาแล้วกดปุ่มถอดรหัส URL เพื่อแปลงกลับเป็นข้อความอ่านได้
4. ต้องการดูว่า URL ยาว ๆ มีพารามิเตอร์อะไรบ้าง ให้สลับไปแท็บแยกดู Query String วาง URL แล้วกดปุ่มแยกพารามิเตอร์