URL 編碼技術指南：從原理到應用URL Encoding Guide: From Principles to Practice

什麼是 URL 編碼？What is URL Encoding?

URL 編碼（URL Encoding），也稱為百分號編碼（Percent Encoding），是一種將特殊字元轉換為安全格式的機制，使其能夠在 URL 中正確傳輸。這個機制是網際網路運作的基礎技術之一，每次我們在瀏覽器中輸入包含中文、空格或特殊符號的網址時，URL 編碼都在背後默默運作。URL Encoding, also known as Percent Encoding, is a mechanism for converting special characters into a safe format so they can be correctly transmitted in URLs. This mechanism is one of the fundamental technologies that makes the Internet work. Every time we enter a URL containing Chinese characters, spaces, or special symbols in a browser, URL encoding works silently in the background.

舉例來說，當你搜尋「台北 101」時，瀏覽器實際發送的 URL 會是：For example, when you search for "Taipei 101", the browser actually sends this URL:

https://www.google.com/search?q=%E5%8F%B0%E5%8C%97+101

這裡的 %E5%8F%B0%E5%8C%97 就是「台北」經過 URL 編碼後的結果，而空格則被編碼為 + 符號。Here, %E5%8F%B0%E5%8C%97 is "台北" (Taipei) after URL encoding, and the space is encoded as the + symbol.

歷史背景與技術需求Historical Background and Technical Requirements

為什麼需要 URL 編碼？Why Do We Need URL Encoding?

URL 編碼的出現源於三個核心技術需求：URL encoding emerged from three core technical requirements:

1. ASCII 限制：早期的網際網路協定設計時，只考慮了 ASCII 字元集（0-127），無法直接處理非英文字元。ASCII Limitation: Early Internet protocols were designed with only the ASCII character set (0-127) in mind, unable to directly handle non-English characters.
2. 特殊字元衝突：URL 本身使用某些字元作為分隔符，如 ?、&、=，這些字元如果出現在參數值中，會導致解析錯誤。Special Character Conflicts: URLs use certain characters as delimiters, such as ?, &, =. If these appear in parameter values, they cause parsing errors.
3. 安全傳輸：某些字元在傳輸過程中可能被錯誤解釋或修改，需要轉換為安全格式。Safe Transmission: Some characters may be misinterpreted or modified during transmission, requiring conversion to a safe format.

RFC 3986 標準RFC 3986 Standard

目前的 URL 編碼規範由 RFC 3986（2005年發布）定義，取代了較舊的 RFC 1738 和 RFC 2396。這個標準明確規定了：The current URL encoding specification is defined by RFC 3986 (published in 2005), replacing the older RFC 1738 and RFC 2396. This standard clearly specifies:

• 哪些字元可以直接使用（保留字元 vs 非保留字元）Which characters can be used directly (reserved vs unreserved characters)
• 如何對不安全字元進行編碼How to encode unsafe characters
• 不同 URL 組成部分的編碼規則Encoding rules for different URL components

URL 結構深入解析Deep Dive into URL Structure

理解 URL 編碼之前，我們需要先了解 URL 的完整結構。一個標準 URL 包含以下組成部分：Before understanding URL encoding, we need to first understand the complete structure of a URL. A standard URL contains the following components:

scheme://user:password@host:port/path?query#fragment

範例：Example:
https://user:[email protected]:8080/search/results?q=URL+encoding&page=1#section2

拆解：
- scheme（協定）: https
- user（使用者）: user
- password（密碼）: pass
- host（主機）: example.com
- port（端口）: 8080
- path（路徑）: /search/results
- query（查詢參數）: q=URL+編碼&page=1
- fragment（錨點）: section2Breakdown:
- scheme (protocol): https
- user (username): user
- password: pass
- host: example.com
- port: 8080
- path: /search/results
- query (parameters): q=URL+encoding&page=1
- fragment (anchor): section2

編碼規則與字元集Encoding Rules and Character Sets

保留字元（Reserved Characters）Reserved Characters

RFC 3986 定義了以下保留字元，它們在 URL 中具有特殊意義：RFC 3986 defines the following reserved characters, which have special meaning in URLs:

: / ? # [ ] @ ! $ & ' ( ) * + , ; =

這些字元在作為數據內容時必須被編碼，但在作為 URL 結構分隔符時則不應編碼。These characters must be encoded when used as data content, but should not be encoded when used as URL structure delimiters.

非保留字元（Unreserved Characters）Unreserved Characters

這些字元可以直接使用，無需編碼：These characters can be used directly without encoding:

