Base64 Encoding vs Base64UrlSafe vs FormData

운영환경에 적용된 솔루션 중 Rest API를 통해 등록과 조회를 진행하는 로직에서 등록은 정상적으로 진행되지만, 등록된 정보로 조회 시 조회가 안되는 현상이 발생하였다.

 

확인 결과, 연계 서비스에서 우리 솔루션의 RestAPI 서버로 요청을 보낼 때 URL에 요청 데이터를 담아서 보내게 되는데 이 때 user의 id를 Base64 인코딩하여 보내는 결과, Base64 인코딩에 포함되는 문자열 중 + 문자열이 URL에서 사용할 경우 Space로 인식되기 때문에 정상적인 조회가 진행되지 않았다. 

 

해당 문제와 관련하여 이번에는 Base64와 관련된 포스팅을 진행해 보았다.

---

🔎 Base64 Encoding

Base64 인코딩이란 이진(binary) 데이터를 6bit씩 잘라서 64개의 문자(아스키코드)로 매핑하는 것을 말한다. Base64는 6bit당 2bit의 OverHead 발생으로 기존 데이터보다 30% 이상 길어지게 된다.

 

✔ Base64 Encoding 원리

예를 들어 apple 이라는 단어를 Base64 Encoding을 해보자.

아스키코드표에서 a는 이진수로 01100001, p는 01110000, l은 01101100, e는 01100101이다.

위의 이진수를 모두 연결하면 0110000101110000011100000110110001100101이 된다.

이 이진수를 6bit 단위로 나누면

 

011000	010111	000001	110000	011011	000110	010100
24	23	1	48	27	6	20	padding
Y	X	B	w	b	G	U	=

 

위와 같이 바뀌고, 각 6bit로 나눈 이진수를 십진수로 변환한 후 Base64 색인표에 따라 문자열로 변환하면 YXBwbGU=이 된다.

 

✔  Base64 Encoding을 사용하는 이유

이렇게 Base64 인코딩을 사용하는 가장 큰 이유는 통신과정에서 바이너리 데이터의 손실을 막기 위함이다.

플랫폼 독립적으로 Binary Data(이미지나 오디오)를 전송할 필요가 있을 때, ASCII로 Encoding하여 전송하게 되면 아래와 같은 문제가 발생할 수 있다.

1. ASCII는 7bits Encoding인데 나머지 1bit를 처리하는 방식이 시스템 별로 상이하다.
2. 일부 제어 문자의 경우 시스템 별로 다른 코드값을 가진다.

위와 같은 문제로 ASCII는 시스템 간 데이터를 전달하기에 안전하지 않다. Base64는 ASCII 문자열 중 제어 문자와 일부 특수문자를 제외한 64개의 안전한 출력 문자만 사용하여 바이너리 데이터가 시스템 독립적으로 동일하게 전송 또는 저장되는 걸 보장하기 위해 사용한다.

 

---

🔎 Base64UrlSafe

우리 솔루션과 연계된 서버에서 user_id를 Base64로 인코딩하여 저장할 때는 문제가 없다. 왜냐하면 저장하는 로직의 경우 POST 메서드로 request body 내에 user_id 값이 들어가기 때문에 +, /과 같은 문자가 영향을 미치지 않는다.

 

그러나 Base64로 인코딩한 데이터를 URL Param을 통해 보내게 된다면, +, / 문자열을 인식하는데 오류가 발생할 수 있다.

URL에서 +는 띄어쓰기를 의미하며, /는 경로구분자 기호로 인식 되기 때문이다.

 

 

따라서 Base64UrlSafe는 URL에서 사용하는 예약 기호들을 정상적으로 전송하기 위해 +, /를 -, _로 대체하여 URL에서도 Base64 인코딩을 사용할 수 있도록 만든 것이다.

MEMO
실제로 운영 환경에서는 /는 인식이 되고 =만 공백으로 들어왔는데, 그 이유는 param의 value값으로 들어가기 때문에 특별한 처리가 없어도 문자열의 일부로 인식된 것으로 보인다.

 

Base64UrlSafe가 아닌 일반 Base64에서 URL을 통해 + 혹은 / 기호를 보내고 싶을 때는 URL 인코딩 표의 값으로 대체하여 전송하면 된다.

 

 

---

🔎 Base64 vs ForData

이전에 올린 React 관련 포스팅에서 binary 데이터를 전송할 때 Form Data를 이용하여 전송했는데 Base64로 인코딩하여 전송하는 것과 무슨 차이가 있는지 궁금해졌다.

 

1. 데이터 형식
   1. Base64 인코딩은 Binary 데이터를 텍스트 형태로 변환
   2. FormData는 Binary 데이터를 직접 전송
2. 용량
   1. Base64 인코딩은 데이터의 용량을 증가시킴(약 33%)
   2. FormData는 Binary 데이터를 그대로 전송하여 용량 증가 없음
3. 지원 범위
   1. Base64 인코딩은 대부분의 프로그래밍 언어나 플랫폼에서 지원
   2. FormData는 브라우저 환경에서 주로 사용. Node.js와 같은 서버사이드 환경에서도 사용 가능 → 주로 브라우저 API에 최적화
4. 사용 용도
   1. Base64 인코딩은 텍스트 데이터와 함께 전송할 때 유용하며, 이미지나 파일 데이터를 텍스트 형태로 전송할 때 주로 사용
   2. FormData는 파일 업로드나 multipart 데이터를 전송할 때 유용하며, 서버와의 상호작용에서 주로 사용
5. 보안
   1. Base64는 데이터를 텍스트로 변환해 다른 시스템에서 쉽게 사용할 수 있게 하지만, 데이터가 쉽게 디코딩될 수 있으므로 민감한 정보에는 적합하지 않음
   2. FormData는 HTTPS를 통한 암호화 필요

 

리액트에서 업로드한 파일을 서버로 전송하기 위해서는 FormData를 쓰는 것이 더 효율적이고, 서버에서 DB에 바이너리 데이터를 저장할 때에는 Base64로 인코딩하여 텍스트로 저장하는 것이 유리하다.

 

---

📖 참고자료

https://warpgate3.tistory.com/entry/Base64-Encoding

https://devuna.tistory.com/41

https://namu.wiki/w/URL escape code

https://velog.io/@plutoin/base64와-formData