Base64 인코더 디코더 온라인에서 하기

Text ⇄ Base64

Base64 인코더 / 디코더

텍스트를 Base64로, Base64를 텍스트로 바로 변환함. 한글도 깨지지 않게 처리함.

URL-safe (+/ → -_, 패딩 제거)

원문 텍스트

Base64 결과

 

변환은 전부 브라우저 안에서 처리되며 입력한 내용은 서버로 전송되지 않음.

 

x509 파서 만든 김에 자주 쓰는 것 하나 더 만들어봄. Base64는 인증서 PEM에도 쓰이고, JWT 페이로드에도 쓰이고, 이미지 data URI에도 쓰여서 개발하다 보면 은근히 자주 마주치는데 그때마다 검색해서 온라인 툴 찾아 쓰는 게 귀찮았음.

 

1. Base64가 뭔지

바이너리 데이터를 텍스트로 안전하게 옮기기 위한 인코딩 방식임. 이메일 첨부파일, JWT, 인증서, 이미지 data URI 등 텍스트로만 다뤄야 하는 곳에 바이너리를 끼워 넣을 때 씀. A-Z, a-z, 0-9, +, / 이렇게 64개 문자로만 표현하고 끝에 =로 패딩을 채움.

 

2. 한글 처리가 은근히 까다로움

자바스크립트 기본 btoa()/atob()는 한글 같은 멀티바이트 문자를 넣으면 바로 에러가 남. UTF-8로 바이트 배열을 만든 다음에 그 바이트를 문자로 변환해서 btoa에 넘겨야 함. 반대로 디코딩할 때도 바이트 배열로 받아서 TextDecoder로 풀어야 한글이 안 깨짐.

function utf8ToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  let bin = "";
  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
  return btoa(bin);
}

 

3. URL-safe 옵션

기본 Base64는 +, /, =를 쓰는데 이 문자들이 URL 쿼리스트링이나 파일명에 들어가면 문제가 생김. 그래서 JWT나 URL 파라미터에 넣을 땐 + → -, / → _로 바꾸고 패딩(=)도 빼는 URL-safe 버전을 씀. 체크박스로 켜고 끌 수 있게 해둠.

 

4. 어디에 쓰면 좋은지

• JWT 페이로드 부분만 떼서 안에 뭐가 들었는지 확인할 때
• API 응답에 Base64로 인코딩된 이미지가 와서 눈으로 확인해봐야 할 때
• Basic Auth 헤더(Authorization: Basic xxxxx==)에 들어가는 문자열 만들 때
• .env 파일에 시크릿 값 인코딩해서 넣어둘 때

 

5. 티스토리에 넣기

지난번 인증서 파서랑 넣는 방법 동일함. 글쓰기에서 HTML 모드로 바꾼 다음 위 코드 통째로 붙여넣으면 됨. 변환은 전부 브라우저에서 처리돼서 입력한 내용 어디로도 안 나감.