A-Z a-z 0-9 - _ . ~

編碼格式Encoding Format

URL 編碼使用百分號 % 後接兩個十六進制數字來表示字元。編碼步驟：URL encoding uses a percent sign % followed by two hexadecimal digits to represent characters. Encoding steps:

1. 將字元轉換為 UTF-8 字節序列Convert the character to UTF-8 byte sequence
2. 將每個字節轉換為 %XX 格式（XX 為十六進制）Convert each byte to %XX format (XX is hexadecimal)

字元: 「中」
UTF-8 編碼: E4 B8 AD（3個字節）
URL 編碼: %E4%B8%AD

字元: 空格
ASCII: 32（0x20）
URL 編碼: %20（或在查詢字串中使用 +）

字元: @
ASCII: 64（0x40）
URL 編碼: %40（當作為數據而非分隔符時）Character: "中" (Chinese)
UTF-8 encoding: E4 B8 AD (3 bytes)
URL encoding: %E4%B8%AD

Character: space
ASCII: 32 (0x20)
URL encoding: %20 (or + in query strings)

Character: @
ASCII: 64 (0x40)
URL encoding: %40 (when used as data, not delimiter)

常見字元編碼對照表Common Character Encoding Table

常見應用場景Common Use Cases

1. 表單提交1. Form Submission

當使用者提交包含特殊字元的表單時，瀏覽器會自動進行 URL 編碼：When users submit forms containing special characters, the browser automatically performs URL encoding:

姓名：張三
電子郵件：[email protected]


Name: John Doe
Email: [email protected]


https://example.com/submit?name=%E5%BC%B5%E4%B8%89&email=user%40example.com

2. API 請求2. API Requests

呼叫 RESTful API 時，參數值必須正確編碼：When calling RESTful APIs, parameter values must be properly encoded:

// 原始參數// Original parameters
{
    search: "iPhone 15 Pro",
    category: "手機&平板Phones&Tablets"
}

// 正確的 API URL// Correct API URL
https://api.example.com/products?search=iPhone+15+Pro&category=%E6%89%8B%E6%A9%9F%26%E5%B9%B3%E6%9D%BF

3. 動態 URL 生成3. Dynamic URL Generation

在生成包含用戶輸入的 URL 時，必須進行編碼以防止注入攻擊：When generating URLs containing user input, encoding is necessary to prevent injection attacks:

// 用戶輸入// User input
const userInput = "../../etc/passwd";

// 錯誤做法（易受攻擊）// Wrong approach (vulnerable)
const badUrl = `/file/${userInput}`;
// 結果: /file/../../etc/passwd （路徑穿越攻擊）// Result: /file/../../etc/passwd (path traversal attack)

// 正確做法// Correct approach
const goodUrl = `/file/${encodeURIComponent(userInput)}`;
// 結果: /file/..%2F..%2Fetc%2Fpasswd （安全）// Result: /file/..%2F..%2Fetc%2Fpasswd (safe)

程式實作範例Code Examples

JavaScript 實作JavaScript Implementation

// 1. 基本編碼/解碼// 1. Basic encoding/decoding
const original = "搜尋：JavaScript & Node.jsSearch: JavaScript & Node.js";
const encoded = encodeURIComponent(original);
const decoded = decodeURIComponent(encoded);

console.log(encoded);
// %E6%90%9C%E5%B0%8B%EF%BC%9AJavaScript%20%26%20Node.js
console.log(decoded);
// 搜尋：JavaScript & Node.jsSearch: JavaScript & Node.js

// 2. 完整 URL 編碼（保留協定和域名）// 2. Full URL encoding (preserving protocol and domain)
const fullUrl = "https://example.com/搜尋search?q=測試test";
const encodedUrl = encodeURI(fullUrl);
console.log(encodedUrl);
// https://example.com/%E6%90%9C%E5%B0%8B?q=%E6%B8%AC%E8%A9%A6

// 3. 物件轉查詢字串// 3. Object to query string
function objectToQueryString(params) {
    return Object.keys(params)
        .map(key => {
            const value = params[key];
            return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
        })
        .join('&');
}

const params = {
    搜尋search: "URL 編碼encoding",
    分類category: "技術文章Tech Articles",
    頁碼page: 1
};
console.log(objectToQueryString(params));
// %E6%90%9C%E5%B0%8B=URL+%E7%B7%A8%E7%A2%BC&...

Python 實作Python Implementation

# 1. 基本編碼/解碼# 1. Basic encoding/decoding
from urllib.parse import quote, unquote, urlencode

