URL Encoding Guide: Understanding Percent-Encoding for the Web

Space      →  %20
!          →  %21
#          →  %23
&          →  %26
=          →  %3D
?          →  %3F

Original:  Hello World! How are you?
Encoded:   Hello%20World%21%20How%20are%20you%3F

https://example.com/path/to/page?name=John&age=30#section
  │         │          │          │         │      │
  │         │          │          │         │      └─ # starts fragment
  │         │          │          │         └─ & separates parameters
  │         │          │          └─ = separates key from value
  │         │          └─ ? starts query string
  │         └─ : separates scheme from host
  └─ / separates path segments

Without encoding:
/search?q=rock & roll   ← Browser thinks "&" starts a new parameter

With encoding:
/search?q=rock%20%26%20roll   ← Correctly sends "rock & roll" as the value

Hello-World_2024.txt   ← No encoding needed

café   →  caf%C3%A9
中文    →  %E4%B8%AD%E6%96%87
🎉     →  %F0%9F%8E%89

encodeURIComponent('hello world')
// "hello%20world"

encodeURIComponent('a=1&b=2')
// "a%3D1%26b%3D2"

encodeURIComponent('rock & roll')
// "rock%20%26%20roll"

encodeURIComponent('https://example.com')
// "https%3A%2F%2Fexample.com"  ← Encodes : and /

encodeURI('https://example.com/path?q=hello world')
// "https://example.com/path?q=hello%20world"

encodeURI('https://example.com/path?q=rock & roll')
// "https://example.com/path?q=rock%20&%20roll"
// Note: & is NOT encoded - this breaks the URL!

decodeURIComponent('hello%20world')
// "hello world"

decodeURIComponent('rock%20%26%20roll')
// "rock & roll"

decodeURI('https://example.com/path?q=hello%20world')
// "https://example.com/path?q=hello world"

// Building query strings
const params = new URLSearchParams();
params.set('name', 'John Doe');
params.set('query', 'rock & roll');
params.set('filter', 'price<100');

params.toString()
// "name=John+Doe&query=rock+%26+roll&filter=price%3C100"

// Parsing query strings
const parsed = new URLSearchParams('name=John+Doe&age=30');
parsed.get('name')  // "John Doe"
parsed.get('age')   // "30"

const url = new URL('https://example.com/search');
url.searchParams.set('q', 'hello world');
url.searchParams.set('filter', 'a=1&b=2');

url.toString()
// "https://example.com/search?q=hello+world&filter=a%3D1%26b%3D2"

url.href
// Same as toString()

from urllib.parse import quote, unquote, urlencode

# Encode a string
quote('hello world')      # 'hello%20world'
quote('rock & roll')      # 'rock%20%26%20roll'

# Decode
unquote('hello%20world')  # 'hello world'

# Build query string (recommended)
urlencode({'name': 'John Doe', 'query': 'rock & roll'})
# 'name=John+Doe&query=rock+%26+roll'

// Encode
urlencode('hello world');       // "hello+world"
rawurlencode('hello world');    // "hello%20world"

// Decode
urldecode('hello%20world');     // "hello world"
rawurldecode('hello+world');    // "hello+world" (doesn't decode +)

// Build query string
http_build_query(['name' => 'John Doe', 'query' => 'rock & roll']);
// "name=John+Doe&query=rock+%26+roll"

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

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

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

import "net/url"

// Encode
url.QueryEscape("hello world")  // "hello+world"
url.PathEscape("hello world")   // "hello%20world"

// Decode
url.QueryUnescape("hello+world")  // "hello world"

// Build URL with query
u, _ := url.Parse("https://example.com/search")
q := u.Query()
q.Set("name", "John Doe")
u.RawQuery = q.Encode()
// https://example.com/search?name=John+Doe

// encodeURIComponent uses %20
encodeURIComponent('hello world')  // "hello%20world"

// URLSearchParams uses +
new URLSearchParams({q: 'hello world'}).toString()  // "q=hello+world"

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

// Double encoding (WRONG!)
encodeURIComponent(encoded);
// "hello%2520world"  ← %25 is the encoding of %!

// When decoded once, you get:
// "hello%20world" instead of "hello world"

const search = 'rock & roll';

// WRONG: encodeURI doesn't encode &
const url = 'https://example.com/search?q=' + encodeURI(search);
// "https://example.com/search?q=rock%20&%20roll"
// Browser sees: q=rock  AND  roll= (broken!)

// RIGHT: encodeURIComponent encodes &
const url = 'https://example.com/search?q=' + encodeURIComponent(search);
// "https://example.com/search?q=rock%20%26%20roll"

// User enters: ../../etc/passwd
const filename = userInput;

// WRONG: Path traversal attack!
fetch('/files/' + filename);

// RIGHT: Encode the path segment
fetch('/files/' + encodeURIComponent(filename));

// URL: /search?q=hello%20world
const urlParams = new URLSearchParams(window.location.search);
const query = urlParams.get('q');  // Automatically decoded: "hello world"

// If manually parsing:
const raw = 'hello%20world';
const decoded = decodeURIComponent(raw);  // "hello world"

const url = 'https://example.com/path?q=test';

// WRONG: Breaks the URL structure
encodeURIComponent(url);
// "https%3A%2F%2Fexample.com%2Fpath%3Fq%3Dtest"

// RIGHT: Only encode the parts that need it
const base = 'https://example.com/path';
const query = encodeURIComponent('hello world');
const fullUrl = base + '?q=' + query;

// User input: javascript:alert('XSS')
const url = 'redirect?url=' + encodeURIComponent(userInput);
// Safe: "redirect?url=javascript%3Aalert%28%27XSS%27%29"

// User submits: %2e%2e%2f (encoded ../)
const path = decodeURIComponent(userInput);  // "../"

// Now validate the decoded value
if (path.includes('..')) {
  throw new Error('Invalid path');
}

// Best practice: Use URL and URLSearchParams
const url = new URL('https://example.com/search');
url.searchParams.set('q', 'rock & roll');
url.searchParams.set('page', '1');
console.log(url.toString());
// "https://example.com/search?q=rock+%26+roll&page=1"