URL Encoding คืออะไร? คู่มือ Percent-Encoding ฉบับครบถ้วน

URL คืออะไร?

URL หรือ Uniform Resource Locator คือที่อยู่ของ resource บนอินเทอร์เน็ต ไม่ว่าจะเป็นหน้าเว็บ รูปภาพ API endpoint ไฟล์ หรือรายการดาวน์โหลด

URL บอกเบราว์เซอร์ว่า resource อยู่ที่ไหน ต้องใช้ protocol ใด และมีข้อมูลเพิ่มเติมอย่าง query parameters หรือ fragment อะไรบ้าง

ตัวอย่างเช่น https://www.example.com/search?q=hello+world มีทั้ง scheme, host, path และ query string

ส่วนประกอบของ URL

URL แบบเต็มสามารถประกอบด้วยหลายส่วน:

https://user:pass@www.example.com:443/path/page?key=value&q=test#section
scheme  userinfo      host            port path       query            fragment

URL Encoding คืออะไร?

URL encoding หรือ percent-encoding คือการแปลงอักขระที่ไม่ปลอดภัยหรือไม่อนุญาตใน URL ให้อยู่ในรูปแบบที่ใช้ใน URL ได้

รูปแบบคือเครื่องหมาย percent ตามด้วยเลขฐานสิบหก 2 หลัก เช่น ช่องว่างกลายเป็น %20 เพราะ byte ของช่องว่างคือ decimal 32 หรือ hex 20

Percent-encoding ถูกกำหนดในมาตรฐาน URI เช่น RFC 3986 และเป็นพื้นฐานสำคัญที่ทำให้ URL ส่งข้อความได้อย่างปลอดภัย

Before encoding:
  https://example.com/search?q=hello world&lang=en

After encoding:
  https://example.com/search?q=hello%20world&lang=en

Space becomes %20

ทำไมต้องใช้ URL Encoding?

URL encoding จำเป็นด้วยเหตุผลหลายข้อ:

• Reserved characters มีความหมายพิเศษ - เช่น ?, &, = และ # ใช้แบ่งส่วนของ URL
• ช่องว่างใส่ตรง ๆ ไม่ได้ - ต้อง encode เป็น %20 หรือบางกรณีเป็น + ใน form data
• ข้อความนอก ASCII ต้องแปลงเป็น bytes - ภาษาไทย ญี่ปุ่น ตัวอักษรมี accent และอีโมจิต้องแปลงเป็น UTF-8 ก่อน
• รักษาความถูกต้องของข้อมูล - encoding ป้องกันไม่ให้ browser, proxy หรือ server ตีความข้อมูลผู้ใช้เป็นโครงสร้าง URL
• เกี่ยวข้องกับความปลอดภัย - การ encode ที่ถูกบริบทช่วยลดปัญหา parameter injection และ redirect ที่พัง

URL Encoding ทำงานอย่างไร

กระบวนการทำงานมีขั้นตอนง่าย ๆ:

1. นำอักขระที่ต้อง encode มา
2. แปลงอักขระนั้นเป็น UTF-8 bytes
3. เขียนแต่ละ byte เป็น % ตามด้วยเลขฐานสิบหก 2 หลัก

สำหรับอักขระ ASCII แต่ละอักขระมี 1 byte:

Character: space   ASCII: 32   Hex: 20   Encoded: %20
Character: !       ASCII: 33   Hex: 21   Encoded: %21
Character: #       ASCII: 35   Hex: 23   Encoded: %23
Character: @       ASCII: 64   Hex: 40   Encoded: %40

สำหรับอักขระนอก ASCII, UTF-8 อาจมีหลาย bytes:

Character: é       UTF-8 bytes: C3 A9          Encoded: %C3%A9
Character: ñ       UTF-8 bytes: C3 B1          Encoded: %C3%B1
Character: 日      UTF-8 bytes: E6 97 A5       Encoded: %E6%97%A5
Character: 😀      UTF-8 bytes: F0 9F 98 80    Encoded: %F0%9F%98%80

Reserved และ Unreserved Characters

RFC 3986 แบ่งอักขระใน URL เป็นกลุ่ม reserved และ unreserved

อักขระ URL-Encoded ที่พบบ่อย

การ Encode Unicode และอักขระนานาชาติ

