정의 및 사용 방법

Window 객체의 atob() 함수는 주어진 Base64로 인코딩된 ASCII 문자열을 디코딩하여, 원래의 이진 문자열(문자열의 각 문자가 1바이트 단위로 처리되는 문자열, 예: 숫자, 알파벳)로 반환합니다.

이 함수는 웹 클라이언트 환경에서 JSON, 데이터 URI 등 텍스트 기반의 통신 채널에서 전송된 Base64 문자열을 디코딩하여 원본의 이진 문자열 타입 데이터로 복원할 때 주로 사용됩니다.

주의할 점 - 디코딩할 문자열의 한계

atob() 함수는 주어진 Base64로 인코딩된 ASCII 문자열을 디코딩하도록 고안되었습니다.
Base64로 인코딩된 ASCII 문자열이 아닌 유효하지 않은 문자열은 제대로 처리할 수 없습니다. InvalidCharacterError와 같은 예외가 발생합니다.

또한 디코딩된 문자열은 이진 문자열 데이터입니다. 인코딩 전의 원본 데이터에 이진 문자열이 아닌 멀티바이트 문자열(예: 한국어, 일본어, 중국어, 이모지와 같은 문자열)이 포함되어 있었다면 디코딩 시 원본 데이터가 손상됩니다.

구문

JavaScript 
atob(encodedData)

매개변수

atob() 함수의 매개변수
encodedData 이진 문자열(문자열의 각 문자가 이진 데이터 바이트로 처리되는 문자열, 예: 숫자, 알파벳)을 Base64로 인코딩한 ASCII 코드로 구성된 문자열

반환 값

encodedData를 원본 이진 문자열(문자열의 각 문자가 1바이트 단위로 처리되는 문자열, 예: 숫자, 알파벳)로 반환합니다. encodedData의 인코딩 전 원본 데이터에 멀티바이트 문자열이 포함되어 있었다면 1바이트를 초과하는 단위이므로, 처리할 수 없어 원본 데이터가 손상됩니다.

예외

encodedData에 유효하지 않은 Base64 데이터가 포함되어 있으면 InvalidCharacterError가 발생합니다.

예제

아래 예제들은 atob() 함수의 기본 사용법부터, 실제 활용까지 보여줍니다.

기본 디코딩

atob() 함수는 Base64로 인코딩된 ASCII 문자열을 디코딩하여, 원래의 이진 문자열(문자열의 각 문자가 1바이트 단위로 처리되는 문자열, 예: 숫자, 알파벳)로 반환합니다. 이 예제는 가장 기본적인 디코딩 방식을 보여줍니다.

JavaScript 
const encoded = "SGVsbG8sIFdvcmxkIQ=="; // 원본: "Hello, World!"
const decoded = atob(encoded);

console.log(decoded); // 출력: Hello, World!
JavaScript 
const encoded = "SGVsbG8%"; // 원본: "Hello, World!"
const decoded = atob(encoded);

console.log(decoded); // 출력: Hello, World!

JWT 토큰 페이로드 디코딩

btoa()와 atob()는 Base64 인코딩/디코딩에 사용되므로, 실제 웹 개발에서는 JWT(Json Web Token)와 같은 토큰 처리에도 활용할 수 있습니다. 아래 예제에서는 JWT 토큰의 페이로드 부분을 추출하고 디코딩하여 JSON 객체로 확인하는 과정을 보여줍니다.

부연설명
btoa() 함수는 주어진 이진 문자열(문자열의 각 문자가 이진 데이터 바이트로 처리되는 문자열, 예: 숫자, 알파벳)을 Base64로 인코딩한 ASCII 코드로 구성된 문자열로 반환합니다.

JavaScript 
// 예시 JWT 토큰 (실제 토큰은 훨씬 길 수 있습니다)
const token = "eyJhbGciOiJIUInR5cCI6IkpXVCJ9.eyJ1c2VImlhdCI6MTY3ODA0ODgwMH0.SignaturePart";

// 1. 페이로드(두 번째 부분) 추출
// JWT는 "헤더.페이로드.서명" 형태로 구성되므로 split('.')로 나눕니다
const payloadBase64 = token.split('.')[1];
console.log(`추출된 페이로드(Base64): ${payloadBase64}`);

// 2. atob()를 사용하여 디코딩 (Base64 → JSON 문자열)
// btoa()는 인코딩, atob()는 디코딩 용도로 사용됩니다
const decodedJsonString = window.atob(payloadBase64);
console.log(`디코딩된 JSON 문자열: ${decodedJsonString}`);

// 3. JSON.parse()로 문자열을 객체화하여 정보 확인
const payloadObject = JSON.parse(decodedJsonString);
console.log(`사용자 ID: ${payloadObject.userId}`);
console.log(`토큰 만료 시간(exp): ${new Date(payloadObject.exp * 1000)}`);

// ⚠️ 주의:
// 실제 JWT 사용 시 민감 정보 처리에 주의하고, 
// 클라이언트에서 디코딩만으로 인증 여부를 판단하면 안 됩니다.

호환성

atob() 함수의 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
Node.js
Node.js
atob() 4 12 1 3 16
웹 워커(Web Workers) 환경에서 사용 30 12 1 10 16

명세서

atob() 함수의 명세서 사양
명세서 사양
atob() HTML
#dom-atob-dev

참고문헌

같이 보기