How Percent-Encoding Works
Every URL you see in a browser address bar follows the RFC 3986 specification, which defines a strict set of allowed characters. Letters, digits, and a handful of symbols (- _ . ~) are “unreserved” and can appear as-is. Everything else — spaces, ampersands, question marks, Unicode characters, emoji — must be percent-encoded: converted to their UTF-8 byte values and prefixed with %.
For example, a space becomes %20, an ampersand becomes %26, and the emoji ☕ becomes %E2%98%95 (three UTF-8 bytes). Without proper encoding, browsers and servers misinterpret special characters — breaking links, corrupting query parameters, and opening the door to injection vulnerabilities like cross-site scripting (XSS) and HTTP parameter pollution.
Encoding Methods Compared
| Method | Encodes | Preserves | Use When |
|---|---|---|---|
| encodeURIComponent | All except A-Za-z0-9 - _ . ! ~ * ' ( ) | Nothing else | Query parameter values, path segments |
| encodeURI | Spaces, non-ASCII chars | : / ? # [ ] @ ! $ & ' ( ) * + , ; = | Full URLs that should remain navigable |
| Query String (+) | Same as encodeURIComponent | Spaces encoded as + instead of %20 | HTML form submissions, legacy APIs |
Common mistake: using encodeURI on a query parameter value. Since it preserves & and =, a value like price=10&discount=5 would be interpreted as two separate parameters instead of one value. Always use encodeURIComponent for individual values.
Anatomy of a URL: What Gets Encoded Where
Protocol
https://
Never encoded
Host / Domain
api.example.com
Punycode for internationalized domains (IDN)
Path Segments
/users/café → /users/caf%C3%A9
Use encodeURIComponent per segment
Query String
?name=Jos%C3%A9&city=S%C3%A3o+Paulo
Encode each key and value separately
Where URL Encoding Is Critical
REST API Query Parameters
API filters, pagination tokens, and search queries must be percent-encoded to prevent parameter injection and ensure servers parse them correctly.
OAuth & Redirect URIs
OAuth 2.0 flows require the redirect_uri to be fully encoded. A single unescaped character can cause authentication failures or open redirect vulnerabilities.
UTM Tracking & Analytics
Marketing UTM parameters (utm_source, utm_campaign) often contain spaces and special characters. Proper encoding ensures analytics platforms attribute traffic accurately.
Deep Links & Mobile Apps
iOS Universal Links and Android App Links pass data through URL parameters. Encoding ensures deep link payloads survive parsing across different OS URL handlers.
Webhook Payloads & Callbacks
Payment gateways (Stripe, PayPal) and notification services send callback URLs with signed query parameters that must be encoded to preserve HMAC integrity.
Internationalized URLs (IRIs)
Non-Latin domain names and paths (Arabic, Chinese, Cyrillic) require proper UTF-8 percent-encoding to conform to RFC 3987 and work across all browsers.