[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f3g3rdjcbntgz2":3},{"_id":4,"slug":5,"title":6,"subtitle":7,"kind":8,"cards":9,"tags":57,"categories":59,"source":61,"lang":64,"author":65,"audioState":68,"stats":69,"publishedAt":72,"renderer":73},"6abd45f3ca21c797c7ea264e","url-encoding-explained-20-query-strings-and-common-api-bugs-5092c270","URL Encoding Explained: %20, +, Query Strings, and Common API Bugs","A URL is not one string with one encoding rule.","news",[10,12,17,22,27,32,37,42,47,52],{"headline":6,"body":7,"imageUrl":11,"sourceImageUrl":11},"https:\u002F\u002Fmedia2.dev.to\u002Fdynamic\u002Fimage\u002Fwidth=1200,height=627,fit=cover,gravity=auto,format=auto\u002Fhttps%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F4sg4ah3qjp9n342j18js.png",{"headline":13,"body":14,"imageUrl":15,"images":16},"It has a scheme, host, path, query string","It has a scheme, host, path, query string, fragment, and sometimes user-controlled values inside those parts. Bugs appear when code treats all of them as interchangeable text.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F1.webp",{"local":15},{"headline":18,"body":19,"imageUrl":20,"images":21},"The familiar examples are spaces encoded as %20","The familiar examples are spaces encoded as %20 or +, a literal plus sign that turns into a space, and an API request whose query parameters break when a user enters & or #. The fix starts with a simple question: what exactly are you encoding? Percent-encoding protects structure Some characters have structural meaning in a URL:","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F2.webp",{"local":20},{"headline":23,"body":24,"imageUrl":25,"images":26},"If one of those characters belongs to user-provided","If one of those characters belongs to user-provided data, it must be encoded before it is placed into the relevant URL component. For example, this search term is data: If it is inserted directly into a query string, the & can be read as the start of another parameter: The intended value should instead be encoded:","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F3.webp",{"local":25},{"headline":28,"body":29,"imageUrl":30,"images":31},"Percent-encoding represents bytes with % followed by hexadecimal","Percent-encoding represents bytes with % followed by hexadecimal digits. A space can become %20, & becomes %26, and a literal plus sign becomes %2B.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F4.webp",{"local":30},{"headline":33,"body":34,"imageUrl":35,"images":36},"MDN has a useful overview of percent-encoding in","MDN has a useful overview of percent-encoding in URLs, including why the same character may be encoded differently in different contexts. Why %20 and + both mean space sometimes This is where many API bugs begin. For an ordinary URL component, a space is commonly represented as %20:","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F5.webp",{"local":35},{"headline":38,"body":39,"imageUrl":40,"images":41},"HTML form encoding uses a related but different","HTML form encoding uses a related but different convention. In application\u002Fx-www-form-urlencoded data, a space is serialized as +: Both strings can represent the same value in the right context.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F6.webp",{"local":40},{"headline":43,"body":44,"imageUrl":45,"images":46},"The important distinction is that a literal plus","The important distinction is that a literal plus sign is not a space. If the original value is C++ guide, a form-style query must encode the plus signs as %2B: When that query string is parsed, + becomes a space and %2B becomes a literal plus sign.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F7.webp",{"local":45},{"headline":48,"body":49,"imageUrl":50,"images":51},"URLSearchParams follows the application\u002Fx-www-form-urlencoded rules.","URLSearchParams follows the application\u002Fx-www-form-urlencoded rules. MDN documents that its string parser decodes + as a space, and its serializer writes spaces as +. Read the URLSearchParams reference. encodeURI and encodeURIComponent solve different problems JavaScript provides two similarly named functions. They should not be swapped casually.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F8.webp",{"local":50},{"headline":53,"body":54,"imageUrl":55,"images":56},"encodeURI() assumes that the input is already a","encodeURI() assumes that the input is already a complete URI. It preserves URL punctuation such as :, \u002F, ?, &, =, and #. encodeURIComponent() is for one component or value. It encodes a wider set of characters, including &, =, and #. This is unsafe when value comes from a user: The & remains structural. The server may interpret part of the value as another query parameter. For an individual value, use encodeURIComponent(): For a full URL with query parameters, the URL and URLSearchParams APIs are usually clearer: The serialized space appears as + because searchParams uses form-style query encoding. The value remains correct.","\u002Fapi\u002Fmedia\u002Fposts\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-5092c270\u002F9.webp",{"local":55},[58],"dev",[60],"Technology",{"name":62,"url":63},"Dev.to","https:\u002F\u002Fdev.to\u002Ftoolexo\u002Furl-encoding-explained-20-query-strings-and-common-api-bugs-47h3","en",{"handle":66,"displayName":67},"spots","Spots","queued",{"views":70,"likes":71,"saves":71,"shares":71,"completions":71,"opens":71,"skips":71,"depthSum":71},1,0,"2026-09-30T17:25:07.328Z","local"]