URL 编码器 / 解码器

按规范做百分号编码:RFC 3986 的保留字符与非保留字符

encodeURIComponent、encodeURI 与 URLSearchParams

const q = 'fish & chips?';

encodeURI(q)             // 'fish%20&%20chips?'   & and ? survive!
encodeURIComponent(q)    // 'fish%20%26%20chips%3F'  safe as a value

// The failure mode:
'https://x.io/s?q=' + encodeURI(q)
// → ?q=fish%20&%20chips?   server sees TWO params: q and ' chips?'

// The modern way — encoding handled per component:
const u = new URL('https://x.io/s');
u.searchParams.set('q', q);
u.toString()             // 'https://x.io/s?q=fish+%26+chips%3F'

+ 与 %20:一个空格,两套标准

// The international phone number bug
fetch('/api/sms?to=+821012345678')
// server-side form decoding: '+' → ' '
// to = ' 821012345678'        ← corrupted, silently

fetch('/api/sms?to=%2B821012345678')
// to = '+821012345678'        ← correct

// Decoding mismatch:
decodeURIComponent('a+b%20c')            // 'a+b c'  (+ kept)
new URLSearchParams('x=a+b%20c').get('x') // 'a b c'  (+ = space)

双重编码:%2520 缺陷及其安全孪生兄弟

'New York'
→ encode once:  'New%20York'      correct
→ encode twice: 'New%2520York'    bug: % became %25

// Path traversal hidden by double encoding:
'../etc/passwd'
→ once:  '%2E%2E%2Fetc%2Fpasswd'   filter catches %2E%2E%2F
→ twice: '%252E%252E%252Fetc...'   filter sees nothing;
                                   second decode revives ../

// Diagnosis: decode until stable, count the passes
decodeURIComponent('New%2520York') // 'New%20York'  (pass 1)
decodeURIComponent('New%20York')   // 'New York'    (pass 2 → double-encoded)

URL 中的非 ASCII:UTF-8 转义、乱码与 Punycode