loading...

encodeURI vs encodeURIComponent vs something-inbetween?

patarapolw profile image Pacharapol Withayasakpunt ・1 min read

Indeed, the MDN said that

var set1 = ";,/?:@&=+$";  // Reserved Characters
var set2 = "-_.!~*'()";   // Unescaped Characters
var set3 = "#";           // Number Sign
var set4 = "ABC abc 123"; // Alphanumeric Characters + Space

console.log(encodeURI(set1)); // ;,/?:@&=+$
console.log(encodeURI(set2)); // -_.!~*'()
console.log(encodeURI(set3)); // #
console.log(encodeURI(set4)); // ABC%20abc%20123 (the space gets encoded as %20)

console.log(encodeURIComponent(set1)); // %3B%2C%2F%3F%3A%40%26%3D%2B%24
console.log(encodeURIComponent(set2)); // -_.!~*'()
console.log(encodeURIComponent(set3)); // %23
console.log(encodeURIComponent(set4)); // ABC%20abc%20123 (the space gets encoded as %20)
Enter fullscreen mode Exit fullscreen mode

But in specific situations (path params, querystring, hash), do these need to be encoded?

  • ;,:+$ in general?
  • = and possbly ;,/?:+$ inside querystring values?
  • # inside hash?
  • Are non-ASCII character sets potentially dangerous?

Discussion

pic
Editor guide
Collapse
antho1404 profile image
Anthony

I just had an issue yesterday about the character > and some base64 that was solved by that. I wrote something about it here dev.to/antho1404/encoding-mess-wit....
Now I would consider anything that goes in the URL should use encodeURIComponent as early as possible.