개발

BASE64 암호 해독하는법 (BASE64 해독기)

February 27, 2025

BASE64 해독기
해독 구현 방법

우리가 일반적으로 BASE64 암호화 코드를 직접적으로 해독하는경우는 거의 없긴한데, 온라인상에서 링크의 직접노출, 이미 암호화된 정보를 복호화 하는 용도로 가끔 BASE64 변환기를 찾아볼때가 있다.

나도 마찬가지로 필요할때마다 매번 아래 변환 사이트를 찾아가서 잘 이용하고 있다.

Base64 Decode and Encode - Online

Decode from Base64 format or encode into it with various advanced options. Our site has an easy to use online tool to convert your data.

https://www.base64decode.org/

아마 알만한 사람들은 다 아는 무난한 변환 사이트다.

근데 나처럼 웹서버를 운용하는 사람입장에선 이런 툴들을 그냥 내 사이트에다가 모아두고 싶은 욕망도 있고, 해당 기능을 자바스크립트로 만드는게 그렇게까지 어려운 수준도 아니어서 한 번 직접 만들어보기로 했다.

일단 평문 -> 암호문으로 암호화 하는경우는 거의 없고 일반적인 사용자는 암호문 -> 평문으로 바꾸는 복호화 기능만 필요하므로 나는 해당기능만 깔끔하게 있는 페이지를 만들어보기로 결정했다.

BASE64 해독기

말은 해독기라고 뭔가 있게 붙였지만 결국 단순한 규칙을 가진 변환기를 Decode 모드로만 만들어본 페이지이다.

BASE64 해독기

BASE64 암호하된 내용을 해독할 수 있는 온라인 해독기입니다.

https://erulabo.com/base64-decoder

복사 붙여넣기로 BASE64 코드를 넣으면 손쉽게 변환

기능이야 어려울게 없으므로 사용성을 극대화했다고 보면 될것같다.

보통 웹상에선 링크전달의 암호화로 주로 쓰이는 경우가 많아서 나는 복호화된 데이터가 링크면 바로 해당페이지로 이동할 수 있게 링크 방식으로 결과를 제공하게 만들었다.

또 만약에 링크가 아닌 일반 텍스트 방식의 결과가 출력이된다면 해당 내용을 쉽게 복사할 수 있게 버튼을 누르면 클립보드로 복사가 되도록 구현했다.

요는 위에 Base64Encode 사이트 기능을 구현하되 필요에 맞는 부가 UX를 넣은 사이트라고 보면된다.

물론 국내서버에서 운용중이니 속도하나 빠른건 장점!

해독 구현 방법

BASE64는 이미 약속되어있는 변환 로직을 기반으로 문자셋정도만 영향을 미치는 단순한 변환기능이다.

해당기능은 자바스크립트 함수로도 제공이되고 즉 나는 위 코드에서 자바스크립트단만 구현해주고 목적에 맞게 링크화, 복사기능등을 추가 구현한 부분에 불과하다.

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('.wrap_base64decode input.form-control');
    const resultDiv = document.getElementById('result');

    input.addEventListener('input', function() {
        const value = input.value.trim();
        if (!value) {
            resultDiv.innerHTML = '';
            return;
        }
        try {
            const decoded = decodeURIComponent(escape(atob(value)));
            if (/^https?:\/\//i.test(decoded)) {
                resultDiv.innerHTML = `<a href="${decoded}" target="_blank" class="link">${decoded}</a>`;
            } else {
                resultDiv.innerHTML = `<code>${decoded}</code> <button class="btn" onclick="window.ctcCode(this)">결과 복사</button>`;
            }
        } catch(e) {
            resultDiv.innerHTML = '<span style="color:#e0a846;">유효한 Base64 값이 아닙니다!</span>';
        }
    });
});

function reset() {
    const input = document.querySelector('.wrap_base64decode input.form-control');
    input.value = '';
    input.dispatchEvent(new Event('input'));
}Copy