URL-Safe Base64 인코딩 완벽 가이드

표준 Base64의 문제점

표준 Base64는 +, /, = 문자를 사용하는데, 이는 URL에서 특별한 의미를 가집니다.

• +: 공백으로 해석될 수 있음
• /: 경로 구분자
• =: 쿼리 파라미터 구분자

URL-Safe Base64란?

URL-Safe Base64는 이러한 문제를 해결하기 위해:

• + → - (하이픈)
• / → _ (언더스코어)
• = → 제거 또는 유지

JavaScript 구현

// 표준 Base64 → URL-Safe
function toUrlSafeBase64(base64) {
  return base64
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
}

// URL-Safe → 표준 Base64
function fromUrlSafeBase64(urlSafe) {
  let base64 = urlSafe
    .replace(/-/g, '+')
    .replace(/_/g, '/');
  
  // 패딩 복원
  while (base64.length % 4) {
    base64 += '=';
  }
  
  return base64;
}

// 사용 예
const original = 'Hello+World/Test==';
const urlSafe = toUrlSafeBase64(btoa(original));
console.log(urlSafe); // "SGVsbG8rV29ybGQvVGVzdA"

Node.js에서 사용하기

// Node.js Buffer 활용
const buffer = Buffer.from('Hello World');
const urlSafe = buffer.toString('base64url');
console.log(urlSafe);

실제 사용 사례

1. JWT 토큰: 헤더와 페이로드가 URL-Safe Base64로 인코딩
2. OAuth State 파라미터: URL에 안전하게 상태 정보 전달
3. 파일명 인코딩: URL에 파일명 포함 시