HTML의 window.btoa() 메서드는 문자열 데이터를 Base-64 형식으로 인코딩합니다. 인코딩된 결과물은 반대 역할을 하는 atob() 메서드를 사용해 다시 원래 문자열로 디코딩할 수 있습니다. 이 두 메서드는 브라우저 환경에서 간단한 텍스트 데이터를 안전하게 전달하거나 저장할 때 널리 활용됩니다.
구문(Syntax)
window.btoa() 메서드의 기본 구문은 다음과 같습니다.
window.btoa(string_to_be_encoded);
매개변수로 전달된 문자열이 Base-64 방식으로 인코딩되어 반환됩니다.
예제(Example)
다음 예제는 텍스트 영역에 입력한 메시지를 btoa() 메서드로 인코딩하고, atob() 메서드로 다시 디코딩하여 화면에 출력하는 과정을 보여줍니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
::placeholder {
color: #000;
}
</style>
<body>
<h1>HTML Window atob()/btoa() Method</h1>
<textarea placeholder="Enter your message here" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">Encode Message</button>
<button onclick="decode()" class="btn">Decode Message</button>
<div class="show"></div>
<script>
var show = document.querySelector(".show");
function encode() {
var encMsg = window.btoa(document.querySelector("textarea").value);
show.innerHTML = encMsg;
}
function decode() {
var decMsg = window.atob(window.btoa(document.querySelector("textarea").value));
show.innerHTML = decMsg;
}
</script>
</body>
</html>
실행 결과(Output)
흰색 텍스트 영역에 메시지를 입력한 후 [Encode Message] 버튼을 클릭하면, btoa() 메서드에 의해 인코딩된 문자열이 아래 영역에 표시됩니다.
이어서 [Decode Message] 버튼을 클릭하면 atob() 메서드가 인코딩된 값을 해석하여 원래 메시지를 다시 보여 줍니다.
참고: 한글 등 비 ASCII 문자 처리 시 주의사항
btoa() 메서드는 Latin-1 범위(코드 포인트 0~255)의 문자만 지원합니다. 따라서 한글처럼 이 범위를 벗어나는 문자를 직접 인코딩하면 오류가 발생할 수 있습니다. 이런 경우에는 encodeURIComponent() 등으로 문자열을 먼저 변환한 뒤 인코딩하는 방식을 사용하는 것이 안전합니다.