Computer Science,  Software Development,  Technology,  Tips,  Web Development

What is URL Encoding and How does it work?

Introduction

A URL (Uniform Resource Locator) is the address of a resource in the world wide web. URLs have a well-defined structure which was formulated in RFC 1738 by Tim Berners-Lee, the inventor of the world wide web.

Every URL confirms to a generic syntax which looks like this –

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

Some parts of the URL syntax like [user:password@] are deprecated and seldom used due to security reasons. Following is an example of a URL that you see more often on the internet –

https://www.google.com/search?q=hello+world#brs

There have been many improvements done to the initial RFC defining the syntax of Uniform Resource Locators (URLs). The current RFC that defines the Generic URI syntax is RFC 3986. This post contains information from the latest RFC document.

URL Encoding (Percent Encoding)

A URL is composed from a limited set of characters belonging to the US-ASCII character set. These characters include digits (0-9), letters(A-Z, a-z), and a few special characters ("-"".""_""~").

ASCII control characters (e.g. backspace, vertical tab, horizontal tab, line feed etc), unsafe characters like space\<>{} etc, and any character outside the ASCII charset is not allowed to be placed directly within URLs.

Moreover, there are some characters that have special meaning within URLs. These characters are called reserved characters. Some examples of reserved characters are ?/#: etc. Any data transmitted as part of the URL, whether in query string or path segment, must not contain these characters.

So what do we do when we need to transmit any data in the URL that contain these disallowed characters? Well, we encode them!

URL Encoding converts reserved, unsafe, and non-ASCII characters in URLs to a format that is universally accepted and understood by all web browsers and servers. It first converts the character to one or more bytes. Then each byte is represented by two hexadecimal digits preceded by a percent sign (%) – (e.g. %xy). The percent sign is used as an escape character.

URL encoding is also called percent encoding since it uses percent sign (%) as an escape character.

Additionally, URLs are limited to 2048 characters for each request. Be aware of this limit when constructing your URLs.

Special characters

We need to translate special characters because all URLs need to conform to the syntax specified by the W3 Uniform Resource Identifier specification. In effect, this means that URLs must contain only a special subset of ASCII characters: the familiar alphanumeric symbols, and some reserved characters for use as control characters within URLs. The table below summarizes these characters:

SetCharactersURL usage
Alphanumerica b c d e f g h i j k l m n o p q r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 0 1 2 3 4 5 6 7 8 9Text strings, scheme usage (http), port (8080), etc.
Unreserved– _ . ~Text strings
Reserved! * ‘ ( ) ; : @ & = + $ , / ? % # [ ]Control characters and/or Text Strings

When building a valid URL, you must ensure that it contains only those characters shown above. Conforming a URL to use this set of characters generally leads to two issues, one of omission and one of substitution:

  • Characters that you wish to handle exist outside of the above set. For example, characters in foreign languages such as 上海+中國 need to be encoded using the above characters. By popular convention, spaces (which are not allowed within URLs) are often represented using the plus '+' character as well.
  • Characters exist within the above set as reserved characters, but need to be used literally. For example, ? is used within URLs to indicate the beginning of the query string; if you wish to use the string “? and the Mysterions,” you’d need to encode the '?' character.

All characters to be URL-encoded are encoded using a '%' character and a two-character hex value corresponding to their UTF-8 character. For example, 上海+中國 in UTF-8 would be URL-encoded as %E4%B8%8A%E6%B5%B7%2B%E4%B8%AD%E5%9C%8B. The string ? and the Mysterians would be URL-encoded as %3F+and+the+Mysterians.

URL Encoding Example

Space: One of the most frequent URL Encoded character you’re likely to encounter is space. The ASCII value of space character in decimal is 32, which when converted to hex comes out to be 20. Now we just precede the hexadecimal representation with a percent sign (%), which gives us the URL encoded value – %20.

ASCII Character Encoding Reference

The following table is a reference of ASCII characters to their corresponding URL Encoded form.

Note that, Encoding alphanumeric ASCII characters are not required. For example, you don’t need to encode the character '0' to %30 as shown in the following table. It can be transmitted as is. But the encoding is still valid as per the RFC. All the characters that are safe to be transmitted inside URLs are colored green in the table.

The following table uses rules defined in RFC 3986 for URL encoding.

DecimalCharacterURL Encoding (UTF-8)
0NUL(null character)%00
1SOH(start of header)%01
2STX(start of text)%02
3ETX(end of text)%03
4EOT(end of transmission)%04
5ENQ(enquiry)%05
6ACK(acknowledge)%06
7BEL(bell (ring))%07
8BS(backspace)%08
9HT(horizontal tab)%09
10LF(line feed)%0A
11VT(vertical tab)%0B
12FF(form feed)%0C
13CR(carriage return)%0D
14SO(shift out)%0E
15SI(shift in)%0F
16DLE(data link escape)%10
17DC1(device control 1)%11
18DC2(device control 2)%12
19DC3(device control 3)%13
20DC4(device control 4)%14
21NAK(negative acknowledge)%15
22SYN(synchronize)%16
23ETB(end transmission block)%17
24CAN(cancel)%18
25EM(end of medium)%19
26SUB(substitute)%1A
27ESC(escape)%1B
28FS(file separator)%1C
29GS(group separator)%1D
30RS(record separator)%1E
31US(unit separator)%1F
32space%20
33!%21
34%22
35#%23
36$%24
37%%25
38&%26
39%27
40(%28
41)%29
42*%2A
43+%2B
44,%2C
45%2D
46.%2E
47/%2F
480%30
491%31
502%32
513%33
524%34
535%35
546%36
557%37
568%38
579%39
58:%3A
59;%3B
60<%3C
61=%3D
62>%3E
63?%3F
64@%40
65A%41
66B%42
67C%43
68D%44
69E%45
70F%46
71G%47
72H%48
73I%49
74J%4A
75K%4B
76L%4C
77M%4D
78N%4E
79O%4F
80P%50
81Q%51
82R%52
83S%53
84T%54
85U%55
86V%56
87W%57
88X%58
89Y%59
90Z%5A
91[%5B
92\%5C
93]%5D
94^%5E
95_%5F
96`%60
97a%61
98b%62
99c%63
100d%64
101e%65
102f%66
103g%67
104h%68
105i%69
106j%6A
107k%6B
108l%6C
109m%6D
110n%6E
111o%6F
112p%70
113q%71
114r%72
115s%73
116t%74
117u%75
118v%76
119w%77
120x%78
121y%79
122z%7A
123{%7B
124|%7C
125}%7D
126~%7E
127DEL(delete (rubout))%7F

References