🌐 ZH-TW

🔗 URL編碼器/解碼器

安全地對網址進行編碼或解碼。處理查詢參數中的特殊字元、中文與空格,產生有效的網址。

指南

瞭解更多

01

1. 什麼是網址編碼?

網址編碼(百分比編碼)是將網址中不安全的字元轉換為%加十六進位代碼的過程。由於網址只允許ASCII字元,因此中文、特殊字元、空格等都需要編碼。例如,空格會變成%20,@會變成%40,中文「你好」會變成%E4%BD%A0%E5%A5%BD。網址編碼在RFC 3986標準中定義,除了A-Z、a-z、0-9、-、_、.、~以外的字元都必須編碼。查詢參數、路徑、錨點等網址的各個部分有不同的編碼規則。

02

2. 為什麼要對特殊字元進行編碼

在網址中特殊字元具有特殊含義,因此若要作為值使用就必須編碼。例如,&是參數分隔符號,所以要在值中包含&就必須編碼為%26。=是鍵值分隔符號,?表示查詢的開始,#表示片段的開始。空格也會編碼為+或%20。如果不對中文或特殊字元進行編碼,伺服器可能無法正確解析或回傳404錯誤。特別是在網址中包含搜尋字詞或使用者輸入值時,務必進行編碼。

03

3. 查詢參數編碼

查詢參數是網址中最常需要編碼的部分。例如:https://example.com/search?q=搜尋詞&category=IT。這裡的「搜尋詞」和「IT」都應該進行編碼。使用JavaScript的encodeURIComponent()可以對=、&、?等進行編碼,從而安全地作為查詢參數值傳遞。encodeURI()用於編碼整個網址,但不會編碼=、&、?,因此不適合查詢值。請務必使用encodeURIComponent()分別對鍵與值進行編碼。

04

4. encodeURI 與 encodeURIComponent

JavaScript有兩個網址編碼函式。encodeURI()會編碼整個網址,不會編碼:、/、?、&、=等網址結構字元,用於編碼完整的網址。encodeURIComponent()會編碼網址的部分(參數值等),並對所有結構字元進行編碼,用於查詢參數、路徑段等單獨的元件。大多數情況下,使用encodeURIComponent()較為安全。可分別使用decodeURI()和decodeURIComponent()進行解碼。

05

5. 國際化網域名稱(IDN)

中文或其他語言的網域名稱(例如:中國.com)會被轉換為Punycode。Punycode是一種以ASCII表示Unicode網域的方法,使用xn--前綴。例如:「中國.com」會轉換為「xn--fiqs8s.com」。瀏覽器會自動執行這項轉換,但若要在程式碼中直接處理,則需要Punycode函式庫。請注意,網址的路徑與查詢使用一般的百分比編碼,而網域則使用Punycode。

06

6. 網址編碼最佳實務

進行網址編碼時有幾個注意事項。為防止XSS攻擊,請務必對使用者輸入進行編碼。注意不要對已編碼的網址重複編碼(雙重編碼問題)。組合網址時,請先個別對各部分進行編碼再組合。fetch()、axios等HTTP用戶端通常會自動編碼,因此要避免重複編碼。伺服器端通常支援自動解碼,所以大多數情況下不需要明確解碼。在記錄日誌或除錯網址時,查看解碼後的形式較容易閱讀。

常見問題

為什麼要對網址進行編碼?
因為網址只能使用ASCII字元,中文、空格等特殊字元必須轉換為百分比編碼(如%20、%E4%BD%A0)才能在網路上正確傳輸,避免伺服器解析錯誤。
encodeURI()和encodeURIComponent()有什麼不同?
encodeURI()用於編碼完整網址,不會編碼冒號、斜線等結構字元;encodeURIComponent()用於編碼網址中的單一元件(如查詢參數值),會編碼所有結構字元。處理查詢參數時建議使用encodeURIComponent()。
中文網域名稱要怎麼處理?
中文等非ASCII網域會被瀏覽器自動轉換為Punycode(以xn--開頭),這與網址路徑和查詢參數使用的百分比編碼不同,屬於獨立的轉換機制。
已經編碼過的網址可以再編碼一次嗎?
不建議。對已編碼的網址重複編碼會產生「雙重編碼」問題(例如%20變成%2520),導致解碼後的結果錯誤,使用前請先確認網址是否已經編碼過。
解碼失敗時該怎麼辦?
請確認輸入的內容是否為有效的百分比編碼格式(%後面須接兩位十六進位數字),格式錯誤會顯示「無效的網址編碼」訊息。