เข้ารหัสและถอดรหัส URL ออนไลน์

URL Encoding และ Decoding อธิบายสำหรับนักพัฒนา

พิมพ์ช่องว่างลงใน URL หรือคำภาษาไทย หรือเครื่องหมาย ampersand ที่เป็นของข้อมูลคุณเองไม่ใช่ของ address นั้น แล้วบางอย่างต้องยอมแพ้ เว็บรับประกันการส่งข้อมูลที่ปลอดภัยเฉพาะสำหรับตัวอักษร ASCII ที่คาดเดาได้ชุดเล็กๆ เท่านั้น ทุกอย่างที่นอกเหนือจากนั้นต้องห่อด้วยรูปแบบที่ router เซิร์ฟเวอร์ และเบราว์เซอร์ทุกตัวเห็นพ้องกัน รูปแบบนั้นคือ percent-encoding ซึ่งเรียกกันทั่วไปว่า URL encoding และหน้านี้ให้คุณแปลงข้อความในทั้งสองทิศทางได้โดยตรงในเบราว์เซอร์

Percent-encoding คืออะไรกันแน่

กฎนั้นเป็นกลไกและง่ายต่อการปฏิบัติตาม อักขระใดๆ ที่ไม่สามารถปรากฏได้ตามตัวอักษรจะถูกแทนที่ด้วยเครื่องหมาย % ตามด้วยเลขฐานสิบหกสองหลักที่แสดงค่าไบต์ของอักขระนั้น ช่องว่างกลายเป็น %20 เครื่องหมาย plus กลายเป็น %2B เครื่องหมาย hash กลายเป็น %23 เมื่ออักขระหนึ่งตัวแมปกับหลายไบต์ตามที่ข้อความที่ไม่ใช่ ASCII ส่วนใหญ่ทำภายใต้ UTF-8 คุณก็จะได้ชุดสามตัวหลายชุดต่อกัน สัญลักษณ์ euro กลายเป็น %E2%82%AC การถอดรหัสกลับทิศกระบวนการ อ่านแต่ละชุดสามตัวกลับเป็นไบต์ต้นฉบับ

การตกลงนี้กำหนดไว้ใน URI specification (RFC 3986) และมันจงใจทำให้น่าเบื่อ ความน่าเบื่อคือจุดประสงค์ HTTP client และเซิร์ฟเวอร์ที่ทำงานได้ดีทุกตัวบนโลกใบนี้ใช้กฎเดียวกัน ดังนั้น link ที่ encode ได้อย่างถูกต้องในที่หนึ่งจึงมาถึงที่อื่นอย่างสมบูรณ์

ทำไมมันจึงต้องมีอยู่

URL บรรจุอักขระสองประเภทที่มีงานต่างกันมาก Reserved characters เช่น /, ?, #, &, = และ : เป็นโครงสร้าง พวกมันบอก parser ว่า path จบตรงไหนและ query string เริ่มตรงไหน หรือ parameter หนึ่งหยุดและอีกอันเริ่มตรงไหน หากข้อมูลจริงของคุณมีสัญลักษณ์เหล่านั้น มันต้อง encode เพื่อให้ parser ไม่เข้าใจผิดว่าเป็นเครื่องหมายวรรคตอน เช่น หมายเลขคำสั่งซื้อ A&B/2024 ที่วางลงใน query string โดยตรงจะถูกอ่านผิดเป็น parameter สองตัวและ path segment

แล้วก็ยังมี อักขระที่ไม่ปลอดภัยและอักขระที่ไม่ใช่ ASCII: ช่องว่าง เครื่องหมายคำพูด วงเล็บมุม ตัวอักษรเน้นเสียง emoji และอะไรก็ตามที่อยู่นอกช่วง ASCII ธรรมดา สิ่งเหล่านี้ไม่ควรปรากฏตามตัวอักษรใน URL ไม่ว่าจะเพราะถูกบิดเบือนระหว่างการส่งหรือเพราะไม่มีการแสดงแทนที่กำหนดไว้ การ encode พวกมันทำให้ link สะอาดและคาดเดาได้ แทนที่จะปล่อยให้ผลลัพธ์ขึ้นอยู่กับโชค

พบในงานจริงได้ที่ไหน

Query strings คือกรณีตัวอย่างคลาสสิก ทุกค่าที่คุณต่อท้าย ?key=... ควร encode เพื่อให้ input ของผู้ใช้ไม่ทำลายโครงสร้าง สิ่งเดียวกันนี้ใช้กับการส่ง HTML form แบบ application/x-www-form-urlencoded ซึ่งเบราว์เซอร์ encode ค่า field โดยอัตโนมัติ (และตามแบบแผนทางประวัติศาสตร์จะเปลี่ยนช่องว่างเป็น + แทน %20) คุณยังพบมันเมื่อสร้าง link ที่ชี้ไปยังหน้าที่มีชื่อภาษาที่ไม่ใช่ Latin เมื่อสร้าง API request ด้วยมือ เมื่อส่ง redirect target เป็น parameter และเมื่อดีบักว่าทำไม request ที่ดูดีใน address bar จึงมาถึงเซิร์ฟเวอร์แบบผิดเพี้ยน

encodeURI กับ encodeURIComponent ต่างกันอย่างไร

JavaScript มาพร้อม encoder สองตัว และการเลือกผิดตัวเป็นบั๊กที่พบบ่อย ความแตกต่างอยู่ที่ขอบเขต encodeURIComponent ใช้สำหรับข้อมูลชิ้นเดียว เช่น ค่า query หนึ่งค่า มัน encode เกือบทุกอย่าง รวมถึง reserved characters /, ?, :, @, &, =, + และ # นั่นคือสิ่งที่คุณต้องการเมื่อข้อมูลอนุญาตให้มีสัญลักษณ์เหล่านั้นเป็นข้อความธรรมดา

encodeURI ใช้สำหรับ address ทั้งหมดที่คุณตั้งใจจะให้ทำงาน มันปล่อยอักขระโครงสร้างไว้ ดังนั้น slash เครื่องหมายทวิภาค และเครื่องหมายคำถามที่ยึด URL เข้าด้วยกันจึงรอด ใช้มันเมื่อคุณมี URL เต็มและต้องการทำความสะอาดเฉพาะช่องว่างหรืออักขระที่ไม่ใช่ ASCII ส่วน encodeURIComponent ใช้ทุกครั้งที่คุณกำลังแทรกค่าลงใน URL ที่ใหญ่กว่า กฎง่ายๆ: encode ทั้ง link ด้วย encodeURI encode ส่วนที่คุณใส่เข้าไป ด้วย encodeURIComponent

ทุกอย่างอยู่บนเครื่องของคุณ

เครื่องมือนี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณ ข้อความที่คุณวาจะถูก encode หรือ decode ในเครื่องด้วย routine มาตรฐานเดิมและไม่เดินทางไปยังเซิร์ฟเวอร์ใดๆ ทำให้ปลอดภัยสำหรับโทเค็น parameter ที่ลงนาม หรืออะไรก็ตามที่คุณไม่ต้องการส่งผ่านเครือข่าย หากคุณทำงานกับการแปลงข้อความอื่นๆ ตัวแปลง Base64 อยู่ใกล้ๆ และคุณสามารถดูเครื่องมือสำหรับนักพัฒนาทั้งชุดสำหรับตัวช่วยประจำวันอื่นๆ

คำถามที่พบบ่อย