URL สมัยใหม่มักมีข้อความหลายภาษา อักขระจะถูกแปลงเป็น UTF-8 ก่อน แล้ว encode แต่ละ byte ด้วย percent-encoding

Example: Encoding "café" in a URL

c -> c                    (ASCII, no encoding needed)
a -> a                    (ASCII, no encoding needed)
f -> f                    (ASCII, no encoding needed)
é -> UTF-8 C3 A9 -> %C3%A9

Result: caf%C3%A9
Full URL: https://example.com/search?q=caf%C3%A9

เบราว์เซอร์มักแสดงอักขระที่อ่านง่ายใน address bar แต่ส่งรูปแบบที่ encode แล้วใน request จริง

URL Encoding ในภาษาโปรแกรม

ภาษาโปรแกรมส่วนใหญ่มี helper สำหรับ URL encoding และ decoding:

JavaScript

// Encode a single query parameter value
encodeURIComponent("hello world & goodbye")
// "hello%20world%20%26%20goodbye"

// Decode it back
decodeURIComponent("hello%20world%20%26%20goodbye")
// "hello world & goodbye"

// Encode an entire URI while keeping URL structure intact
encodeURI("https://example.com/path?q=hello world")
// "https://example.com/path?q=hello%20world"

// URLSearchParams handles query encoding automatically
const params = new URLSearchParams({ q: "hello world", lang: "en" });
params.toString();
// "q=hello+world&lang=en"

Python

from urllib.parse import quote, unquote, urlencode

quote("hello world & goodbye")
# 'hello%20world%20%26%20goodbye'

unquote("hello%20world%20%26%20goodbye")
# 'hello world & goodbye'

urlencode({"q": "hello world", "lang": "en"})
# 'q=hello+world&lang=en'

quote("/path/to/resource", safe="/")
# '/path/to/resource'

PHP

// Spaces become %20
rawurlencode("hello world & goodbye");
// "hello%20world%20%26%20goodbye"

// Spaces become + for form-style data
urlencode("hello world & goodbye");
// "hello+world+%26+goodbye"

rawurldecode("hello%20world");  // "hello world"
urldecode("hello+world");       // "hello world"

Java

import java.net.URLEncoder;
import java.net.URLDecoder;
import java.nio.charset.StandardCharsets;

URLEncoder.encode("hello world", StandardCharsets.UTF_8);
// "hello+world"

URLDecoder.decode("hello%20world", StandardCharsets.UTF_8);
// "hello world"

encodeURI เทียบกับ encodeURIComponent

JavaScript มีฟังก์ชันสองตัวที่ชื่อคล้ายกันมาก แต่ใช้คนละงาน:

const value = "price=10&currency=USD";

// Wrong for parameter values: & and = are not encoded
encodeURI("https://api.com/search?filter=" + value);
// "https://api.com/search?filter=price=10&currency=USD"
// Server sees two parameters: filter=price=10 and currency=USD

// Correct: encode the value as one component
"https://api.com/search?filter=" + encodeURIComponent(value);
// "https://api.com/search?filter=price%3D10%26currency%3DUSD"
// Server sees one parameter: filter=price=10&currency=USD

ข้อผิดพลาดที่พบบ่อยกับ URL Encoding

const encoded = encodeURIComponent("hello world");
// "hello%20world"

encodeURIComponent(encoded);
// "hello%2520world"  <-- wrong, % became %25

const value = "hello world";
const url = "/search?q=" + encodeURIComponent(value);
// Encode once at the boundary

// Broken or ambiguous URL
const url = "/files/" + "my report (final).pdf";
// "/files/my report (final).pdf"

// Properly encoded path segment
const url = "/files/" + encodeURIComponent("my report (final).pdf");
// "/files/my%20report%20(final).pdf"

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

URL encoding พบได้ตลอดในการทำเว็บจริง:

https://www.google.com/search?q=what+is+URL+encoding%3F

Spaces become +
Question mark becomes %3F

GET /api/users?name=O%27Brien&city=San%20Francisco

Decoded:
  name = O'Brien
  city = San Francisco

mailto:user@example.com?subject=Hello%20World&body=Hi%2C%20how%20are%20you%3F

Decoded:
  subject = Hello World
  body = Hi, how are you?

https://auth.example.com/login?redirect=https%3A%2F%2Fapp.example.com%2Fdashboard%3Ftab%3Dsettings

Decoded redirect value:
  https://app.example.com/dashboard?tab=settings