[Javascript] Base64 사용 방법과 사용 이유 (feat. btoa, atob)

Base64 인코딩 사용이유

Base64란 8비트 이진 데이터(ex. 실행파일, zip파일 등)를 문자 코드에 영향을 받지 않는 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식이다.

즉, 원본 문자열 > ASCII binary > 6bit로 cut > Base64 인코딩 

순서로 Base64 인코딩이 진행된다.

Base64 인코딩을 사용하는 이유는 암호화나 압축체계가 아니라, 통신과정에서 바이너리 데이터 형태의 손실을 막기 위해서다. 그저 네트워크를 통해 난독화된 문자열을 전송할 수 있는 바이너리 데이터를 ASCII 코드로 변환시킨다. 

 

Javascript에서 Base64 사용 방법 

btoa()

btoa(Binary to ASCII) 바이너리 데이터를 ASCII코드로 변환시킬 때 사용하는 함수이다.

const str = "JavaScript is fun!!";

// encode the string
const encodedStr = btoa(str);

// print encoded string
console.log(encodedStr);

// output: SmF2YVNjcmlwdCBpcyBmdW4hIQ==

만약, 변환할 문자에 이모티콘과 같은 8비트 이상의 크기를 가지는 문자를 포함하면 exception이 발생하는데

이때는 입력 문자열을 8비트 바이트 배열 (ex UTF-8)로 변환한 다음 인코딩 해야한다.

function encodeUnicode(str) {
  return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g,
      function toSolidBytes(match, p1) {
          return String.fromCharCode('0x' + p1);
  }));
}

encodeUnicode('JavaScript is fun 🎉'); // SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ==
encodeUnicode('🔥💡'); // 8J+UpfCfkqE=

 

atob()

atob(ASCII to Binary)는 Base64로 인코딩된 문자를 일반 문자열로 디코딩할 때 사용하는 함수이다. 

const encodedStr = "SmF2YVNjcmlwdCBpcyBmdW4hIQ==";

// decode the string
const str = atob(encodedStr);

// print decoded string
console.log(str);

// output: JavaScript is fun!!

btoa(Binary to ASCII) 바이너리 데이터를 ASCII코드로 변환시킬 때 사용하는 함수이다.

만약 인코딩된 입력값에 16비트 유니코드가 포함되어 있다면 제대로 디코딩이 되지 않는다.

이럴 경우에는 Base64 인코딩 바이트 퍼센트를 인코딩으로 변환한 후 decodeURIComponent() 메서드로 디코딩 해야한다.

function decodeUnicode(str) {
  // Going backwards: from bytestream, to percent-encoding, to original string.
  return decodeURIComponent(atob(str).split('').map(function (c) {
    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));
}

decodeUnicode('SmF2YVNjcmlwdCBpcyBmdW4g8J+OiQ=='); // JavaScript is fun 🎉
decodeUnicode('8J+UpfCfkqE='); // 🔥💡

 

참고

- [Base64] Base64란 무엇일까? / Base64 사용 이유와 인코딩 디코딩

- [javascript] 자바스크립트 base64 사용 방법 (btoa, atob)