Encodeing

const data = "<pre>\x20!=?[\x8D¾\n#+%%41&</pre>\b\b"

Here are some ways to percent-encode the string data, as defined above, in a URL query string. As a goal, the encoded string should be readable by URLSearchParams. Each example is followed by the output I received from the following JS code.

JSON.stringify(new URLSearchParams(location.search).get('b'))

The expected output is "<pre> !=?[¾\n#+%%41&</pre>\b\b". I defined data in this way since it contains a variety of character types: disallowed in URLs, unreserved in URLs, reserved in URLs, C0 and C1 control codes, relevant delimiters, and non-ASCII characters.

1.

"<pre> !=?[¾\n#+%%41&</pre>\b\b"

Encoded using encodeURIComponent.

2.

"<pre> !=?[¾\n#+%%41&</pre>\b\b"

Characters not allowed in the query part of a URI according to RFC 3986 have been encoded. Also encoded is U+26 (&) which separates key=value pairs, and U+2B (+) which represents U+20. The U+20 present in data is replaced with U+2B (+) instead of %20.

3.

"<pre> !=?[¾\n#+%%41&</pre>\b\b"

Same as previous, but instead follows the rules set by the WHATWG URL Standard for writing a valid URL string. This allows U+BE (¾) to remain unencoded.

4.

"<pre> !=?[¾\n#+%%41&</pre>\b\b"

Encodes as few characters as possible while still preserving data. The newline U+A (\n) and the final U+8 (\b) are encoded to prevent the basic URL parser from removing them. The number sign U+23 (#) is encoded, since it signals the end of the query part of a URL. Their special usage requires U+26 (&) and U+2B (+) to be encoded, and the second U+25 (%) is encoded as the two characters following it are valid hex digits. Encoding in this way allows characters which are invalid in URLs, XML 1.0, and HTML.

5.

"<pre> !=?[¾# %A&</pre>"

The query value is not cut short since U+23 (#) and U+26 (&) are encoded, but U+A (\n) is removed, U+2B (+) is converted to U+20, the second U+25 (%) is considered part of a percent-encoded U+41 (A), and the two trailing U+8 (\b) are removed.

6.

"<pre> !=?[¾"

Nothing encoded, U+23 (#) cuts the query string short.

6.

"<pre> !=?[¾\n#+%%41&</pre>\b\b"

If you take the encoded URL string from example 4 above, replace the U+20 with U+2B (+), and pass it into the JavaScript URL() constructor, then this is the stringified version of that constructed object. While not a valid URL string, it is unchanged after being parsed and serialized.