Web development · Yula Studios guide

URL Encoding: Query Parameters, Paths and Percent-Encoding

URL encoding represents bytes with percent signs and hexadecimal digits so values can be carried in a URL. Encode the individual value that needs it while preserving the URL's structural separators.

What percent-encoding represents

A percent-encoded sequence uses a percent sign followed by two hexadecimal digits for an octet. This gives a URL component a textual representation for bytes that cannot be used directly there or have a structural meaning. Non-ASCII text is converted to bytes with a character encoding—commonly UTF-8—before the bytes are written as percent sequences. RFC 3986 describes URI syntax and reserved characters.

Encoding changes the representation of data; it does not encrypt it. A value such as a name or search term can usually be decoded by anyone who sees the URL. Do not put passwords, secret keys, or private information into a URL simply because the characters look unfamiliar after encoding.

Encode a component, not the whole URL

A URL contains structural characters such as a scheme separator, slashes, question marks, ampersands, and equals signs. When adding a search value, encode that value so its own ampersand or equals sign is not mistaken for URL structure. Encoding the entire assembled URL can turn its separators into data and stop the browser from interpreting its parts correctly.

In JavaScript, encodeURIComponent is intended for an individual component value. The URL and URLSearchParams APIs are often easier for building query strings because they handle parameter names and values as parts. Avoid manually concatenating a query when values can contain separators, spaces, or non-ASCII text. Inspect the final URL and then parse it back to confirm that the intended parameter values survived.

Spaces and plus signs depend on context

Different URL contexts use different conventions. In application/x-www-form-urlencoded query data, a space is commonly represented by a plus sign; a literal plus sign is encoded so it is not mistaken for a space. General percent-encoding can represent a space as %20. JavaScript's URLSearchParams uses the form-style convention for query serialization, while encodeURIComponent represents a space as %20.

Do not replace every plus sign with a space across a complete URL. It might be a real plus in a path segment or a value encoded under a different convention. Use the parser and serializer designed for the particular component, then test values containing spaces, plus signs, ampersands, percent signs, and accented characters.

Avoid double-encoding and decode carefully

Double-encoding happens when a value that already contains percent sequences is encoded again. For example, a percent sign may become %25, so %20 becomes %2520. The receiving side then decodes once and may end up with the literal text %20 instead of a space. Decide which layer owns encoding, and pass raw values to the URL builder rather than pre-encoding them without a clear contract.

Decode once at the correct boundary and validate the resulting value for its intended use. Repeated decoding can turn harmless-looking text into separators or control characters. Do not decode and execute input. Percent-encoding alone does not prevent injection, phishing, path traversal, or other attacks; use context-appropriate validation, authorization, and output handling.

Build, inspect, and test the final URL

Use a URL parser to separate the origin, path, query, and fragment. Add each query parameter through URLSearchParams or the library recommended by your framework. Confirm whether a server expects one value, repeated keys, or a particular ordering; query semantics are defined by the application as well as URL syntax. Then test the exact link in the browser and inspect the value received by the destination.

The YulaTools URL component encoder is intended for an individual path or query value. It does not decide whether a URL is trustworthy or whether its destination is safe. Use a non-sensitive sample first and compare encode/decode round trips. If the input contains credentials, private tracking information, or confidential content, do not place it in a public or shareable URL.