자바스크립트에서 URL 을 인코드하거나 디코드하는 방법에 대해서 알고 있나요?

자바스크립트 URL 인코드 디코드 방법

URL 인코드 디코드는 아래의 경우에 사용합니다.

• URL 파라미터에 특수문자가 있는 데이터를 넘길 때
  • ex) www.naver.com/search?keyword=%3A%2F%2F%5E%5E%3A%2F%2F
• 쿠키에 데이터를 담을 때
  • 쿠키의 데이터의 기호가 쿠키의 양식에 맞지 않게 들어가 HTTP 헤더의 포맷을 깰 수 있으므로 인코딩하여 넘기는 것이 안전합니다.

encodeURI(), decodeURI()

• 글로벌 오브젝트에 내장 메서드로 encodeURI() 와 decodeURI() 가 있습니다.
  • 이 함수를 통해서 "full URL"을 인코드하거나 디코드할 수 있습니다.
• 가끔은 encodeURI() 와 decodeURI() 를 통해 인코딩 디코딩이 불가능한 경우도 있습니다.
  • encodeURI() 는 "full URL" 을 인코딩하도록 설계되었기 때문에 인코딩 제외 문자가 있기 때문입니다.
  • URI Syntax 에 포함되는 기호는 제외됩니다.

URI Syntax 에 포함되어 제외되는 기호들, encodeURI() 의 제외 기호들은 아래의 문자들입니다.

A–Z a–z 0–9 - _ . ! ~ * ' ( )

; / ? : @ & = + $ , #

URL 주소에 기호로 이용되는 문자들은 인코딩에서 제외됩니다.

console.log(encodeURI("://^^://")); // ://%5E%5E://

위의 예제를 보면 :// 문자가 제외되고 인코딩된 것을 확인할 수 있습니다.

encodeURIComponent(), decodeURIComponent()

• encodeURIComponent() 는 encodeURI() 의 URI Syntax 기호를 제외하지 않고 모든 문자를 인코딩합니다.

console.log(encodeURIComponent("://^^://")); // %3A%2F%2F%5E%5E%3A%2F%2F

• 그러나 encodeURIComponent() 도 -_.!~*'(). 문자는 제외하고 인코딩을 진행합니다.
  • 만일 이를 포함하려면 replace 를 이용하여 커스텀 encode, decode 함수를 작성해주어야 합니다.

const encode = (str) =>
  encodeURIComponent(str)
    .replace(/\-/g, "%2D")
    .replace(/\_/g, "%5F")
    .replace(/\./g, "%2E")
    .replace(/\!/g, "%21")
    .replace(/\~/g, "%7E")
    .replace(/\*/g, "%2A")
    .replace(/\'/g, "%27")
    .replace(/\(/g, "%28")
    .replace(/\)/g, "%29");

encode("What's result of (4 + 2)?"); // "What%27s%20result%20of%20%284%20%2B%202%29%3F"

const decode = (str) =>
  decodeURIComponent(
    str
      .replace(/\\%2D/g, "-")
      .replace(/\\%5F/g, "_")
      .replace(/\\%2E/g, ".")
      .replace(/\\%21/g, "!")
      .replace(/\\%7E/g, "~")
      .replace(/\\%2A/g, "*")
      .replace(/\\%27/g, "'")
      .replace(/\\%28/g, "(")
      .replace(/\\%29/g, ")")
  );

decode("What%27s%20result%20of%20%284%20%2B%202%29%3F"); // "What's result of (4 + 2)?"

레퍼런스

https://thisthat.dev/encode-uri-vs-encode-uri-component/