How to Encode Query Parameters Securely

Query parameters are an essential mechanism for passing state and data between web pages and APIs. However, failing to encode query parameters properly is one of the most common causes of broken links and application bugs.

Understanding the Query String

A query string begins with a question mark (?) and consists of key-value pairs separated by ampersands (&). For example:

https://urlencoder.com/search?category=shoes&color=black

If the user selects a category like "running shoes & gear", appending it directly results in:

?category=running shoes & gear&color=black

The server will interpret this as three parameters: category=running shoes , a parameter named gear with no value, and color=black. The search is ruined.

The Solution: URL Encoding

To safely pass the value "running shoes & gear", it must be percent-encoded before being appended to the URL string. In JavaScript, this is accomplished using encodeURIComponent().

const category = 'running shoes & gear';
const safeCategory = encodeURIComponent(category);
const url = `https://urlencoder.com/search?category=${safeCategory}&color=black`;
// Result: https://urlencoder.com/search?category=running%20shoes%20%26%20gear&color=black

Best Practices for Query Parameters

• Encode Both Keys and Values: While usually values contain the unsafe characters, if your keys are dynamically generated, they should be encoded too.
• Do Not Encode the Entire URL: If you run the entire URL through encodeURIComponent, it will encode the ? and & signs, breaking the URL structure entirely.
• URLSearchParams API: Modern JavaScript offers the URLSearchParams API, which automatically handles encoding for you.