original = "搜尋：Python & DjangoSearch: Python & Django"
encoded = quote(original)
decoded = unquote(encoded)

print(encoded)
# %E6%90%9C%E5%B0%8B%EF%BC%9APython%20%26%20Django
print(decoded)
# 搜尋：Python & DjangoSearch: Python & Django

# 2. 字典轉查詢字串# 2. Dict to query string
params = {
    '搜尋search': 'URL 編碼encoding',
    '分類category': '技術文章Tech Articles',
    '頁碼page': 1
}
query_string = urlencode(params)
print(query_string)

# 3. 完整 URL 建構# 3. Complete URL construction
from urllib.parse import urlparse, urlunparse, parse_qs

def build_url(base_url, params):
    parsed = urlparse(base_url)
    query = urlencode(params)
    return urlunparse((
        parsed.scheme,
        parsed.netloc,
        parsed.path,
        parsed.params,
        query,
        parsed.fragment
    ))

url = build_url('https://example.com/api', {'q': '測試test', 'lang': 'zh'})
print(url)
# https://example.com/api?q=%E6%B8%AC%E8%A9%A6&lang=zh

PHP 實作PHP Implementation

<?php
// 1. 基本編碼/解碼// 1. Basic encoding/decoding
$original = "搜尋：PHP & LaravelSearch: PHP & Laravel";
$encoded = urlencode($original);
$decoded = urldecode($encoded);

echo $encoded;
// %E6%90%9C%E5%B0%8B%EF%BC%9APHP+%26+Laravel
echo $decoded;
// 搜尋：PHP & LaravelSearch: PHP & Laravel

// 2. 陣列轉查詢字串// 2. Array to query string
$params = [
    '搜尋search' => 'URL 編碼encoding',
    '分類category' => '技術文章Tech Articles',
    '頁碼page' => 1
];
$query_string = http_build_query($params);
echo $query_string;

// 3. 安全的 URL 建構// 3. Safe URL construction
function buildSafeUrl($base, $params) {
    $query = http_build_query($params);
    $separator = (strpos($base, '?') === false) ? '?' : '&';
    return $base . $separator . $query;
}

$url = buildSafeUrl('https://example.com/api', ['q' => '測試test', 'lang' => 'zh']);
echo $url;
// https://example.com/api?q=%E6%B8%AC%E8%A9%A6&lang=zh
?>

最佳實踐與安全考量Best Practices and Security

1. 選擇正確的編碼函數1. Choose the Right Encoding Function

2. 防止雙重編碼2. Prevent Double Encoding

// 錯誤：重複編碼// Wrong: Double encoding
const text = "測試test";
const encoded1 = encodeURIComponent(text);  // %E6%B8%AC%E8%A9%A6
const encoded2 = encodeURIComponent(encoded1);  // %25E6%2598%258C%25E8%25A9%25A6

// 正確：檢查是否已編碼// Correct: Check if already encoded
function safeEncode(str) {
    // 簡單檢查：如果包含 %XX 格式，可能已編碼// Simple check: if contains %XX format, may be encoded
    if (/%[0-9A-F]{2}/i.test(str)) {
        return str;  // 已編碼，直接返回// Already encoded, return as is
    }
    return encodeURIComponent(str);
}

3. 處理特殊情況3. Handle Special Cases

// 空值處理// Null value handling
function encodeParam(value) {
    if (value === null || value === undefined) {
        return '';
    }
    return encodeURIComponent(String(value));
}

// 陣列參數處理// Array parameter handling
const filters = ['JavaScript', 'Python', 'PHP'];
const query = filters.map(f => `lang=${encodeURIComponent(f)}`).join('&');
// lang=JavaScript&lang=Python&lang=PHP

4. 安全性注意事項4. Security Considerations

5. 效能優化建議5. Performance Optimization Tips

• 快取編碼結果：對於重複使用的字串，快取編碼結果Cache encoding results: Cache results for repeatedly used strings
• 批次處理：使用專門的函數一次處理整個參數物件Batch processing: Use dedicated functions to process entire parameter objects at once
• 延遲編碼：只在真正需要發送請求時才進行編碼Lazy encoding: Only encode when actually sending the request

結論Conclusion

URL 編碼是 Web 開發中不可或缺的技術。正確理解和應用 URL 編碼，不僅能確保應用程式的正確運作，還能有效防範安全漏洞。URL encoding is an essential technique in web development. Properly understanding and applying URL encoding ensures not only correct application functionality but also effective security vulnerability prevention.